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

表を細い枠線にする


表の境界線を重ねて(結合して)表示

  ie6 nn7 op8

<table border="1" bordercolor="枠の色名" cellspacing="0">のタグで通常の表を作ると、border="1"のテーブルとセルの枠がくっつくので、思ってるような細い枠にはなってくれません。
また、ブラウザやバージョンによっては枠の色が反映しない場合も有ります。
bgcolorやbordercolorはhtmlの非推奨属性なため、将来的にもスタイルシートで代替していく必要があります。

例:
左のセルに入れる文字 右のセルに入れる文字
左下のセルに入れる文字 右下のセルに入れる文字
例:
<table border="1" bordercolor="#009966" cellspacing="0">
<tr>
<td>左のセルに入れる文字</td>
<td>右のセルに入れる文字</td>
</tr>
<tr>
<td>左下のセルに入れる文字</td>
<td>右下のセルに入れる文字</td>
</tr>
</table>


テーブルとセルに背景色を指定すると、枠線の細い表を作ることができます。

<table border="0" bgcolor="枠の色名" cellspacing="1">
<tr>
<td bgcolor="セル内の色名">左のセルに入れる文字</td>
<td bgcolor="セル内の色名">右のセルに入れる文字</td>
</tr>
<table>


例:
左のセルに入れる文字 右のセルに入れる文字
左下のセルに入れる文字 右下のセルに入れる文字
例:
<table border="0" bgcolor="#009966" cellspacing="1">
<tr>
<td bgcolor="#ffffff">左のセルに入れる文字</td>
<td bgcolor="#ffffff">右のセルに入れる文字</td>
</tr>
<tr>
<td bgcolor="#ffffff">左下のセルに入れる文字</td>
<td bgcolor="#ffffff">右下のセルに入れる文字</td>
</tr>
</table>

但し、上記のタグでは背景に色や画像がある場合、元の背景を透過してくれません。

テーブルとセルのスタイルに border-collapse:collapse; を追加すると、背景を透過した細い枠線の表が作成できます。
border-collapse は、テーブルにおけるセルのボーダー表示形式を指定するためのプロパティです。
値にはcollapseとseparateがあり、collapseはテーブル全体や各セルのボーダーを重ねて表示し、separateは別々に表示します。

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


例:
左のセルに入れる文字 右のセルに入れる文字
左下のセルに入れる文字 右下のセルに入れる文字
例:
<table style="border:1px solid #009966; border-collapse:collapse;">
<tr>
<td style="border:1px solid #009966; border-collapse:collapse;">左のセルに入れる文字</td>
<td style="border:1px solid #009966; border-collapse:collapse;">右のセルに入れる文字</td>
</tr>
<tr>
<td style="border:1px solid #009966; border-collapse:collapse;">左下のセルに入れる文字</td>
<td style="border:1px solid #009966; border-collapse:collapse;">右下のセルに入れる文字</td>
</tr>
</table>


tableやtdに個別指定できますが、ページ全体のテーブルに適用させるには下記を<head></head>内に入れて下さい。