HTML テーブルのセル結合

1. HTML テーブルのセル結合

HTMLのテーブルでは、特定のセルを複数の列（カラム）や行に広げて表示させたい場合があります。これを実現するのが colspan 属性と rowspan 属性です。

2. colspan 属性 (Column Span)

1つのセルを2つ以上のカラムに跨がせるには、colspan 属性を使用します。

2.1 colspan の実装例

<table>
  <tr>
    <th>氏名</th>
    <th colspan="2">連絡先</th>
  </tr>
  <tr>
    <td>田中 太郎</td>
    <td>[email protected]</td>
    <td>090-1234-5678</td>
  </tr>
</table>

この例では、「連絡先」というヘッダーセルに対して colspan="2" を指定することで、その下の「メールアドレス」と「電話番号」の2つのデータカラムを1つの見出しでカバーしています。

3. rowspan 属性 (Row Span)

1つのセルを2つ以上の行に跨がせるには、rowspan 属性を使用します。

3.1 rowspan の実装例

<table>
  <tr>
    <th>氏名:</th>
    <td>田中 太郎</td>
  </tr>
  <tr>
    <th rowspan="2">電話番号:</th>
    <td>090-1234-5678</td>
  </tr>
  <tr>
    <td>03-9876-5432</td>
  </tr>
</table>

この例では、「電話番号」のヘッダーセルに対して rowspan="2" を指定しています。これにより、1つの見出しが縦方向に2行分のスペースを占有し、複数の電話番号を1つの項目として関連付けています。

4. セル結合時の注意点

セルを結合する際、テーブル全体の構造（行ごとのセルの合計数）が崩れないように計算することが重要です。

• colspan="2" を指定した場合、その行の他のセルを1つ減らす必要があります。
• rowspan="2" を指定した場合、次の行（<tr>）のセルの数を1つ減らす必要があります。

計算を誤ると、レンダリング時にテーブルの枠線がズレたり、レイアウトが崩れたりする原因となります。

5. まとめ

HTMLテーブルにおけるセル結合のプロパティは、データの関連性を視覚的に伝えるための強力なツールです。

実務では、単に見た目を整えるだけでなく、スクリーンリーダーなどの補助技術が正しくテーブル構造を解釈できるように、セマンティックで正確な結合設定を心がけましょう。