テーブル内にテーブルを表示する方法
テーブル内にテーブルを表示する方法を紹介します。このサンプルでは、HTMLのtable要素で作成した外側のテーブルのセル内へ、さらに別のtable要素を配置して入れ子構造のテーブルを作成します。ひとつの項目に対して、より詳しい情報を表形式でまとめたい場合に利用できます。
外側のテーブルでは項目名と内容を表示し、その中のセルへ内側のテーブルを配置して詳細情報を分けて表示します。商品情報の中へ仕様一覧を表示したり、注文情報の中へ明細を表示したりするなど、大きな情報のまとまりと、その詳細なデータをひとつのテーブル内で整理したい場面に適しています。
外側と内側のテーブルはHTMLから見出しやセルの内容を変更でき、CSSでは横幅、余白、背景色、文字色、枠線、角丸などを調整できます。内側のテーブルは外側のセル内に収まるように横幅を設定しているため、テーブル同士の関係を視覚的に分かりやすく表示できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
外側のテーブルのセル内に、詳細情報をまとめたテーブルを表示しています。
| 商品名 | サンプル商品 | ||||||
|---|---|---|---|---|---|---|---|
| 価格 | 3,000円 | ||||||
| 商品仕様 |
|
「商品仕様」のセル内に、サイズ・重量・カラーをまとめた別のテーブルを表示しています。
コードをコピーして使おう！
<!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="nested-table_wrap">
<!-- タイトル -->
<div class="nested-table_title">
商品情報
</div>
<!-- 説明文 -->
<p class="nested-table_text">
外側のテーブルのセル内に、詳細情報をまとめたテーブルを表示しています。
</p>
<!-- 横スクロール用のエリア -->
<div class="nested-table_scroll">
<!-- 外側のテーブル -->
<table class="nested-table_outer">
<tbody>
<!-- 商品名 -->
<tr>
<th>商品名</th>
<td>サンプル商品</td>
</tr>
<!-- 価格 -->
<tr>
<th>価格</th>
<td>3,000円</td>
</tr>
<!-- 商品仕様 -->
<tr>
<th>商品仕様</th>
<td>
<!-- 商品仕様の詳細を表示する内側のテーブル -->
<table class="nested-table_inner">
<tbody>
<!-- サイズ -->
<tr>
<th>サイズ</th>
<td>幅300mm × 高さ200mm</td>
</tr>
<!-- 重量 -->
<tr>
<th>重量</th>
<td>約500g</td>
</tr>
<!-- カラー -->
<tr>
<th>カラー</th>
<td>ホワイト</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLでは外側のテーブルを作成し、「商品仕様」のセル内へサイズ・重量・カラーを表示する内側のテーブルを配置します。CSSでは外側と内側それぞれの横幅、余白、背景色、文字色、枠線などを設定し、画面幅が狭い場合は横スクロールできるようにしています。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはテーブル全体を構成するファイルです。外側のテーブルには「商品名」「価格」「商品仕様」を表示し、「商品仕様」のセル内へ別のtable要素を配置しています。内側のテーブルには「サイズ」「重量」「カラー」を表示しているため、それぞれの見出しや内容を用途に合わせて変更できます。
style.cssは外側と内側のテーブルのデザインを設定するファイルです。テーブル全体の最大横幅、余白、背景色、枠線、角丸、各セルの余白、見出しセルの背景色などを変更できます。また、.nested-table_scrollへoverflow-x:auto;を指定し、外側のテーブルが画面幅へ収まらない場合に横スクロールできるようにしています。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを同じ階層で配置します。2つのファイルを保存したあと、sample/index.htmlをブラウザで開いてください。商品情報を表示する外側のテーブルが表示され、「商品仕様」のセル内にはサイズ・重量・カラーをまとめた内側のテーブルが表示されます。
内側のテーブルは外側のtd要素の中へ配置されています。外側の情報に関連する詳細データを表形式で追加したい場合は、同じ構造で内側のテーブルの行を追加できます。
カスタマイズできる内容
index.htmlでは「商品情報」のタイトル、説明文、「商品名」「価格」「商品仕様」などの外側テーブルの内容を変更できます。内側のテーブルについても「サイズ」「重量」「カラー」の見出しと、それぞれの値を変更できます。必要に応じてtr要素を追加・削除すると、表示する行数を調整できます。
style.cssではテーブル全体の最大横幅、余白、背景色、枠線、角丸を変更できます。外側と内側の各セルについても余白、枠線色、見出しセルの背景色や文字色を変更できます。また、外側テーブルの最小横幅や見出し列の横幅も調整できます。
数値調整
style.css
max-width:800px;
テーブル全体を囲むエリアの最大横幅です。値を大きくすると全体が横に広がり、小さくするとコンパクトになります。
margin:40px auto;
テーブル全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
テーブル全体の内側余白です。値を大きくするとテーブルと外枠との間隔が広がります。
border-radius:18px;
テーブル全体を囲むエリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
「商品情報」のタイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
margin:0 0 24px;
説明文の下側余白です。24pxを大きくするとテーブルとの間隔が広がり、小さくすると狭くなります。
min-width:560px;
外側テーブルの最小横幅です。値を大きくするとテーブルが広くなり、画面幅が狭い場合は横スクロールが発生しやすくなります。
padding:16px;
外側テーブルのセル内側の余白です。値を大きくすると文字と枠線との間隔が広がり、セルも大きくなります。
border:1px solid #d1d5db;
外側テーブルのセルを囲む枠線です。1pxを大きくすると枠線が太くなります。
width:180px;
外側テーブルの見出し列の横幅です。値を大きくすると「商品名」「価格」「商品仕様」の列が広がり、小さくすると狭くなります。
padding:12px;
内側テーブルのセル内側の余白です。値を大きくすると文字と枠線との間隔が広がります。
border:1px solid #bfdbfe;
内側テーブルのセルを囲む枠線です。1pxを大きくすると枠線が太くなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:800pxによって、テーブル全体を囲むエリアが画面幅に合わせて縮小されます。外側テーブルにはmin-width:560pxを指定し、.nested-table_scrollへoverflow-x:auto;を設定しているため、画面幅へ収まらない場合はテーブル部分だけを横スクロールできます。
また、画面幅640px以下ではテーブル全体の余白をpadding:24px 18px;へ変更しているため、スマートフォン・タブレット・PCで利用できます。
コメント