CSS: tableの奇数行と偶数行で色を変える

テーブルの奇数行と偶数行で色を変えると表が見やすくなります。 色を変えるには「:nth-child(n)」セレクタをを使用します。

「tr:nth-child(2)」と指定した場合は、trの親要素であるtable要素から見て、 2番目のtd要素になります。「tr:nth-child(3)」とした場合は3番目です。

nth-child(n)のカッコ内に n を指定すると「n = 0, 1, 2, 3, ...」 の意味となり、一括で指定できます。

奇数行を指定する場合は「tr:nth-child(2n+1)」、 偶数行を指定する場合は「tr:nth-child(2n)」と記述します。

奇数行と偶数行で色を変えるサンプルコード

下のテーブルは「tr:nth-child(2n)」を使って偶数行の色を変更しています。
ヘッダヘッダヘッダ
データデータデータ
データデータデータ
データデータデータ
データデータデータ
データデータデータ
データデータデータ
table {
    border-collapse: separate;
}

table, td, th {
    border: 1px solid black;
}
tr:nth-child(2n) {
	background-color: lightblue;
}
HTML・CSS入門