[使える CSS テクニック]CSSを使った見栄えの良い表組み（table）

使えるCSSテクニック Vol.01

2008.06.13

第 6 回目は「CSSを使った見栄えの良い表組み（table）」です。

Web サイトのレイアウトがすべて table でコントロールされていた時代がありましたが、今そんなことをしたら嘲笑を買う時代です。
本来の「複数のデータを表示･比較の際にわかりやすいよう見せる表組み」のためのテーブルを、CSSを使って見栄えよくしてみましょう。

1. CSS のみで見栄えよくしてみる

線と塗りだけで表現する、一番シンプルなテーブルを作ってみます。

[HTML]

<table id="table-01">
<tr>
<th>本体名称</th>
<th>スタンド名</th>
<th>スピード</th>
<th>持続力</th>
<th>精密動作性</th>
<th>成長性</th>
</tr>
<tr>
<td>空条 承太郎</td>
<td>スター・プラチナ</td>
<td>A</td>
<td>A</td>
<td>A</td>
<td>A</td>
</tr>
<tr>
<td>ジョセフ・ジョースター</td>
<td>ハーミット・パープル</td>
<td>C</td>
<td>A</td>
<td>D</td>
<td>E</td>
</tr>
<tr>
<td>東方 仗助</td>
<td>クレイジー・ダイヤモンド</td>
<td>A</td>
<td>B</td>
<td>B</td>
<td>C</td>
</tr>
</table>

[サンプル]

本体名称	スタンド名	スピード	持続力	精密動作性	成長性
空条承太郎	スター・プラチナ	A	A	A	A
ジョセフ・ジョースター	ハーミット・パープル	C	A	D	E
東方仗助	クレイジー・ダイヤモンド	A	B	B	C

[CSS]

table#table-01 {
    width: 530px;
    border: 1px #E3E3E3 solid;
    border-collapse: collapse;
    border-spacing: 0;
}

table#table-01 th {
    padding: 5px;
    border: #E3E3E3 solid;
    border-width: 0 0 1px 1px;
    background: #F5F5F5;
    font-weight: bold;
    line-height: 120%;
    text-align: center;
}
table#table-01 td {
    padding: 5px;
    border: 1px #E3E3E3 solid;
    border-width: 0 0 1px 1px;
    text-align: center;
}

[ポイント]

border-collapseに collapseを指定して、ボーダーが二重になるのを防ぎます。

2. 背景に画像を使ってみる

テーブルの背景に画像を使って、なんだかリッチな雰囲気を出してみます。

[HTML]

1.と同じです

[サンプル]

本体名称	スタンド名	スピード	持続力	精密動作性	成長性
空条承太郎	スター・プラチナ	A	A	A	A
ジョセフ・ジョースター	ハーミット・パープル	C	A	D	E
東方仗助	クレイジー・ダイヤモンド	A	B	B	C

[CSS]

table#table-02 {
    width: 530px;
    border: 1px #E3E3E3 solid;
    border-spacing: 0;
    background: #D5F0F0 url(img/bg_02.gif) repeat-x 0 100%;
}

table#table-02 th {
    padding: 5px;
    border: #98DCDC solid;
    border-width: 0 0 1px 1px;
    background: #73CECE url(img/bg_02_header.gif) repeat-x 0 100%;
    color: #FFFFFF;
    font-weight: bold;
    line-height: 120%;
    text-align: center;
}
table#table-02 td {
    padding: 5px;
    border-style: solid;
    border-width: 1px;
    border-color: #FFFFFF #8ED9D9 #8ED9D9 #FFFFFF;
    color: #1A4444;
    text-align: center;
}

[ポイント]