CSSテクニック

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

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

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

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

テクニック使用後

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

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

やり方

1:HTMLを書く

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

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

HTML解説

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

2:スタイルシートを書く

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

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(../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;
}

CSS解説

今回のポイントは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では表示が崩れるおそれがあります。


一覧へ戻る


Last Modified 2007-03-06 © きくちゃん 2004 - All Rights Reserved