テーブルの行や列を結合する方法
テーブルの行や列を結合する方法を紹介します。このサンプルでは、HTMLのrowspan属性とcolspan属性を使用して、複数のセルを縦方向・横方向へまとめたテーブルを作成します。通常のセルを並べるだけでは表現しにくい分類や共通項目も、セルを結合することでまとまりのある表として表示できます。
サンプルでは「分類」「項目名」「内容」「備考」の4列を用意し、「基本情報」と「詳細情報」のセルをrowspan="2"で縦方向へ2行分結合しています。また、「項目D」ではcolspan="2"を指定し、「内容」と「備考」にあたる2列分を1つのセルとして表示します。JavaScriptを使用せず、HTMLとCSSだけで行結合と列結合の両方を確認できます。
セルの結合は、商品情報や料金表、比較表、スケジュール表、管理画面のデータ一覧など、複数の項目をグループごとに整理したい場合に利用できます。HTMLでは見出しや各セルの文章、rowspanとcolspanによる結合数を変更でき、CSSではテーブル全体の横幅、余白、セルの枠線、見出し行の背景色や文字色などを調整できます。テーブルを囲むエリアには横スクロールも設定しているため、内容が表示領域を超えた場合は横方向へスクロールして確認できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
| 分類 | 項目名 | 内容 | 備考 |
|---|---|---|---|
| 基本情報 | 項目A | サンプル内容A | 備考A |
| 項目B | サンプル内容B | 備考B | |
| 詳細情報 | 項目C | サンプル内容C | 備考C |
| 項目D | サンプル内容Dと備考Dをまとめて表示 | ||
「基本情報」と「詳細情報」は縦方向に2行分が結合され、「項目D」の内容は横方向に2列分が結合されています。行方向と列方向、それぞれのセル結合を確認できます。
コードをコピーして使おう！
<!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などすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではrowspan属性とcolspan属性を使用して、テーブルの行方向・列方向のセルを結合します。CSSではテーブル全体の横幅や余白、セルの枠線、見出し行の背景色などを設定します。JavaScriptは使用せず、HTMLとCSSだけでセルを結合したテーブルを作成できます。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはセル結合を含むテーブルを構成するファイルです。rowspan="2"を指定したセルは下方向へ2行分結合され、colspan="2"を指定したセルは右方向へ2列分結合されます。見出しや「基本情報」「詳細情報」、各項目の文章もこのファイルから変更できます。
style.cssはテーブルのデザインを設定するファイルです。テーブル全体の最大横幅や余白、セル内の余白、枠線、見出し行の背景色や文字色などを変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置し、2つのファイルを同じ階層へ保存します。index.htmlからstyle.cssを読み込んだ状態でsample/index.htmlをブラウザで開いてください。縦方向へセルを結合する場合は対象のセルへrowspanを指定し、横方向へ結合する場合はcolspanを指定します。このサンプルではrowspan="2"で2行分、colspan="2"で2列分を結合しています。
カスタマイズできる内容
index.htmlでは見出しの「分類」「項目名」「内容」「備考」や、各データセルの文章を変更できます。rowspanの数値を変更すると縦方向に結合する行数、colspanの数値を変更すると横方向に結合する列数を変更できます。結合数を変更する場合は、同じ位置に重複するセルを書かないようにHTMLのセル構成も合わせて調整します。style.cssではテーブル全体の横幅、余白、セルの枠線、見出し行の背景色や文字色を変更できます。
数値調整
index.html
rowspan="2"
セルを縦方向へ結合する行数です。2を指定すると2行分のセルを1つにまとめます。数値を大きくすると、より多くの行を縦方向へ結合できます。
colspan="2"
セルを横方向へ結合する列数です。2を指定すると2列分のセルを1つにまとめます。数値を大きくすると、より多くの列を横方向へ結合できます。
style.css
max-width:800px;
テーブル全体を囲むエリアの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
テーブル全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。autoによって左右中央へ配置されます。
padding:24px;
テーブル全体を囲むエリアの内側余白です。値を大きくするとテーブルと外側との間隔が広がり、小さくすると狭くなります。
padding:12px;
見出しセルとデータセルの内側余白です。値を大きくすると文字と枠線の間隔が広がり、小さくすると詰まった表示になります。
border:1px solid #d1d5db;
見出しセルとデータセルの枠線です。1pxを大きくすると枠線が太くなり、小さくすると細くなります。
レスポンシブ対応
このサンプルでは、style.cssのテーブルにwidth:100%;を設定しているため、親要素の横幅に合わせてテーブルが表示されます。また、テーブル全体を囲む要素にはmax-width:800px;とoverflow-x:auto;を設定しているため、セルの内容によって表示領域を超えた場合は横方向へスクロールして確認できます。
コメント