HTML でテーブルの中にテーブルを作成する方法
HTML では、テーブルの中に別のテーブルをネストして作成することができます。これは、複雑なデータ構造を表示したり、表形式のデータの中にさらに詳細な情報を表示したりする場合に役立ちます。
ネストされたテーブルの作成方法
ネストされたテーブルを作成するには、まず外側のテーブルを作成します。このテーブルの中に、内側のテーブルを配置します。
ステップ 1: 外側のテーブルを作成する
通常のテーブルと同様に、<table> タグを使用して外側のテーブルを作成します。例えば：
<table border="1">
<caption>外側のテーブル</caption>
<thead>
<tr>
<th>見出し 1</th>
<th>見出し 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ 1</td>
<td>データ 2</td>
</tr>
</tbody>
</table>
ステップ 2: 内側のテーブルを配置する
内側のテーブルは、外側のテーブルのセル (<td> 要素) の中に配置します。例えば、上記の例で "データ 2" のセルの中に内側のテーブルを配置するには、次のようにします。
<table border="1">
<caption>外側のテーブル</caption>
<thead>
<tr>
<th>見出し 1</th>
<th>見出し 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ 1</td>
<td>
<table border="1">
<caption>内側のテーブル</caption>
<tr>
<td>ネストされたデータ 1</td>
<td>ネストされたデータ 2</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
例
以下は、ネストされたテーブルの例です。
| 従業員ID | 氏名 | 連絡先 | ||||
|---|---|---|---|---|---|---|
| 12345 | 田中太郎 |
|
よくある質問
Q1: ネストされたテーブルの段数に制限はありますか？
A1: いいえ、HTML にはネストできるテーブルの段数に制限はありません。ただし、ネストが深くなりすぎると、コードが複雑になり、表示速度が遅くなる可能性があるので注意が必要です。
Q2: ネストされたテーブルのスタイルを個別に設定できますか？
A2: はい、CSS を使用することで、ネストされたテーブルのスタイルを個別に設定できます。例えば、内側のテーブルに異なる背景色や境界線を設定することができます。
Q3: ネストされたテーブルは、レスポンシブデザインに対応させることができますか？
A3: はい、CSS メディアクエリを使用することで、ネストされたテーブルをレスポンシブデザインに対応させることができます。例えば、画面サイズが小さい場合は、テーブルを縦に stacking したり、スクロールできるようにしたりすることができます。