Lesson 13 tableを見やすくするCSSデザインパターン - Webデザイン表現&技法の新・スタンダード・レイアウト編

Webデザイン 表現&技法の 新・スタンダード

Lesson 13

tableを見やすくする CSSデザインパターン

	制作・文			安住 光（travelogue）
＞	To Use			CSS | Javascript
＞	Browser			IE 8over | Firefox 5over | Safari 4over

tableはWebサイトの情報を見やすく整理するために欠かせない要素だ。ここでは見やすいtableにするための汎用性の高いCSSスタイルと、JavaScriptライブラリを用いてtable内の値をソートする方法を紹介する。

汎用性の高いシンプルなボックス型のテーブル【1-1】。見出しである<th> 要素と、その値である<td>要素が判別しやすく、特別な工夫がなくてもわかりやすく表 現できるため制作する側も使いやすい。<th> 要素と<td>要素で背景色や文字色を明確に分けるとわかりやすい。ここでは<th>の背景色をオレンジ、文字色を白とした【1-2】【1-3】。


【1-1】シンプルなボックス型のテーブル。特別な工夫がなくてもわかりやすい


【1-2】html は基本の構造。見出しのセルは<th>を使う


【1-3】thとtdでは別々の背景色と文字色にする

<th>と<td>の背景にそれぞれ別々の画像を指定し、グラデーションのある立体的なスタイルとしたパターン【2-1】。横幅1ピクセルの画像をX軸方向に繰り返して表示 させている。<th>の背景色（#BF1D1D）はグラデーション画像の一番濃い部分の色である【2-2】。念のため、この背景色をあわせて指定しておけば、<th>の縦寸法がグラデーション画像よりも長くなってしまった場合でも、背景の赤色が途中で途切れることがない。


【2-1】セルの背景に画像を敷いて立体感を表現した


【2-2】文章が折り返されてセルの縦が伸びた時のことも考慮し背景色を指定

ボーダーのスタイルを変更しボックスをなくしたパターン【3-1】。<th>では4ピクセルの青い実線、<td>ではグレーの点線とし、一番下の<td>にクラスを指定し3ピクセルの青の実線としている【3-2】【3-3】。このようなスタイルは、セルの背景色を使用していないためすっきりとした印象を与えられる。Webサイト全体のデザインにあわせて使い分けたい。


【3-1】背景色を使用していないためシンプルな印象


【3-2】一番下の行の<td>に青い線のクラスを指定する


【3-3】table ではボーダーを指定せず、thとtdで別々のボーダースタイルを指定

ゼブラ（縞々）型のテーブル【4-1】。<tr>にクラスを指定し行ごとに背景色の違いを持たせている【4-2】。これは上下のセルを見間違えるのを防ぐのに役立つ。たくさんの似たような数値が並ぶ大きなテーブルでは特に見やすいのがこのスタイルである。例では濃い青と薄い青を背景色として使用している【4-3】。このように同系色の濃淡で表現するとシンプルで落ち着いた印象になる。


【4-1】長大なテーブルで特に見やすいゼブラ型のテーブル


【4-2】背景色を変更する行だけclassを付与


【4-3】.colorというclassが背景色付きの行のための指定

CSS3ではさらに簡単にゼブラ型を作成できる。nth-childはCSS3で定義されている疑似クラスで、nth-child(even)なら偶数番目、nth-child(odd)なら奇数番目という 意味（P112を参照）。【4-1】のように奇数番目の<tr>にだけ薄い青の背景色を適用させるには、【5-1】のように書く。これは<tr>だけでなくたとえば<li>などでも同様の考え方で使うと便利。（IEでは未対応）


【5-1】tr:nth-child(odd)とすると奇数番目の<tr>に対する指定となる

<tr>要素に疑似クラスのhover を使うと、テーブルの中でポインタが乗っている行だけをハイライトすることができる【6-1】【6-2】。【4-1】のゼブラ型スタイルと同様に長大なテーブルでは非常に見やすくて便利だ。ただしIE6では未対応の ため、04の方法と組み合わせて使うとよいだろう。


【6-1】ポインタが乗った行だけをハイライトすることができる


【6-2】<tr>要素に擬似クラスのhoverを使って背景色を指定している

Javascript Table Sorter（http://www.scriptiny.com/2008/11/javascript-table-sorter/）を使うとテーブルにソート機能を追加することができる【7-1】。まずダウンロードしたstyle.cssとscript.jsをheader内で読み込み【7-2】、tableにclassとid属性を追加【7-3】。tableの下に【7-4】のコードを記述すれば、ソート機能が利用できるようになる。ソートさせたくない列があれば<th class="nosort">とすればよい。詳細やライセンスは配布元のサイトを参照してほしい。


【7-1】簡単な手順でテーブルにソート機能を追加することができて便利


【7-2】ダウンロードしたstyle.cssとscript.jsを読み込む


【7-3】tableにclassとid属性を追加する。tableのスタイルはcssファイルで変更可能


【7-4】tableの下にこのコードを追加する