【HTML】テーブルのセルを結合する方法

HTMLのテーブルを使って、データを整理し見やすく表示する方法はたくさんあります。その中で特に重要なテクニックの一つが、セルの結合です。今回は、colspan属性とrowspan属性を使って、テーブルのセルをどのように結合するかを詳しく解説します。

colspanを使った列の結合

colspan属性は、一つのセルを複数の列にまたがるように結合するために使用します。これによって、一つのセルが占める列の数を指定できます。

<td>または<th>タグの中でcolspan属性を指定します。値には結合したい列の数を指定します。

<table border="1">
  <tr>
    <td colspan="2">結合されたセル</td>
    <td>セル2</td>
  </tr>
  <tr>
    <td>セル3</td>
    <td>セル4</td>
    <td>セル5</td>
  </tr>
</table>

上記のコード例では、1行目の最初のセルが2列分に結合されています。colspan=”2″と指定することで、そのセルは2つの列を占めるようになります。

rowspanを使った行の結合

rowspan属性は、一つのセルを複数の行にまたがるように結合するために使用します。これによって、一つのセルが占める行の数を指定できます。

<td>または<th>タグの中でrowspan属性を指定します。値には結合したい行の数を指定します。

<table border="1">
  <tr>
    <td rowspan="2">結合されたセル</td>
    <td>セル2</td>
    <td>セル3</td>
  </tr>
  <tr>
    <td>セル4</td>
    <td>セル5</td>
  </tr>
</table>

上記のコード例では、1列目の最初のセルが2行分に結合されています。rowspan=”2″と指定することで、そのセルは2つの行を占めるようになります。

colspanとrowspanの組み合わせ

colspanとrowspanを組み合わせることで、セルを行と列の両方向にまたがるように結合することが可能です。これにより、より複雑で効果的なテーブルレイアウトを実現できます。

<table border="1">
  <tr>
    <td rowspan="2" colspan="2">行と列に結合されたセル</td>
    <td>セル2</td>
  </tr>
  <tr>
    <td>セル3</td>
  </tr>
  <tr>
    <td>セル4</td>
    <td>セル5</td>
    <td>セル6</td>
  </tr>
</table>

上記のコード例では、1行目の最初のセルが2行にまたがり、かつ2列にまたがるように結合されています。これにより、非常に柔軟なテーブルのレイアウトが可能になります。

よくある質問（FAQ）

まとめ

colspanとrowspanを使えば、HTMLのテーブルセルを簡単かつ効果的に結合することができます。これにより、情報を明確で読みやすい形で表示することが可能になります。特に大量のデータを整理して表示する際に、これらの属性の使い方をマスターしておくと大変便利です。