スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

テーブルの行や列を交互に色付けしてみる

テーブルの行を交互に色付けする、ストライプテーブルを試してみました。

まず、jQueryとストライプテーブル用のjsを読み込みます。



ストライプテーブル用のjs内で、trに対してnth-childプロパティを指定することで、色付けしたい行(偶数行か奇数行)に背景色をつけます。
$(function() {
	$("tr:nth-child(odd)").css("background-color", "#ccccff");
})

これで、交互に色がつきます。
行の色分け

行はcaptionを1行目とカウントするようなので、oddに指定すると実際は奇数行に色がつくようです。


行の色付けができたので、列もできるかなーと思って試してみました。

まず、テーブルにcolをつけます。
列の色分け
ヘッダー1 ヘッダー2 ヘッダー3 ヘッダー4 ヘッダー5
サンプル サンプル サンプル サンプル サンプル

そして、ストライプテーブルのjsをcolで色付けするように記述。
$(function() {
	$("col:nth-child(even)").css("background-color", "#ccccff");
})

これで、列を交互に色付けすることができました。
列の色分け

今までは、色を付けたいtrやtdにclassをつけていましたが、これでxhtmlに手を加えることなく色をつけることができますねー。これは便利。

ちなみに、nth-childプロパティはCSS3で適用されるようですね。CSS3は他にも、ボックスの角丸が実現できたり、テキストにドロップシャドウをつけたり、凄いことになっているようです。楽しみ。

新しい記事

ピックアップ

Related Posts Plugin for WordPress, Blogger...
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。