【CSS】テーブル(表)の行・列の背景色を交互に変える

この記事では、CSSでテーブル(表)の行・列の背景色を交互に変える方法とサンプルコードについてまとめました。

テーブル(表)の行・列の背景色

CSSでは、「擬似クラスnth-child」を使うことで、テーブル(表)の行・列の背景色を交互に変えることができます。
背景色の偶数行・奇数行の色を交互に変えると視認性が向上するので便利です。

■実行例

サンプルページ

行で交互に変更

行で背景色を交互に変えたい場合は、「tr:nth-child(2n)」「tr:nth-child(2n+1)」で偶数列・奇数列の背景色を設定できます。

列で交互に変更

列で背景色を交互に変えたい場合は、HTML側のTableタグ内に「colタグ」を列の数だけ記述します。
そして、「col:nth-child(2n)」「col:nth-child(2n+1)」で偶数列・奇数列の背景色を設定できます。

ソースコード（行バージョン）

サンプルプログラムのソースコードです。
行の色を交互に入れ替えます。

CSS

main.css

.table1, .table2{
    border-collapse: collapse;
}
.table1 td, .table1 th, .table2 td, .table2 th{
  border:1px solid #111;
}


/* 偶数行の背景色変更 */
.table1 tr:nth-child(2n) {
    background: #ccc;
}

/* 奇数行の背景色変更 */
.table1 tr:nth-child(2n+1) {
    background: #fff;
}

/* 偶数列の背景色変更 */
.table2 col:nth-child(2n) {
    background: #ccc;
}

/* 奇数列の背景色変更 */
.table2 col:nth-child(2n+1) {
    background: #fff;
}

HTML

index.html

<!DOCtype html>
<html>
<head>
  <meta charset="utf-8">
  <title>テスト</title>
  <link rel='stylesheet' href='main.css' type='text/css' />
</head>
<body>

<table class="table1">
    <tr>
    <th>ヘッダ1</th>
    <th>ヘッダ2</th>
    <th>ヘッダ3</th>
    </tr>
    <tr>
    <td>アイテム1</td>
    <td>アイテム2</td>
    <td>アイテム3</td>
    </tr>
    <tr>
    <td>アイテム1</td>
    <td>アイテム2</td>
    <td>アイテム3</td>
    </tr>
</table>

<br>

<table class="table2">
  <col><col><col>
    <tr>
    <th>ヘッダ1</th>
    <th>ヘッダ2</th>
    <th>ヘッダ3</th>
    </tr>
    <tr>
    <td>アイテム1</td>
    <td>アイテム2</td>
    <td>アイテム3</td>
    </tr>
    <tr>
    <td>アイテム1</td>
    <td>アイテム2</td>
    <td>アイテム3</td>
    </tr>
</table>


</body>
</html>
– 関連記事
1 【HTML/CSS入門】Web制作のサンプル集
2 【Javascript入門】サンプル集

コメント