« ■水平鏡像の不思議と魅力:画像認識論 | トップページ | ♪キミタチ ハ ウチュウジン カ?音声合成の今 »

HTML5/CSS3でtableの色を一行おきに変える

メモです

 CSS3でtableを行おきに色を変える

以前の記事 ◇HTMLのTABLEの色を1行毎に変える方法 で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に対応していないブラウザでは色はつきません。

大型 小型
ワシ スズメ
ペンギン ツバメ
ツル チドリ
ハト メジロ

CSS3に対応したブラウザであれば次の表示が得られているはずです。(下のtableは trそれぞれにstyle属性を与えたものです)

大型 小型
ワシ スズメ
ペンギン ツバメ
ツル チドリ
ハト メジロ

<style>指定は<head>内で行うことが一般的ではありますが、 <body>内に記述しても有効です。

table.tとしているのは"t"という名のクラスの定義です。<table class="t"> で定義を参照できます。class="t"で参照していない<table>には影響を 与えません。cssの定義では基本的にclassやidを付けた定義とすべきです。 全ての<table>参照を変更してしまうような定義はけっして行う べきではありません。

なお、border:1pxはtableの罫線をセンスの悪いデコボコ 表示でなく単純な線にするものです。
<center>タグを使っているのは、中央に置く事自体はtableの 属性ではないからです。tableの属性としてセットすべきでは ありません。

 テーブルの色組み合わせを試すツール

テーブル色の組み合わせは迷うものです。
マウスで色を選択する形で試すツールを □TABLEの色組み合わせを試すツールに置きました。

|

« ■水平鏡像の不思議と魅力:画像認識論 | トップページ | ♪キミタチ ハ ウチュウジン カ?音声合成の今 »

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/489055/40336231

この記事へのトラックバック一覧です: HTML5/CSS3でtableの色を一行おきに変える:

» テーブルの一行おきに色を付ける [何にもないぶろぐ]
今さらですが、スタイルシートで簡単に記述できることを知りました。 [続きを読む]

受信: 2016年3月14日 (月) 21時43分

« ■水平鏡像の不思議と魅力:画像認識論 | トップページ | ♪キミタチ ハ ウチュウジン カ?音声合成の今 »