HTMLのtableでセルを結合する方法

tableのセルを横につなげるにはcolspan、縦につなげるにはrowspan属性を<td>や<th>に付け、結合するセル数を指定します。

セル結合はcolspan・rowspanで作る

セル結合の方法は2つだけです。横方向の結合はcolspan="つなげる列数"、縦方向の結合はrowspan="つなげる行数"を、結合の起点になるセルに書きます。

結合した分だけ、重なる位置にあった<td>は削除します。HTMLにはExcelのような結合ボタンはなく、属性で1つのセルが占める範囲を広げる仕組みです。

セル結合の書き方 - 横結合・縦結合のコピペ例

横結合と縦結合の、そのまま使える最小例です。罫線がないと結合が見えないため、サンプルには最小限のCSSを含めています。

colspanで横に結合する

1行目の見出しセルを2列分に広げる例です。

<style>
table { border-collapse: collapse; }
th, td { border: 1px solid #888; padding: 4px 12px; }
</style>
<table>
  <tr>
    <th colspan="2">上期の売上</th>
  </tr>
  <tr>
    <td>4月:100万円</td>
    <td>5月:120万円</td>
  </tr>
</table>

colspan="2"を付けたセルが2列分の幅に広がるため、1行目に書くセルは1つだけです。2行目は通常どおり2つのセルを書きます。

rowspanで縦に結合する

左端の見出しセルを2行分に広げる例です。

<style>
table { border-collapse: collapse; }
th, td { border: 1px solid #888; padding: 4px 12px; }
</style>
<table>
  <tr>
    <th rowspan="2">午前</th>
    <td>9:00 朝礼</td>
  </tr>
  <tr>
    <td>10:00 会議</td>
  </tr>
</table>

rowspan="2"を付けたセルが2行目まで縦に伸びます。そのため2行目では左端のセルを書かず、残りのセルだけを書きます。

セル結合 - ずれる・崩れる時の対処

表がずれる原因は、ほとんどの場合、各行のセル数の合計が合っていないことです。まず次の3点を確認してください。

• 結合で不要になったtdを削除したか
• colspan・rowspanの数値が実際の列数・行数と合っているか
• rowspanがthead・tbodyの境界をまたいでいないか

各行の「セル数+結合で広がった分」が全行で同じ列数になれば、表は崩れません。なおrowspanによる結合は、仕様上thead・tbody・tfootといった行グループを越えて広げられません。