テーブルをきれいに見せるにはbordercolorlight、bordercolordarkを使う手法と、２重テーブルによる手法などがあります。
普通のテーブル
| テスト | テスト | テスト |
| テスト | テスト | テスト |
| テスト | テスト | テスト |
bordercolorlight、bordercolordarkを使う手法
[ソース]
bordercolorlightが明るい側の線の色、bordercolordarkが暗い側の線の色です。
bordercolorlightに明るい色、bordercolordarkに暗い色を設定するとセルがへこんで見えますが、 逆にするとセルが膨らんで見えます。
| テスト | テスト | テスト |
| テスト | テスト | テスト |
| テスト | テスト | テスト |
２重テーブルによる手法
[ソース]
背景が黒のテーブルの中に背景が白のテーブルが入っています。
中のテーブルの背景はtableタグではなくてtrタグまたはtdタグに設定します。
中のテーブルのcellspacingで枠線の太さが決まります。
|
bordercolorlight、bordercolordarkを使う手法のソース
<table border="1" cellspacing="0" bordercolorlight="#333333" bordercolordark="#FFFFFF">
<tr bgcolor="#eeeeee">
<td bgcolor="#bbbbbb">テスト</td>
<td>テスト</td>
<td>テスト</td>
</tr>
<tr bgcolor="#eeeeee">
<td bgcolor="#bbbbbb">テスト</td>
<td>テスト</td>
<td>テスト</td>
</tr>
<tr bgcolor="#eeeeee">
<td bgcolor="#bbbbbb">テスト</td>
<td>テスト</td>
<td>テスト</td>
</tr>
</table>
<tr bgcolor="#eeeeee">
<td bgcolor="#bbbbbb">テスト</td>
<td>テスト</td>
<td>テスト</td>
</tr>
<tr bgcolor="#eeeeee">
<td bgcolor="#bbbbbb">テスト</td>
<td>テスト</td>
<td>テスト</td>
</tr>
<tr bgcolor="#eeeeee">
<td bgcolor="#bbbbbb">テスト</td>
<td>テスト</td>
<td>テスト</td>
</tr>
</table>
△上に戻る
２重テーブルによる手法のソース
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#000000">
<tr>
<td>
<table border="0" cellspacing="1">
<tr bgcolor="#FFFFFF">
<td>テスト</td>
<td>テスト</td>
<td>テスト</td>
</tr>
<tr bgcolor="#FFFFFF">
<td>テスト</td>
<td>テスト</td>
<td>テスト</td>
</tr>
<tr bgcolor="#FFFFFF">
<td>テスト</td>
<td>テスト</td>
<td>テスト</td>
</tr>
</table>
</td>
</tr>
</table>
<tr>
<td>
<table border="0" cellspacing="1">
<tr bgcolor="#FFFFFF">
<td>テスト</td>
<td>テスト</td>
<td>テスト</td>
</tr>
<tr bgcolor="#FFFFFF">
<td>テスト</td>
<td>テスト</td>
<td>テスト</td>
</tr>
<tr bgcolor="#FFFFFF">
<td>テスト</td>
<td>テスト</td>
<td>テスト</td>
</tr>
</table>
</td>
</tr>
</table>
