8.1 横方向のセル結合
テーブル内のセルを結合することで、データをより柔軟に、そして情報豊かに表示することができます。 これは、ヘッダーや集計データを作成したいときに特に便利です。 HTMLでは、セルの結合にはcolspanとrowspan属性が使われます。
colspan属性
colspan属性はセルを横方向に結合します。これは1つのセルが何列分をカバーすべきかを示します。 たとえば、colspan="2"を持つセルがある場合、そのセルは行内の通常の2つのセル分のスペースを取ります。
使用例:
3列のテーブルがあり、行の最初のセルが2列を占めるようにしたいと想像してみてください。 あなたはcolspan="2"を使ってこれら2つのセルを結合します。これは、複数の列にまたがるヘッダーを作成したり、 複数のカテゴリに関連するデータを結合するのに便利です。
<table border="1">
<tr>
<th>名前</th>
<th>年齢</th>
<th>都市</th>
</tr>
<tr>
<td>アリサ</td>
<td>25</td>
<td>ロンドン</td>
</tr>
<tr>
<td colspan="2">合計</td>
<td>2 件</td>
</tr>
</table>
8.2 縦方向のセル結合
rowspan属性はセルを縦方向に結合します。これは1つのセルが何行分をカバーすべきかを示します。 たとえば、rowspan="2"を持つセルがある場合、そのセルは列内の通常の2つのセル分のスペースを取ります。
使用例:
3行のテーブルがあり、列の最初のセルが2行を占めるようにしたいと想像してみてください。 あなたはrowspan="2"を使ってこれら2つのセルを結合します。これは、1つのデータカテゴリが 複数の行に関連するようなテーブルを作成するのに便利です。例えば、結合したヘッダーや集計データなど。
<table border="1">
<tr>
<th>名前</th>
<th>プロジェクト</th>
<th>都市</th>
</tr>
<tr>
<td rowspan="2">アリサ</td>
<td>プロジェクトA</td>
<td>ロンドン</td>
</tr>
<tr>
<td>プロジェクトB</td>
<td>バトゥミ</td>
</tr>
</table>
8.3 動作の説明
colspanとrowspanの動作
横方向の結合 (colspan): 複数の教室で行われる1つのコースがあるスケジュールテーブルを作成すると想像してください。 あなたはcolspanを使って、1つのコースが2つの時間をカバーしていることを示すことができます。
縦方向の結合 (rowspan): 複数のステージに参加する1人の参加者がいる競技結果テーブルを作成すると想像してください。 あなたはrowspanを使って、1人の参加者が2つのステージをカバーしていることを示すことができます。
実践的な例
複数の列をカバーするヘッダーを作成する: 異なるデータカテゴリを持つテーブルがあり、 複数の列をカバーするヘッダーを作成したい場合は、colspanを使います。 例えば、「社員情報」のヘッダーは「名前」「年齢」「部署」の列をカバーできます。
データを縦に結合する: 縦に結合する必要があるデータがある場合、例えば、 同じ人やオブジェクトの複数の記録の場合は、rowspanを使用します。 例えば、プロジェクトの情報で、一つのプロジェクトが複数の行を占める場合（例えば、プロジェクトのフェーズ）、 rowspanで行を結合します。
8.4 例
従業員と彼らのプロジェクト参加状況を表示するテーブルを考えてみてください：
- 従業員: イワン、マリア、ピョートル。
- プロジェクト: プロジェクトA、プロジェクトB。
イワンとマリアが同時に2つのプロジェクトに取り組んでいることを示すためにセルを結合したいとします：
<table border="1">
<tr>
<th>名前</th>
<th>プロジェクトA</th>
<th>プロジェクトB</th>
<th>都市</th>
</tr>
<tr>
<td>イワン</td>
<td colspan="2">はい</td>
<td>ロンドン</td>
</tr>
<tr>
<td>マリア</td>
<td colspan="2">はい</td>
<td>ロンドン</td>
</tr>
<tr>
<td>ピョートル</td>
<td>はい</td>
<th>いいえ</th>
<td>ローマ</td>
</tr>
</table>
または、イワンが2つのプロジェクトに取り組んでいることを示したい場合：
<table border="1">
<tr>
<th>名前</th>
<th>プロジェクト</th>
<th>都市</th>
</tr>
<tr>
<td rowspan="2">イワン</td>
<td>プロジェクトA</td>
<td>ロンドン</td>
</tr>
<tr>
<!-- 空 -->
<td>プロジェクトB</td>
<td>ロンドン</td>
</tr>
<tr>
<td>セルゲイ</td>
<td>プロジェクトC</td>
<td>ローマ</td>
</tr>
</table>
隣のセルの拡張で「飲み込まれた」セルの場所にコメントを配置しました。これにより、他のセルがどこに表示されるかがより明確に理解できます。
GO TO FULL VERSION