Webサイトの制作において、情報を整理して提示するために「表（テーブル）」は欠かせない要素の一つです。
数値データの比較やスケジュールの管理など、構造化されたデータを扱う際にHTMLの<table>タグは非常に強力なツールとなります。
しかし、単純な格子状の表だけでは、複雑な情報を表現しきれないケースが多々あります。
そこで重要になるのが、複数のセルをつなぎ合わせて一つの大きなセルとして扱う「セルの結合」というテクニックです。
この記事では、HTMLの表でセルを結合するためのcolspan属性とrowspan属性の使い方について、具体的なコード例を交えながら詳しく紹介します。
初心者の方でも、この記事を読み終える頃には自由自在に表のレイアウトをコントロールできるようになるでしょう。
HTMLで表を作成するための基本構造
セルの結合について学ぶ前に、まずはHTMLにおける表作成の基本的な仕組みをおさらいしておきましょう。
HTMLの表は、主に4つのタグを組み合わせて構成されます。
表全体を囲む<table>タグ、行を定義する<tr>タグ、見出しセルを作成する<th>タグ、そして通常のデータセルを作成する<td>タグです。
基本的な構造は、<table>の中に複数の<tr>（行）があり、その各行の中に複数の<td>や<th>（セル）が並ぶという入れ子構造になっています。
この基本を正しく理解していないと、セルを結合した際にレイアウトが崩れる原因となるため注意が必要です。
まずは、結合を行わない標準的な3行3列の表のコードを見てみましょう。
<table border="1">
<tr>
<th>見出し1</th>
<th>見出し2</th>
<th>見出し3</th>
</tr>
<tr>
<td>データA1</td>
<td>データA2</td>
<td>データA3</td>
</tr>
<tr>
<td>データB1</td>
<td>データB2</td>
<td>データB3</td>
</tr>
</table>見出し1 | 見出し2 | 見出し3
--------------------------
データA1 | データA2 | データA3
--------------------------
データB1 | データB2 | データB3このように、すべての行でセルの数が一致しているのが、最もシンプルな表の形です。
セルの結合とは、この規則的な格子状の並びを意図的に崩し、特定のセルを隣のセルと合体させる操作のことを指します。
横方向にセルを結合するcolspan属性
まずは、横方向（列方向）にセルを結合する方法について解説します。
横方向の結合には、colspan属性を使用します。
「colspan」は「column span」の略であり、直訳すると「列の範囲」という意味になります。
colspan属性の書き方とルール
colspan属性は、<th>または<td>タグの中に記述します。
記述方法は、<td colspan="結合するセルの数">という形式になります。
例えば、2つのセルを横に結合したい場合はcolspan="2"、3つのセルを結合したい場合はcolspan="3"と指定します。
ここで非常に重要なポイントは、「結合されたセル」の分だけ、その行にある他のセルを削除しなければならないという点です。
もしセルを削除し忘れると、結合されたセルが横に突き出してしまい、表の形が崩れてしまいます。
colspanの使用例：ヘッダーの共通化
具体的な活用シーンとして、複数の列をまとめる大きな見出しを作成する場合が挙げられます。
以下のサンプルコードでは、2列目と3列目を一つの「連絡先」という見出しでまとめています。
<table border="1">
<tr>
<th>名前</th>
<!-- 2列分を結合して1つのセルにする -->
<th colspan="2">連絡先</th>
</tr>
<tr>
<td>山田太郎</td>
<td>090-0000-0000</td>
<td>yamada@example.com</td>
</tr>
</table>名前 | 連絡先（2列分結合）
--------------------------------
山田太郎 | 090-0000-0000 | yamada@example.comこの例では、1行目の2番目の<th>にcolspan="2"を指定しています。
そのため、1行目にはセルが2つしか記述されていませんが、実際の表示では2行目の3つのセルと幅が正しく揃うようになります。
このように、情報のカテゴリをグループ化する際にcolspanは非常に便利です。
縦方向にセルを結合するrowspan属性
次に、縦方向（行方向）にセルを結合する方法について見ていきましょう。
縦方向の結合には、rowspan属性を使用します。
「rowspan」は「row span」の略で、「行の範囲」という意味を持ちます。
rowspan属性の書き方とルール
使い方はcolspanと同様で、<th>や<td>タグの中にrowspan="結合するセルの数">と記述します。
しかし、rowspanの場合は、「次の行以降のセル」を削除する必要があるという点に注意が必要です。
横の結合は同じ<tr>内での調整でしたが、縦の結合は複数の<tr>にまたがる調整が必要になります。
この仕組みを理解していないと、意図しない場所にセルが回り込んでしまう現象が発生します。
rowspanの使用例：共通項目のグループ化
例えば、複数のスケジュール項目が同じ時間帯である場合や、同じカテゴリの商品を並べる場合にrowspanが役立ちます。
以下の例では、左端の「午前」というセルを2行分結合しています。
<table border="1">
<tr>
<th>時間帯</th>
<th>内容</th>
</tr>
<tr>
<!-- 2行分を結合 -->
<td rowspan="2">午前</td>
<td>ミーティング</td>
</tr>
<tr>
<!-- ここに「午前」のセルは記述しない（上の行から結合されているため） -->
<td>資料作成</td>
</tr>
</table>時間帯 | 内容
--------------
午前 | ミーティング
(結合) |--------------
| 資料作成3行目の記述に注目してください。
3行目には「内容」にあたるセルが1つだけ記述されていますが、前の行のrowspan="2"によって「午前」のセルが下に伸びてきているため、表としては正しく2列構成を維持しています。
縦の結合を使うことで、同じ言葉を何度も記述する必要がなくなり、視認性の高い表を作成できます。
colspanとrowspanを組み合わせる方法
実務的な表作成では、横方向の結合と縦方向の結合を同時に行いたい場面も珍しくありません。
HTMLでは、一つのセルに対してcolspanとrowspanの両方を同時に指定することが可能です。
これにより、複雑なグリッドレイアウトを実現できます。
複合的な結合の具体例
例えば、4つのセル（2×2）を一つの大きなセルとしてまとめたい場合は、以下のように記述します。
<table border="1">
<tr>
<!-- 縦2行、横2列分を結合 -->
<td rowspan="2" colspan="2">大きな結合セル</td>
<td>右上のセル</td>
</tr>
<tr>
<!-- 1行目の結合の影響で、ここには1つしかセルを書かない -->
<td>右下のセル</td>
</tr>
</table>このように属性を並べて書くだけで、ブラウザは指定された範囲を一つのセルとして描画します。
ただし、このように結合が複雑になればなるほど、どのセルがどの位置に対応しているのかを把握するのが難しくなります。
作成する際は、あらかじめ紙やツールを使って表の完成図をイメージしておくことを強くおすすめします。
セル結合を行う際の注意点とベストプラクティス
セル結合は便利な機能ですが、使い方を誤るとアクセシビリティやメンテナンス性に悪影響を及ぼすことがあります。
ここでは、プロの視点から注意すべきポイントをいくつか紹介します。
1. セルの数え間違いに注意する
最も多いミスは、結合した後に余分なセルを残してしまったり、逆に必要なセルを消しすぎてしまったりすることです。
基本ルールとして、「すべての行において（表示上の）セルの合計数は一致しなければならない」ということを忘れないでください。
colspan="2"を使ったなら、その行のコード上のセル数は「全体の列数 – 1」になるはずです。
同様に、rowspan="2"を使ったなら、その次の行のコード上のセル数は「全体の列数 – 1」になります。
2. アクセシビリティ（スクリーンリーダー）への配慮
視覚障がいのある方が使用するスクリーンリーダー（音声読み上げソフト）にとって、複雑に結合された表は非常に理解しにくい構造となります。
セルが結合されていると、読み上げの順序が混乱し、データの文脈が伝わらなくなる恐れがあります。
可能な限りシンプルな表構造を心がけ、どうしても結合が必要な場合は<th>タグに対してscope属性を適切に設定するようにしましょう。
scope="col"は列の見出し、scope="row"は行の見出しであることを明示するための属性です。
3. セル結合とCSSの関係
セルの結合を行った表にCSSでスタイルを適用する場合、特にボーダー（枠線）の扱いに注意してください。
デフォルトの状態ではセルの間に隙間ができることがありますが、これを解消するためにはtableタグに対してborder-collapse: collapse;を適用するのが一般的です。
これにより、隣接するセルのボーダーが重なり合い、結合されたセルも含めてきれいな枠線が表示されるようになります。
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #333;
padding: 10px;
text-align: center;
}このようにスタイルを整えることで、結合されたセルがデザイン的に浮いてしまうのを防ぐことができます。
レスポンシブデザインにおける表の扱い
現代のWeb制作において無視できないのが、スマートフォンなど画面幅の狭いデバイスへの対応です。
実は、colspanやrowspanを多用した表は、レスポンシブ対応が非常に難しいという側面を持っています。
PCブラウザのような広い画面では綺麗に見えても、スマホの縦画面ではセルが潰れてしまい、文字が読めなくなることが多々あります。
そのため、複雑なセル結合を含む表を使用する場合は、以下の対策を検討してください。
一つは、表を横スクロールできるようにoverflow-x: auto;を設定したコンテナで囲む方法です。
もう一つは、スマホ表示の時だけCSSでdisplay: block;などを使い、表の構造自体を解除して縦並びにする方法です。
しかし、後者の方法をとる場合、せっかく設定したcolspanやrowspanの効果が失われてしまうため、情報の伝わり方が変わってしまいます。
情報を整理するための結合が、スマホユーザーにとっては逆に不便にならないよう、常に実機での確認を怠らないようにしましょう。
まとめ
HTMLの表におけるセル結合は、データをより分かりやすく、かつ論理的に整理するための非常に強力な手段です。
横方向の結合にはcolspan属性、縦方向の結合にはrowspan属性を使用することをしっかりと覚えておきましょう。
実装の際は、結合した分だけ他のセル（<td>や<th>）を削除するというルールを徹底することが、レイアウト崩れを防ぐ最大のポイントです。
また、複雑な結合は見た目を美しくする一方で、スクリーンリーダーを利用するユーザーやスマホユーザーにとっての使い勝手を損なう可能性もあります。
「この結合は本当に必要か？」を常に自問自答し、アクセシビリティとユーザビリティのバランスが取れた表作成を目指してください。
今回紹介した基本テクニックをマスターすれば、どんな複雑なデータシートもHTMLで正確に表現できるようになります。
まずは簡単な2列結合から練習を始め、徐々に複雑なレイアウトに挑戦してみてください。