色々なテーブル枠３
色々なテーブル枠 ３
ｩ 枠の線を
より細くキレイに見せる ｩ
【例】
| ここに文章や画像 | ここに文章や画像 |
|---|---|
| ここに文章や画像 | ここに文章や画像 |
<table cellspacing="1" bgcolor="66CCFF" cellpadding="5" width="100%"><tr><td width="50%" bgcolor="#ffffff">ここに文章や画像</td><td width="50%" bgcolor="#ffffff">ここに文章や画像</td></tr><tr><td width="50%" bgcolor="#ffffff">ここに文章や画像</td><td width="50%" bgcolor="#ffffff">ここに文章や画像</td></tr></table>
今までは<table>の中に、
外枠を表示する『border=""』を入れていましたが
今回は入れずにテーブルを横に並べていく方法です。
<table>の中に入れるタグ
『cellspacing=""』：外枠の太さ。
<table> 内の『bgcolor=""』は、今回の場合は、外枠の色。
<td> 内の『bgcolor=""』は、テーブル内の背景色。
『cellpadding=""』：外枠と、枠の中の（画像・文字）の間隔を調節します。
<td>の中に入れる属性
『width』：テーブルのヨコ幅
『bgcolor』：テーブルの背景色
今回の注意点は
【1】
<table>の中に『border』を入れない
テーブルの中に『cellspacing』『bgcolor』『cellpadding』を入れる。
【2】
<td> の中に『width』『bgcolor』を入れる。
これらを入れ忘れると、テーブルが崩れてしまいます
width="数値" に入れる数値は「%」でも「数字」でもOK です。
※ちなみに「100%」にした場合、
横幅いっぱいにどこかにぶつかるまで伸びていきます。
「50%」は、その半分になります。
【width="50%"にした場合】
| ここに文章や画像 | ここに文章や画像 |
|---|---|
| ここに文章や画像 | ここに文章や画像 |
<table cellspacing="1" bgcolor="66CCFF" cellpadding="5" width="50%"
><tr><td width="50%" bgcolor="#ffffff">ここに文章や画像</td><td width="50%" bgcolor="#ffffff">ここに文章や画像</td></tr><tr><td width="50%" bgcolor="#ffffff">ここに文章や画像</td><td width="50%" bgcolor="#ffffff">ここに文章や画像</td></tr></table>
【width="100%"にした場合】
| ここに文章や画像 | ここに文章や画像 |
|---|---|
| ここに文章や画像 | ここに文章や画像 |
<table cellspacing="1" bgcolor="66CCFF" cellpadding="5" width="100%"
><tr><td width="50%" bgcolor="#ffffff">ここに文章や画像</td><td width="50%" bgcolor="#ffffff">ここに文章や画像</td></tr><tr><td width="50%" bgcolor="#ffffff">ここに文章や画像</td><td width="50%" bgcolor="#ffffff">ここに文章や画像</td></tr></table>
外枠の色はお好みで変えてね
© Rakuten Group, Inc.
