2006年04月30日

テーブルを見やすくする方法のあれこれ

テーブルって行ごとに色が違っていると見やすいですよね。
いくつか方法があります。

(1)JavaScriptで

少し前のはてなブックマークの注目エントリでこんなのがありました。

テーブルをJavascriptで自動的に見やすくする:phpspot開発日誌
http://phpspot.org/blog/archives/2006/04/javascript_11.html

JavaScriptでtr要素を見つけ、偶数行にはそれようのCSSクラスを適用する
という方法です。
HTML上は特に細工する必要がないので、結構汎用的に使えるテクニックだと思います。

(2)サーバーサイドで
tr要素をforやforeachなどでループさせるときに、class="" 部分を出力制御する
方法。おそらく一番よくあるタイプ。


(3)[未定] CSS3でのnth-child擬似クラスで
CSS3自体がまだ正式なものでないのでどうなるかわかりません。
nth-child擬似クラスは同じ親を持つ子供の中で、何番目のかをさします。
これを利用し、
tr:nth-child(even) {background-color: white}
tr:nth-child(odd) {background-color: silver}
のようにしてやります。(参考)
つまり奇数行、偶数行という指定でCSSを定義できるようになるかもしれないのです。
これもHTML上は特に細工がいらないはずです。


posted by webdev at 03:19| Comment(0) | TrackBack(0) | (X)HTML+CSS | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。