クオリティーの高いテーブル

テーブル関連のスタイルシートと、画像を使ってハイクオリティーなテーブルを作ってみましょう。
驚くほどかっこよくなります。

テクニック使用前(table,td,thにborderを指定しただけ)

コンテンツ	人気度	コメント
初心者の館	３５％	コンスタントな需要
CSSテクニック	４５％	CSSプルダウンが話題沸騰
私的デザイン論	１０％	最近放置気味

テクニック使用後

コンテンツ	人気度	コメント
初心者の館	３５％	コンスタントな需要
CSSテクニック	４５％	CSSプルダウンが話題沸騰
私的デザイン論	１０％	最近放置気味

スマートな格子とさりげない立体感。オシャレでしょ？

やり方

HTMLはこんな感じになります。

<table class="sample">
<tr><th>コンテンツ</th><th>人気度</th><th>コメント</th></tr>
<tr><td>初心者の館</td><td>３５％</td><td>コンスタントな需要</td></tr>
<tr><td>CSSテクニック</td><td>４５％</td><td>CSSプルダウンが話題沸騰</td></tr>
<tr><td>私的デザイン論</td><td>１０％</td><td>最近放置気味</td></tr>
</table>

フツーのテーブルです。ヘッダとなる部分にthを使ったのがポイントといえばポイント。

スタイルシートはこんな感じ。

table.sample{
    border-top:1px solid #663300;
    border-left:1px solid #663300;
    border-collapse:collapse;
    border-spacing:0;
    background-color:#ffffff;
    empty-cells:show;
}
.sample th{
    border-right:1px solid #663300;
    border-bottom:1px solid #663300;
    color:#330000;
    background-color:#996633;
    background-image:url(../../csstec/img/table-back.gif);
    background-position:left top;
    padding:0.3em 1em;
    text-align:center;
}
.sample td{
    border-right:1px solid #663300;
    border-bottom:1px solid #663300;
    padding:0.3em 1em;
}

今回のポイントはborderの指定方法。

tableに上と左のborder、tdとthに右と下のborderを指定し、border-collapse:collapse;をtableに指定すると格子状のきれいな枠を組むことが出来ます。このテクニックは便利なので是非覚えておきたいところです。

つづいてthに装飾。背景色と文字色を指定して、メリハリをつけてやるとかっこよさがアップします。 これだけでも十分だけど、更に一工夫。

このような┌状の透明GIFを作ります。色は背景色より薄め。大きさは大きめに作ります。
この画像をthの背景画像にしてやると、立体感が生まれて更にかっこよくなります。

最後にpaddingで余白を調整して完成。

---

使いこなすための＋α

今回のテクニックはプロ向け雑誌から拾ってきたものなので、間違いなく使えるはず。 *07/03/06追記　IE7に対応するため古いOpera用のソースを除去しました。

サンプルがカッコ良くないとしたら、私のセンスのせいです。

配色を上手くできるかどうかが、クオリティーを大きく左右するでしょう。

*07/03/06修正　IE7に対応するため古いOpera用のソースを除去しました。古いOperaでは表示が崩れるおそれがあります。

---