[使えるCSSテクニックVol.2] CSS を使った見栄えの良いテーブルパート2

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

2008.11.12

第 4 回目は「CSS を使った見栄えのテーブルパート 2 」です。
table デザインのアイデアとかもうねーよ、とお困りのあなた（私も）、何かのヒントになれば幸いです。

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

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

MS 名	パイロット	台詞
ザク II	ジーン	シャア少佐だって、戦場で勝って出世したんだ！
グフ	ラル	ザクとは違うのだよ、ザクとは！
アッガイ	アカハナ	大佐、イワノフのアッガイがやられました
ゲルググ	シャア	ララァ、私を導いてくれ

[HTML]

<table id="table-01">
<tr>
<th>MS 名</th>
<th>パイロット</th>
<th class="speech">台詞</th>
</tr>
<tr>
<td>ザク II</td>
<td>ジーン</td>
<td>シャア少佐だって、戦場で勝って出世したんだ！</td>
</tr>
<tr class="even">
<td>グフ</td>
<td>ラル</td>
<td>ザクとは違うのだよ、ザクとは！</td>
</tr>
<tr>
<td>アッガイ</td>
<td>アカハナ</td>
<td>大佐、イワノフのアッガイがやられました</td>
</tr>
<tr class="even">
<td>ゲルググ</td>
<td>シャア</td>
<td>ララァ、私を導いてくれ</td>
</tr>
</table>

[CSS] 要所のみ掲載

/* =========================================================
■ table-01 CSS のみで見栄えよくしてみる
========================================================= */
table#table-01 {
    width: 510px;
    border: 1px #D9D9D9 solid;
    border-collapse: collapse;
    border-spacing: 0;
    color: #FFFFFF;
}
table#table-01 tr:hover td {
    background: #3D80DF;
    color: #FFFFFF;
}
table#table-01 th {
    padding: 5px;
    border: #444444 1px solid;
    background: #666666;
    font-weight: bold;
    line-height: 120%;
}
table#table-01 th.speech {
    background: #8C8C8C;
}
table#table-01 td {
    padding: 5px;
    border: #D9D9D9 solid;
    border-width: 0 1px 0 1px;
}
table#table-01 tr.even {
    background: #EDF3FE;
    text-align: center;
}

background の色を交互につけることで縞模様の table にして読みやすくします。自動的につけるスクリプトもありますが、今回は手作業です。
tr に hover を設定することで、行単位でマウスオーバーに反応します。IE 6 では反応しないので、hover に反応させるためのスクリプトを入れるとよいようです。
whatever:hover

2. 画像を使って見栄えよくしてみる

今度はもうちょっとリッチな感じにしてみます。

MS 名	パイロット	台詞
ザク II	ジーン	シャア少佐だって、戦場で勝って出世したんだ！
グフ	ラル	ザクとは違うのだよ、ザクとは！
アッガイ	アカハナ	大佐、イワノフのアッガイがやられました
ゲルググ	シャア	ララァ、私を導いてくれ

[HTML]

<table id="table-02">
<tr>
<th>MS 名</th>
<th>パイロット</th>
<th>台詞</th>
</tr>
<tr>
<td class="ms">ザク II</td>
<td>ジーン</td>
<td>シャア少佐だって、戦場で勝って出世したんだ！</td>
</tr>
<tr>
<td class="ms">グフ</td>
<td>ラル</td>
<td>ザクとは違うのだよ、ザクとは！</td>
</tr>
<tr>
<td class="ms">アッガイ</td>
<td>アカハナ</td>
<td>大佐、イワノフのアッガイがやられました</td>
</tr>
<tr>
<td class="ms">ゲルググ</td>
<td>シャア</td>
<td>ララァ、私を導いてくれ</td>
</tr>
</table>

[CSS] 要所のみ掲載

/* =========================================================
■ table-02 背景に画像を使ってみる
========================================================= */
table#table-02 {
    width: 510px;
    border-collapse: collapse;
    border-spacing: 0;
}
table#table-02 th {
    height: 46px;
    background: url( 画像へのパス ) repeat-x 0 100%;
    color: #FFFFFF;
    font-weight: bold;
    line-height: 23px;
}
table#table-02 tr:hover td {
    background: #F2D4CC;
}
table#table-02 td {
    padding: 10px 5px;
    border: #000000 solid;
    border-width: 0 0 1px 0;
}
table#table-02 td.ms {
    background: #EEEEEE;
    color: #9B1F00;
    font-weight: bold;
}

border をヨコのラインのみにして、情報をすっきりと見せています。余白を多めに取るとより読み取りやすいです。
ヨコ th の background に画像を指定します。table の内容にあった画像なら雰囲気が伝わりやすいですね。
タテ th には class で色をつけたり色を変えたりして情報を読みやすくします。

3. colgroup を使って見栄えよくしてみる

パイロット	ジーン	ラル	アカハナ	シャア
MS	ザク II	グフ	アッガイ	ゲルググ
階級	伍長	大尉	少尉	大佐
戦死地	サイド 7	砂漠	ジャブロー	Z ガンダムへ？

[HTML]

<table id="table-03">
<colgroup>
<col class="title" />
<col class="zebla-01" />
<col class="zebla-02" />
<col class="zebla-01" />
<col class="zebla-02" />
</colgroup>
<tr>
<th>パイロット</th>
<th id="pilot-01">ジーン</th>
<th id="pilot-02">ラル</th>
<th id="pilot-01">アカハナ</th>
<th id="pilot-02">シャア</th>
</tr>
<tr>
<td>MS</td>
<td>ザク II</td>
<td>グフ</td>
<td>アッガイ</td>
<td>ゲルググ</td>
</tr>
<tr>
<td>階級</td>
<td>伍長</td>
<td>大尉</td>
<td>少尉</td>
<td>大佐</td>
</tr>
<tr>
<td>戦死地</td>
<td>サイド 7</td>
<td>砂漠</td>
<td>ジャブロー</td>
<td>Z ガンダムへ？</td>
</tr>
</table>

[CSS] 要所のみ掲載

/* =========================================================
■ table-03 colgroup を使う
========================================================= */
table#table-03 {
    width: 510px;
    border-collapse: collapse;
    border-spacing: 0;
    border: solid #C93F2C;
    border-width: 1px 0;
}
table#table-03 tr:hover td {
    font-weight: bold;
}
table#table-03 th {
    padding: 8px;
}
table#table-03 td {
    padding: 8px;
    border: solid #C93F2C;
    border-width: 1px 0;
}
table#table-03 colgroup col.title {
    width: 90px;
    background: #410000;
}
table#table-03 colgroup col.zebla-01 {
    width: 100px;
    background: #B51400;
}
table#table-03 colgroup col.zebla-02 {
    width: 100px;
    background: #800200;
}
table#table-03 th#pilot-01 {
    background: #800200;
}
table#table-03 th#pilot-02 {
    background: #5B0000;
}