table要素はWebページにとってなくてはならないものだ。しかしデザインや設定が難しい要素でもある。テーブルを簡潔に記述しつつCSSで優れたデザインを提供したいところだが、Webブラウザ間の差異もありなかなか希望通りの設定ができない。そこでR.Christie氏がSmashing Magazineにおいて公開しているTop 10 CSS Table Designsに注目したい。XHTML 1.0に準拠したテーブルを順次CSSを使ってカスタマイズしていくというもので、見やすい上に説明も簡潔でわかりやすい。WebデザイナやWebデベロッパは一度チェックしておきたいドキュメントだ。コンテンツは次の10の内容で構成されている。

1. Horizontal Minimalist
2. Vertical Minimalist
3. Box
4. Horizontal Zebra
5. Vertical Zebra Style
6. One Column Emphasis
7. Newspaper
8. Rounded Corner
9. Table Background
10. Cell Background

テーブル例その1 - Top 10 CSS Table Designsより抜粋

テーブル例その2 - Top 10 CSS Table Designsより抜粋

テーブル例その3 - Top 10 CSS Table Designsより抜粋

テーブル例その4 - Top 10 CSS Table Designsより抜粋

ドキュメントで掲載されているテーブルはFirefox 3、IE 6、IE 7、Opera 9.x、Safariでチェックされているほか、ドキュメントの最後の方で掲載されているテーブルのサンプルコードが提供されている。随所で記載されている説明そのものが有益だが、英語が読めない場合でも使ってみたいテーブルとそのサンプルコードの一覧としても活用できる。

提供されているサンプルコードはindex.htmlとstyle.css、それに表示に使っている画像データというシンプルな作りだ。table要素にはid属性が指定され、CSSではそのidを使ってテーブルを特定しスタイルを設定している。サンプルとしても簡素でわかりやすい作りになっているため活用しやすい。