CSSでテーブルの列・行の背景色を偶数(奇数)ごとに指定するやり方

テーブルの列(たて)や、行(よこ)の背景色を交互に変更したいというときのCSSの記述のやり方です。

1列ごと(または1行ごと)に背景色を変えるときは、偶数・奇数のどちらかに指定してあげればよいということなので、擬似クラスの:nth-child(n)を使います。

1列ごとに背景色を指定する

td:nth-child(even) {
  background-color: #ddd;
}

上に書いた例では、偶数番目のtd要素に背景色を指定しています。
偶数のときはevenですが、奇数にしたいときはoddを使います。

1行ごとに背景色を指定する

tr:nth-child(even) {
  background-color: #ddd;
}

偶数番目のtr要素の背景色を指定したときの書き方です。

こちらに指定したときのサンプルを載せておきます。
:nth-child(n)は、今回のテーブル以外でも箇条書きのときなどで使う場面があったりするので、覚えていると便利ですよね。

テーブル列・行の背景色指定したときの図