img
白 クリーム 黄色 淡い緑 水色 淡い青紫 淡いグレー グレー 黒 茶 赤 濃いピンク ピンク

セルに枠を付ける


セルに枠を付ける

  ie6 nn7 op8

<td>にスタイルを設定するとセルの枠線を装飾することができます。
(下の2例では <table style="border:none;"> として、テーブルの外枠を表示していません。)

<table>
<tr>
<td style="border:枠の太さ 枠線の種類 枠の色名;">左のセルに入れる文字</td>
<td style="border:枠の太さ 枠線の種類 枠の色名;">右のセルに入れる文字</td>
</tr>
</table>

例:
左のセルに枠が付きます。 右のセルに枠が付きます
例:
<table style="border:none;">
<tr>
<td style="border:1px solid #9999ff;">左のセルに枠が付きます。</td>
<td style="border:1px solid #9999ff;">右のセルに枠が付きます。</td>
</tr>
</table>


例:
左のセルに入れる文字 右のセルに入れる文字
例:
<table style="border:none;">
<tr>
<td style="border:1px dotted #9999ff;">左のセルに入れる文字</td>
<td style="border:1px dotted #9999ff;">右のセルに入れる文字</td>
</tr>
</table>


セルの枠線も上記テーブルの線種のように変更できます。テーブルとセルにスタイルを指定すれば両方を表示します。
両方を表示した際に外枠と内枠の間隔・内枠と文字との間隔を指定すれば、より見やすい表になります。
例:(テーブル枠表示)
左のセルに入れる文字 右のセルに入れる文字
例:
<table cellspacing="10" cellpadding="5" style="border:1px solid #009999;">
<tr>
<td style="border:1px dotted #ff9999;">左のセルに入れる文字</td>
<td style="border:1px dotted #ff9999;">右のセルに入れる文字</td>
</tr>
</table>


cellspacing="" はテーブルの外枠とうち枠の間隔、cellpadding="" は内枠と文字との間隔です。


例:(テーブル枠表示)
左のセルに入れる文字 右のセルに入れる文字
例:
<table cellspacing="5" cellpadding="10" style="border:1px dotted #009999;">
<tr>
<td style="border:1px solid #ff9999;">左のセルに入れる文字</td>
<td style="border:1px solid #ff9999;">右のセルに入れる文字</td>
</tr>
</table>