CSSでテーブルの見栄えを変更する。

CSSの設定でテーブルの雰囲気もだいぶ変わりますね。

項目１	説明１
項目２	説明２

CSSの設定はこんな感じになります。

table.tb2{
 margin-bottom:30px;
 width:520px;
 color:#666;
 border:1px solid #ccc;
 border-collapse:separate;
 border-spacing:2px;
}
.tb2 th{
 padding:5px;
 border-right:1px solod #ccc;
 background-color:#eee8cd;
}
.tb2 td{
 padding:5px;
 border-right:1px solod #ccc;
 border-bottom:1px solod #ccc;
 background-color:#fff8cd;
}

HTML側の記述はこんな感じになりますね。

<table class="tb2">
<tr>
<th>項目１</th><td>説明１</td>
</tr>
<tr>
<th>項目２</th><td>説明２</td>
</tr>
</table>

これはちょっと前の本になりますが、重宝します。さすがは永久保存版ですね。

Web creators (ウェブクリエイターズ) 2008年 10月号 [雑誌]
	インプレスコミュニケーションズ 2008-08-29 売り上げランキング : おすすめ平均 CSS 152の小技 Amazonで詳しく見る by G-Tools