テーブルの行を交互に色分けする方法
テーブルの行を交互に色分けする方法を紹介します。このサンプルでは、HTMLとCSSを使用して、テーブルのデータ行を白と薄い灰色で交互に表示します。隣り合う行の背景色が変わるため、横方向に並んだデータを行ごとに追いやすくなり、複数の項目が並ぶテーブルでも内容を確認しやすくできます。
サンプルでは、CSSの:nth-child()を使用してtbody内の奇数行と偶数行へ異なる背景色を設定します。HTMLで各行に色分け用のクラスを追加する必要はなく、行の順番に応じてCSSだけで背景色を切り替えられます。また、ヘッダー行にはデータ行とは異なる背景色を設定することで、見出しとデータ部分を区別しやすいテーブルにできます。
交互に色分けするテーブルは、ECサイトの商品一覧や料金表、会員サイトの登録情報一覧、売上一覧、在庫一覧、管理画面のデータ表など、複数行の情報を確認する場面に利用できます。HTMLでは見出しや各セルの内容、データ行を変更でき、CSSでは奇数行・偶数行やヘッダー行の背景色、セルの余白や枠線などを調整できます。行数が増えた場合も自動的に交互の背景色が適用されるため、データを追加しながら使用するテーブルにも活用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
| 項目名 | 内容 | 備考 |
|---|---|---|
| 項目A | サンプル内容A | 備考A |
| 項目B | サンプル内容B | 備考B |
| 項目C | サンプル内容C | 備考C |
| 項目D | サンプル内容D | 備考D |
データ行が白と薄い灰色で交互に表示されます。項目Aから項目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などすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLでは「項目名」「内容」「備考」の3列を持つテーブルを作成し、項目Aから項目Dまでの4行のデータを表示します。CSSでは見出し行の背景色と文字色を設定し、tbody内の奇数行と偶数行へ異なる背景色を指定することで、データ行を白と薄い灰色で交互に色分けします。JavaScriptは使用しません。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはテーブル全体を構成するファイルです。thead内に「項目名」「内容」「備考」の見出しを配置し、tbody内に項目Aから項目Dまでのデータを記述しています。見出しや各セルの内容を変更でき、tbody内のtr要素を追加・削除することでデータ行の数も変更できます。
style.cssはテーブルのデザインと行の色分けを設定するファイルです。見出しセルの背景色と文字色、セルの余白や枠線を設定しています。また、tbody tr:nth-child(odd)で奇数行、tbody tr:nth-child(even)で偶数行を指定し、それぞれ異なる背景色を設定しています。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置し、2つのファイルを同じ階層へ保存します。index.htmlでは同じ階層にあるstyle.cssを読み込む構成になっているため、配置後にsample/index.htmlをブラウザで開いてください。項目A・項目Cの奇数行は白、項目B・項目Dの偶数行は薄い灰色で表示されます。tbody内へ新しいtr要素を追加した場合も、行の順番に応じて背景色が交互に適用されます。
カスタマイズできる内容
index.htmlでは、「項目名」「内容」「備考」の見出しや各セルの文章を変更できます。tbody内のtr要素を追加するとデータ行を増やすことができ、削除すると行数を減らせます。
style.cssでは、テーブル全体の最大横幅や余白、セルの内側余白や枠線を変更できます。見出し行はbackground:#4b5563;とcolor:#ffffff;、奇数行はbackground:#ffffff;、偶数行はbackground:#f3f4f6;を変更することで、それぞれの背景色や文字色を調整できます。
数値調整
style.css
max-width:800px;
テーブルを囲むエリアの最大横幅です。値を大きくするとテーブルをより広く表示でき、小さくするとコンパクトになります。
margin:40px auto;
テーブルを囲むエリアの上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。autoによって左右中央へ配置されます。
padding:24px;
テーブルを囲むエリアの内側余白です。値を大きくするとテーブルと外側との間隔が広がり、小さくすると狭くなります。
padding:12px;
見出しセルとデータセルの内側余白です。値を大きくすると文字と枠線の間隔が広がり、小さくすると詰まった表示になります。
border:1px solid #d1d5db;
見出しセルとデータセルの枠線です。1pxを大きくすると枠線が太くなり、小さくすると細くなります。
レスポンシブ対応
このサンプルでは、style.cssのテーブル本体にwidth:100%;を設定しているため、テーブルを囲むエリアの横幅に合わせて表示されます。また、.table-alternate-row-colors_wrapにはmax-width:800px;とoverflow-x:auto;を設定しているため、テーブルの内容が表示領域を超える場合は横方向へスクロールして確認できます。スマートフォン・タブレット・PCなど、異なる画面幅でもテーブルの内容を確認できる構成です。
コメント