HTML5/CSS3でtableの色を一行おきに変える
メモです
CSS3でtableを行おきに色を変える
以前の記事
◇HTMLのTABLEの色を１行毎に変える方法
でjavascriptでtableを行毎に色が異なる方法を試しました。
さらに
◆jQueryを使ってみる：クロスフェード画像切り替えなど
でjQueryを使う方法を試しました。
この記事ではHTML5で定められるCSS3のセレクターを用いtableの色を変える方法を試します。
下の記述の青の部分nth-child(odd),nth-child(even)がセレクターで、 奇数行、偶数行を表し、{..}で属性指定をしています。tableのtクラスとして定義しています。
<html><head><meta http-equiv="content-type" content="text/html;charset=utf-8"></head><body> <style type="text/css"> table.t {border:1px solid #000000; border-collapse:collapse;} table.t td{border:1px solid #000000;} table.t th{border:1px solid #000000;} table.t th{background-color:#00008b;color:#ffffff;} table.t tr:nth-child(odd) td{background-color:#f0fff0;color:#000000;} table.t tr:nth-child(even) td{background-color:#e0ffff;color:#000000;} </style> <center> <!-- centerは不滅です --> <table class="t" style="text-align:center;"> <thead><tr><th style="width:5em">大型</th><th style="width:2em">→</th> <th style="width:5em">小型</th></tr></thead> <tbody> <tr> <td>ワシ</td> <td>→</td> <td>スズメ</td> </tr> <tr> <td>ペンギン</td><td>→</td> <td>ツバメ</td> </tr> <tr> <td>ツル</td> <td>→</td> <td>チドリ</td> </tr> <tr> <td>ハト</td> <td>→</td> <td>メジロ</td> </tr> </tbody> </table> </center> </body></html>
次の表示が得られます。CSS3に対応していないブラウザでは色はつきません。
| 大型 | → | 小型 |
|---|---|---|
| ワシ | → | スズメ |
| ペンギン | → | ツバメ |
| ツル | → | チドリ |
| ハト | → | メジロ |
| 大型 | → | 小型 |
|---|---|---|
| ワシ | → | スズメ |
| ペンギン | → | ツバメ |
| ツル | → | チドリ |
| ハト | → | メジロ |
<style>指定は<head>内で行うことが一般的ではありますが、 <body>内に記述しても有効です。
table.tとしているのは"t"という名のクラスの定義です。<table class="t"> で定義を参照できます。class="t"で参照していない<table>には影響を 与えません。cssの定義では基本的にclassやidを付けた定義とすべきです。 全ての<table>参照を変更してしまうような定義はけっして行う べきではありません。
なお、border:1pxはtableの罫線をセンスの悪いデコボコ
表示でなく単純な線にするものです。
<center>タグを使っているのは、中央に置く事自体はtableの
属性ではないからです。tableの属性としてセットすべきでは
ありません。
テーブルの色組み合わせを試すツール
テーブル色の組み合わせは迷うものです。
マウスで色を選択する形で試すツールを
□TABLEの色組み合わせを試すツールに置きました。
| 固定リンク