[CSS]スタイルシートで実装するテーブルのデザインパターンとそのポイント

Smashing Magazineのエントリーから、スタイルシートで実装するテーブルのデザインパターンとそのポイントを紹介します。

Top 10 CSS Table Designs

Horizontal Minimalist

水平型のテーブル。
セルのpaddingを十分に確保するのがポイントです。

Vertical Minimalist

垂直型のテーブル。
あまり使用されませんが、データの分類・比較に適しています。
カラム間のスペースがポイントです。

Box

ベーシックなボックス型のテーブル。
セルの背景や境界線の色がポイントです。
ホバー時に背景色を変更するのも効果的です。

Horizontal Zebra

ゼブラ模様のテーブルです。
テーブルのデータの視認度をアップします。
ゼブラ模様をつけるには、trに交互にクラス指定したり、スクリプトを使用します。

Vertical Zebra Style

垂直方向のゼブラ模様のテーブルです。
垂直方向にデータをまとめるのに適しています。
データが少し重くなることに注意してください。

One Column Emphasis

特定の縦列をハイライトしたテーブルです。
縦列には、colgroup, colを使用することができます。

Newspaper

セルの内部の境界線を変更したテーブルです。
配色、ボーダー、パディング、ホバー効果などはシンプルにします。

Rounded Corner

角丸を使用したテーブルです。
4つの角丸には画像を使用しています。
IE6などブラウザごとに十分な確認を行ってください。

Table Background

背景に画像を使用したテーブルです。
使用画像は、テーブルの主題に関係があるものを使用すると効果的です。

Cell Background

セルの背景に画像を使用したテーブルです。
全てのセルに適応することで、一貫した見栄えを提供することができます。