背景色を利用
テーブル枠線の色は、背景色を利用すると見栄えよく設定できます。
<table border="1" cellspacing="1" cellpadding="5" width="500">
<tr><td>セル1</td><td>セル2</td></tr>
<tr><td>セル3</td><td>セル4</td></tr>
</table>
<div class="table">
<table border="0" cellspacing="1" cellpadding="5" width="500">
<tr><td>セル1</td><td>セル2</td></tr>
<tr><td>セル3</td><td>セル4</td></tr>
</table>
</div>
- スタイルシート
- div.table table { background-color: #800000 }
<div class="table">
<table border="0" cellspacing="1" cellpadding="5" width="500">
<tr><td>セル1</td><td>セル2</td></tr>
<tr><td>セル3</td><td>セル4</td></tr>
</table>
</div>
- スタイルシート
- div.table table { background-color: #800000 }
- td { background-color: #fffff0 }
■HTML5
<table>
<tr><td>セル1</td><td>セル2</td></tr>
<tr><td>セル3</td><td>セル4</td></tr>
</table>
■CSS
table{border:1px solid #800000; border-collapse:collapse; border-spacing:0px; width:500px;}
td{border:1px solid #800000; padding:5px; background-color:#fffff0;}
参考:テーブルには「 bordercolor 」を利用した色設定もあります。ただし、規格外なので表示されない環境も多いです。
<table bordercolor="#800000" border="" cellspacing="" cellpadding="">
<tr><td>セル1</td><td>セル2</td></tr>
<tr><td>セル3</td><td>セル4</td></tr>
</table>
※ 表示例も作成しようと思いましたが、エラーがでるのでやめました。