テーブルの行を交互に色分けする方法
テーブルの行を交互に色分けする方法を紹介します。本記事では、HTMLとCSSを使用して、ヘッダー行を濃い灰色にし、データ行を白・薄い灰色・白・薄い灰色のように交互に表示するテーブルを作成します。行数が多い表でも視線を追いやすくなり、一覧データを見やすく整理できます。
このサンプルコードでは、CSSの nth-child を使って、奇数行と偶数行に別々の背景色を設定します。HTML側で行ごとにクラスを付ける必要がなく、CSSだけで自動的に色分けできるため、既存のテーブルにも導入しやすい構成です。
交互に色分けしたテーブルは、商品一覧、料金表、会員一覧、売上一覧、管理画面のデータ表などに活用できます。単調な表よりも見やすく、行の読み間違いを防ぎやすくなるため、実用的なテーブルデザインを作りたい場合に便利です。
コードについて
本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
| 項目名 | 内容 | 備考 |
|---|---|---|
| 項目A | サンプル内容A | 備考A |
| 項目B | サンプル内容B | 備考B |
| 項目C | サンプル内容C | 備考C |
| 項目D | サンプル内容D | 備考D |
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コードを指定 -->
<meta charset="UTF-8">
<!-- スマホ表示に対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>テーブルの行を交互に色分けする方法</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- テーブル全体を囲むエリア -->
<div class="table-alternate-row-colors_wrap">
<!-- テーブル本体 -->
<table class="table-alternate-row-colors_table">
<!-- 見出し行 -->
<thead>
<tr>
<th>項目名</th>
<th>内容</th>
<th>備考</th>
</tr>
</thead>
<!-- データ行 -->
<tbody>
<tr>
<td>項目A</td>
<td>サンプル内容A</td>
<td>備考A</td>
</tr>
<tr>
<td>項目B</td>
<td>サンプル内容B</td>
<td>備考B</td>
</tr>
<tr>
<td>項目C</td>
<td>サンプル内容C</td>
<td>備考C</td>
</tr>
<tr>
<td>項目D</td>
<td>サンプル内容D</td>
<td>備考D</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>ファイル構成と設置方法
このサンプルでは、HTMLとCSSを別ファイルで管理します。HTMLにテーブル構造を記述し、CSSでヘッダーの色や行ごとの背景色を設定します。JavaScriptは使用しないため、シンプルな構成で導入できます。
sample/
├── index.html
└── style.css
index.html と style.css を同じフォルダへ配置し、ブラウザで index.html を開いてください。テーブルの行数を増やしたい場合は、HTML内の <tbody> にある <tr> を追加します。背景色を変更したい場合は、style.css 内の nth-child(odd) と nth-child(even) の色を編集してください。ヘッダーの色もCSS内の th の背景色を変更するだけで自由にカスタマイズできます。
コメント