tableの見栄えをCSSで整える

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

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

<table summary="表のサンプル">
<tr><th>サンプル1</th><td>もう今年も終わりですね。</td></tr>
<tr><th>サンプル2</th><td>来年はどんな1年になるのでしょう。</td></tr>
<tr><th>サンプル3</th><td>歳を取る毎に、1年があっという間に過ぎていきます。</td></tr>
<tr><th>サンプル4</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;
}

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: https://www.lucky-bag.com/mt/mt-tb.cgi/282

totofund! (PukiWiki/TrackBack 0.4) - CSS/表 (2008年3月28日 13:06)

参考ページ 浮き彫りにしたCSS http://www.lucky-bag.com/archives/2004/12/tablecss.html シンプル... 続きを読む

Comments