メモの整理: CSSでテーブルの見栄えを変更する。

2010/02/16

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

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

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

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

view plain print ?

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;
}

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側の記述はこんな感じになりますね。

view plain print ?

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

<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