テーブルの行や列を結合する方法
テーブルの行や列を結合する方法を紹介します。本記事では、HTMLとCSSを使って、複数の行や列をまとめて表示できるテーブルを作成します。通常のテーブルでは各セルが同じ幅と区切りで並びますが、行結合や列結合を使うことで、分類や共通項目を分かりやすく整理できます。
このサンプルコードでは、HTMLの rowspan と colspan を使います。rowspan は縦方向の行結合、colspan は横方向の列結合に使用します。JavaScriptは使わず、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="merged-table-cells_wrap">
<!-- セル結合を使ったテーブル -->
<table class="merged-table-cells_table">
<!-- 見出し行 -->
<thead>
<tr>
<th>分類</th>
<th>項目名</th>
<th>内容</th>
<th>備考</th>
</tr>
</thead>
<!-- データ行 -->
<tbody>
<tr>
<!-- rowspan="2" で、このセルを下方向に2行分結合 -->
<td rowspan="2">基本情報</td>
<td>項目A</td>
<td>サンプル内容A</td>
<td>備考A</td>
</tr>
<tr>
<!-- 上の分類セルと結合しているため、この行では分類セルを書かない -->
<td>項目B</td>
<td>サンプル内容B</td>
<td>備考B</td>
</tr>
<tr>
<!-- rowspan="2" で、このセルを下方向に2行分結合 -->
<td rowspan="2">詳細情報</td>
<td>項目C</td>
<td>サンプル内容C</td>
<td>備考C</td>
</tr>
<tr>
<!-- 上の分類セルと結合しているため、この行では分類セルを書かない -->
<td>項目D</td>
<!-- colspan="2" で、このセルを右方向に2列分結合 -->
<td colspan="2">サンプル内容Dと備考Dをまとめて表示</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>ファイル構成と設置方法
このサンプルでは、HTMLとCSSを別ファイルで管理します。HTMLにテーブル構造とセル結合の指定を記述し、CSSでテーブルの余白、罫線、見出し行のデザインを設定します。JavaScriptは使用しません。
sample/
├── index.html
└── style.css
index.html と style.css を同じフォルダへ配置し、ブラウザで index.html を開いてください。行を結合したい場合は rowspan、列を結合したい場合は colspan の数値を変更します。
コメント