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

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

Top 10 CSS Table Designs

Horizontal Minimalist

Horizontal Minimalistのキャプチャ

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

Vertical Minimalist

Vertical Minimalistのキャプチャ

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

Box

Boxのキャプチャ

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

Horizontal Zebra

Horizontal Zebraのキャプチャ

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

Vertical Zebra Style

Vertical Zebra Styleのキャプチャ

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

One Column Emphasis

One Column Emphasisのキャプチャ

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

Newspaper

Newspaperのキャプチャ

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

Rounded Corner

Rounded Cornerのキャプチャ

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

Table Background

Table Backgroundのキャプチャ

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

Cell Background

Cell Backgroundのキャプチャ

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

sponsors

top of page

©2018 coliss