tableの見栄えをCSSで整える

テーブルは窓から投げ捨てろとtable要素をサイトのレイアウトや視覚的な目的に使う事は、table本来の使用目的とは違うため、やめるべきだと言う流れになっています。しかし、tableを使うなと言うことではなく、表のためにtable要素を使うことは全然構わないわけです。そこで、味気ない表よりは多少見栄えを良くするためにCSSで整えてみます。背景画像を用意して指定することにより、よりデザインチックな表に仕上げる事も出来ますが、画像を使用しなくてもある程度は見栄え良くできる方法だと思います。

サンプルとして以下のtableを使用します。borderやcellpaddingなどの属性は一切設定していません。sample01.html

<table summary="表のサンプル">
<tr><th>サンプル１</th><td>もう今年も終わりですね。</td></tr>
<tr><th>サンプル２</th><td>来年はどんな１年になるのでしょう。</td></tr>
<tr><th>サンプル３</th><td>歳を取る毎に、１年があっという間に過ぎていきます。</td></tr>
<tr><th>サンプル４</th><td>気が付いたらもうオッサンです。</td></tr>
</table>

<table>にborder-collapse: separate;と border-spacing: 1px;でセル間を離して設定し、<th>と<td>の右と下にそれぞれボーダーを設定することによって、タイルっぽく浮き出た感じになります。sample02.html

table {
        font-size: 80%;
        color: #666666;
        width: 520px;
        margin-bottom: 30px;
        border: 1px solid #CCCCCC;
        border-collapse: separate;
        border-spacing: 1px;
}
th {
        padding: 5px;
        border-right: 1px solid #CCCCCC;
        border-bottom: 1px solid #CCCCCC;
        background-color: #E1E2E6;
}
td {
        padding: 5px;
        border-right: 1px solid #CCCCCC;
        border-bottom: 1px solid #CCCCCC;
        background-color: #EFF2F3;
}