REDLINE MAGAZINE | テーブル背景を１行おきに着色する

テーブル背景を１行おきに着色する

テーブルの背景に１行ごとに色を入れて、ユーザーに情報を分かりやすく掲載する手法をよく見かける。少し前なら該当tdに背景色をhtmlソース内で指定したりもしていたが、最近はcssでの制御がメインだろう。

そんなテーブルの背景に効率的に色を入れるTipsを発見したのでご紹介。

ネタ元：[ws] Striped Tables | Pruhované tabulky
cssを使ったテーブル背景色の指定についてのいくつかの方法が掲載されている。

１つ目は色に変化をつけるtdの背景色を指定しておいて、そのtdの行のtrに対してclass="hoge"を追加する方法。これが今一番多く使われている方法ではないかと思う。

２つ目はCSS3の擬似クラス、「:nth-child」を使用した方法。擬似クラスnth-childというのは同じ親を持つ子供の中で、何番目の子要素･･･というのを指すもの。詳細はこの辺りで解説してくださってるので割愛。　まぁ、この方法はちょっと先の話って気もする。

３つ目は隣接セレクタの「+」を利用して色を分けていく方法。テーブルの行数が少数であればいいかもしれないが、延々と続くテーブルや、更新頻度の高いテーブルではちと使うのはしんどい。

で、私が注目したのは４つ目のjavascriptを利用した方法。IE.FF.Opera.Safariで動作確認ＯＫとのことなので、実用的だと思える。jsによってテーブルの行を横断して、予めcssで定義されたクラスの値を挿入してくれている。そのサンプルがこちら。

Striped Tables - Example 2　Auto-striped table using Javascript

ソースを見れば分かるが、該当テーブル部分のソースのスッキリ感がたまらなく好き。当然js無効の場合は真っ白なテーブルなわけだが、十分仕事でも使えるネタだと思う。
>>というわけで試してみたりしたやつ。

2006年12月05日 15:31 | Red | パーマリンク