【CSS】テーブルの背景色を交互に変える方法

テーブルの行ごとに異なる背景色を適用することで、視認性を向上させることができます。以下に、CSSのみで実装する方法を紹介します。

nth-child()を使用する方法

CSSの :nth-child(even) または :nth-child(odd) を使用すると、偶数・奇数の行ごとに異なる背景色を適用できます。

CSS

/* 偶数行に背景色を適用 */
tr:nth-child(even) {
  background-color: #f2f2f2;
}

/* 奇数行に背景色を適用 */
tr:nth-child(odd) {
  background-color: #ffffff;
}

HTML

<table border="1">
  <tr>
    <th>番号</th>
    <th>名前</th>
    <th>年齢</th>
  </tr>
  <tr>
    <td>1</td>
    <td>田中</td>
    <td>25</td>
  </tr>
  <tr>
    <td>2</td>
    <td>佐藤</td>
    <td>30</td>
  </tr>
  <tr>
    <td>3</td>
    <td>鈴木</td>
    <td>28</td>
  </tr>
</table>

この方法では、even を指定すると偶数行（2, 4, 6…）に適用され、odd を指定すると奇数行（1, 3, 5…）に適用されます。

サンプル

番号	名前	年齢
1	田中	25
2	佐藤	30
3	鈴木	28

nth-of-type()を使用する方法

テーブルの行が異なる要素（例えば

や

）を含む場合、nth-of-type() を使用すると、適切にスタイルを適用できます。

tbody tr:nth-of-type(even) {
  background-color: #f2f2f2;
}

tbody を指定することで、thead や tfoot に影響を与えずに tbody 内の tr だけをスタイル適用できます。

nth-child(odd/even) を使った列（セル）の背景色変更

行ではなく、列ごとに交互の背景色を適用したい場合は、td:nth-child() を使用します。

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

td:nth-child(odd) {
  background-color: #ffecb3;
}

この方法では、偶数・奇数の列ごとに異なる色を適用できます。

hover を組み合わせて視認性を向上させる

行ごとに背景色を変更するだけでなく、hover を追加することで、マウスオーバー時に視認性を向上させることができます。

tr:hover {
  background-color: #ffeb3b;
}

これにより、ユーザーがマウスを置いた際に行が強調表示され、より分かりやすくなります。

まとめ

方法	適用範囲	使い方
tr:nth-child(even/odd)	行ごと	偶数・奇数行の背景色を変更
tbody tr:nth-of-type(even)	tbody のみ適用	thead や tfoot への影響を避ける
td:nth-child(even/odd)	列ごと	偶数・奇数列の背景色を変更
tr:hover	ホバー時	マウスオーバー時に背景色を変更

このように、nth-child() や nth-of-type() を活用することで、簡単に交互の背景色を適用できます。テーブルのデザインを改善し、視認性を向上させたい場合にぜひ活用してください。