テーブル背景を１行おきに着色する
テーブルの背景に１行ごとに色を入れて、ユーザーに情報を分かりやすく掲載する手法をよく見かける。少し前なら該当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無効の場合は真っ白なテーブルなわけだが、十分仕事でも使えるネタだと思う。
>>というわけで試してみたりしたやつ。
<< リストの隙間はＩＥ７では大丈夫だった。 | CSSだけのリンク集 >>
トラックバック
このエントリーのトラックバックURL:
http://redline.hippy.jp/cgi/mt/mt-tb.cgi/74
