[CSS]スタイルシートで実装するテーブルのデザインパターンとそのポイント
Post on:2008年8月14日
Smashing Magazineのエントリーから、スタイルシートで実装するテーブルのデザインパターンとそのポイントを紹介します。
Horizontal Minimalist
![Horizontal Minimalistのキャプチャ](/wp-content/uploads/2008081403-01.png)
水平型のテーブル。
セルのpaddingを十分に確保するのがポイントです。
Vertical Minimalist
![Vertical Minimalistのキャプチャ](/wp-content/uploads/2008081403-02.png)
垂直型のテーブル。
あまり使用されませんが、データの分類・比較に適しています。
カラム間のスペースがポイントです。
Box
![Boxのキャプチャ](/wp-content/uploads/2008081403-03.png)
ベーシックなボックス型のテーブル。
セルの背景や境界線の色がポイントです。
ホバー時に背景色を変更するのも効果的です。
Horizontal Zebra
![Horizontal Zebraのキャプチャ](/wp-content/uploads/2008081403-04.png)
ゼブラ模様のテーブルです。
テーブルのデータの視認度をアップします。
ゼブラ模様をつけるには、trに交互にクラス指定したり、スクリプトを使用します。
Vertical Zebra Style
![Vertical Zebra Styleのキャプチャ](/wp-content/uploads/2008081403-05.png)
垂直方向のゼブラ模様のテーブルです。
垂直方向にデータをまとめるのに適しています。
データが少し重くなることに注意してください。
One Column Emphasis
![One Column Emphasisのキャプチャ](/wp-content/uploads/2008081403-06.png)
特定の縦列をハイライトしたテーブルです。
縦列には、colgroup, colを使用することができます。
Newspaper
![Newspaperのキャプチャ](/wp-content/uploads/2008081403-07.png)
セルの内部の境界線を変更したテーブルです。
配色、ボーダー、パディング、ホバー効果などはシンプルにします。
Rounded Corner
![Rounded Cornerのキャプチャ](/wp-content/uploads/2008081403-08.png)
角丸を使用したテーブルです。
4つの角丸には画像を使用しています。
IE6などブラウザごとに十分な確認を行ってください。
Table Background
![Table Backgroundのキャプチャ](/wp-content/uploads/2008081403-09.png)
背景に画像を使用したテーブルです。
使用画像は、テーブルの主題に関係があるものを使用すると効果的です。
Cell Background
![Cell Backgroundのキャプチャ](/wp-content/uploads/2008081403-10.png)
セルの背景に画像を使用したテーブルです。
全てのセルに適応することで、一貫した見栄えを提供することができます。
sponsors