HTMLで表（table）を作成するとき、単純にセルを並べるだけでは表現しきれないケースがよくあります。
たとえば、見出しを大きくまとめたい場合や、複数の項目をひとつのカテゴリにまとめたい場合など、表のレイアウトを柔軟に調整したい場面が出てきます。
こうしたときに役立つのが、セル結合（セルの縦・横の統合）です。
HTMLでは、colspan と rowspan という2つの属性を使うことで、セルを横方向・縦方向に結合できます。
・表のレイアウト調整をしたいとき
→ 見出しを横に広げたい、カテゴリをまとめたい
・見出しセルを大きくまとめたいケース
→ 「商品情報」という大きな見出しの下に「価格」「在庫」などを並べたい
・テーブル構造の基本 のおさらい
→ HTMLの表は <table> → <tr>（行） → <td>（セル）という階層構造になっており、セル結合はこの構造を理解しているとスムーズに扱えます。
ここでは、colspan と rowspan の基本から、複雑な表の作り方、よくあるエラーの対処法までを丁寧に解説します。
テーブル構造の基本のおさらい
セルを結合する前に、HTMLのテーブル構造の基本をおさらいしておきましょう。
・<table>：表全体を囲むタグ
・<tr>：表の「行（横一行）」を表すタグ
・<th>：見出しの「セル（マス）」を表すタグ
・<td>：データの「セル（マス）」を表すタグ
基本的には、 <tr>（行）の中に複数の <td> や <th>（マス）が並ぶことで表が作られています。
＞＞HTMLで表を作るtableタグの書き方tr・th・tdタグの使い方をホームページ作成初心者に解説
HTMLのセル結合に使う属性：colspan と rowspan
セルの結合は、<td> タグまたは <th> タグに対して属性を追加することで行います。
colspan：横方向（列方向）の結合
colspan は、横方向（右隣のセル）につなげる仕組みです。「Column Span（列の範囲）」の略で、指定したセルが右側に向かって何マス分の幅を占めるかを設定します。
rowspan：縦方向（行方向）の結合
rowspan は、縦方向（下隣のセル）につなげる仕組みです。「Row Span（行の範囲）」の略で、指定したセルが下側に向かって何マス分の高さを占めるかを設定します。
tableタグ内での使い方の基本ルール
使い方は非常にシンプルで、結合をスタートさせたい <td> や <th> に colspan=”数値” または rowspan=”数値” を記述します。数値には「自分を含めて何マス分占有するか」の合計数を指定します。
セル結合を使う場合でも、基本構造（<tr> と <td> の関係）は崩さない必要があります。
横方向にセルを結合する：colspan の使い方
■ colspan の基本構文
横に結合する場合は、以下のように記述します。
| <td colspan=”結合するセルの数”> セルの内容 </td> |
■ 実際の横方向の結合コード例
例1：<td> タグを結合
<table style=”border-collapse: collapse; width: 100%;”><tr> <th> 見出し1 </th> <th> 見出し2 </th> <th> 見出し3 </th> </tr> <tr> <td> セルA1 </td> <! </table> |
ブラウザでは下記のような表示になります。
| 見出し1 | 見出し2 | 見出し3 |
|---|---|---|
| セルA1 | 横結合されたセル（B1とC1の枠） | |
| セルA2 | セルB2 | セルC2 |
例2：<th> タグを結合
<table style=”border-collapse: collapse; width: 100%;”><tr> <th colspan="3"> 商品一覧 </th> </tr> <tr> <td> 商品A </td> <td> 商品B </td> <td> 商品C </td> </tr> </table> |
ブラウザでは下記のような表示になります。
| 商品一覧 | ||
|---|---|---|
| 商品A | 商品B | 商品C |
■ colspan を使うときの注意点
【重要】右側の不要な <td> を削除することがポイントです。
横方向に2つ結合した場合、本来2つある <td> 又は <th> のうち 1つだけ残し、もう1つは削除します。
削除しないと、列数が合わず表が崩れてしまいます。
縦方向にセルを結合する：rowspan の使い方
■ rowspan の基本構文
縦に結合する場合は、以下のように記述します。
| <td rowspan=”結合するセルの数”> セルの内容 </td> |
■ 実際の縦方向の結合コード例
例1：「1列目のセル」の2行目と3行目を縦に2マス分結合する例
<table style=”border-collapse: collapse; width: 100%;”><tr> <th>見出し1</th> <th>見出し2</th> </tr> <tr> <! </table> |
ブラウザでは下記のような表示になります。
| 見出し1 | 見出し2 |
|---|---|
| 縦結合されたセル | 2行目・2列目 |
| 3行目・2列目 |
例2：「1列目のセル」を縦に3マス分結合する例
<table style=”border-collapse: collapse; width: 100%;”><tr> <! </table> |
ブラウザでは下記のような表示になります。
| 見出し | 2列目・1行目 |
|---|---|
| 2列目・2行目 | |
| 2列目・3行目 |
例3：「1列目のセル」の2行目～5行目を縦に4マス、6行目～8行目を縦に3マス、9～10行目を2マス分結合する例
<table style=”border-collapse: collapse; width: 100%;”><tr> <th>商品名</th> <th>カテゴリー</th> </tr> <tr> <td>商品A</td> <! </table> |
ブラウザでは下記のような表示になります。
| 商品名 | カテゴリー |
|---|---|
| 商品A | パソコン |
| 商品B | |
| 商品C | |
| 商品D | |
| 商品E | 洗濯機 |
| 商品F | |
| 商品G | |
| 商品H | 家庭用脱毛器 |
| 商品I |
■ rowspan を使うときの注意点
【重要】下の行の不要な <td> を削除することがポイントです。
縦方向に結合すると、次の行のセルが1つ減ります。
そのため、結合した分だけ 下の <tr> 内の <td> を削除する必要があります。
colspan と rowspan を組み合わせた複雑な表の作り方
■ 見出しセルを大きくまとめる
スケジュール表や複雑な料金表を作る際、縦と横の結合を同時に組み合わせる「複合セル結合」を使うと、非常に見やすい表が作れます。
■ 行列の整合性を保つコツ
・結合したセルの影響範囲を把握する
・必ず「削るセル」を意識する
・結合した分だけ他の行の <td> を削る
・行と列の数を常にそろえる
・行ごとのセル数が一致するように調整する
■ 複合セル結合の実例
<table style=”border-collapse: collapse; width: 100%;”><tr> <!-- 縦2マス×横2マス分を1つに結合 --> <td colspan="2" rowspan="2">縦横に4マス結合されたエリア</td> <td>1行目・3列目</td> </tr> <tr> <!-- 1・2列目は上のセルに占有されているため、3列目のみ記述 --> <td>2行目・3列目</td> </tr> <tr> <td>3行目・1列目</td> <td>3行目・2列目</td> <td>3行目・3列目</td> </tr> </table> |
ブラウザでは下記のような表示になります。
| 縦横に4マス結合されたエリア | 1行目・3列目 | |
| 2行目・3列目 | ||
| 3行目・1列目 | 3行目・2列目 | 3行目・3列目 |
セル結合でよくあるエラーと対処法・注意点
■ 表の列数が合わない（セル数を合わせる）
一番多いトラブルが「表の右端が凸凹になる」という現象です。これは各行のセルの合計数が合っていないことが原因です。
対策：「通常の <td> の数」＋「結合した数値（の余剰分）」が、すべての行で同じ数になるか引き算・足し算を確認しましょう。
■ 結合した分の <td> は削除する
colspan=”3″ にしたら、その行の他の <td> を2個削除。rowspan=”2″ にしたら、次の行の <td> を1個削除。この「使った分だけ他を消す」というルールを徹底してください。
結合数が「3」や「4」と大きくなっても、この法則（指定した数値 － 1 ＝ 消す数）はすべて共通です。
・colspan=”3″（3マス分を占領）にしたら、その行の他の <td> を 2個削除。
・rowspan=”3″（下へ3マス分を占領）にしたら、続く下の2行から <td> を 合計2個（各行1個ずつ）削除。
「自分が指定した数字は、何マス分の席を独占するか」という意味です。
独占した分、あぶれてしまう他のタグ（席）をしっかり引き算して消してあげることで、何列・何行の表であっても絶対に崩れない美しいテーブルを作ることができます。
■ rowspan と colspan の混在で起きるズレ
複雑な表になると、「どっちが縦でどっちが横か分からなくなる」という混乱が起きやすくなります。
頭文字の「Cは横」「Rは縦」と丸暗記してしまいましょう。
■ table構造が崩れる原因
テーブルのレイアウトがガタガタに崩れてしまう場合、原因のほとんどは以下の3つに絞られます。
・<tr>（行）の数ミス：行の数が足りない、または多すぎる。
・<td>（マス）の過不足：行ごとのセルの数が一致していない。
・結合方向の誤解：横に伸ばしたいのに rowspan を使っている、など。
これらを防ぐために、最も重要になるのが「セル数の足し算・引き算」のルールです。
【具体例】セル数が合っているか確認する計算方法
表の崩れを防ぐ最大のコツは、「結合していない状態の、本来の1行のマス目（列数）」を基準に計算することです。
① 横結合（colspan）の計算例
例えば、「基本が全2列」の表があるとします。
・ルール： colspan=”結合する数” を指定したら、「指定した数 － 1」の個数分、その行の
を削除します。
・計算例（2列の表で、2マス結合する場合）：
colspan=”2″ を指定。
削る数は 2 – 1 = 1 個。
そのため、その行の他の <td> を 1個削除 します。
結果、その行の <td> タグは合計1個になります。
② 縦結合（rowspan）の計算例
例えば、「基本が全2行×2列」の表があるとします。
・ルール： rowspan=”結合する数” を指定したら、「次の行（下の行）」の同じ位置にある <td> を 「指定した数 － 1」の個数分、削除します。
・計算例（2行の表で、2マス結合する場合）：
rowspan=”2″ を指定。
削る数は 2 – 1 = 1 個。
そのため、「次の行（下の <tr> 内）」の <td> を 1個削除 します。
セル結合が反映されないときのチェックポイント
コードを書いたのに上手く表示されない場合は、以下を確認してください。
■ colspan・rowspanの値が半角数字になっているか
colspan=”２”（全角）になっていませんか？必ず colspan=”2″（半角）で記述します。
■ <tr>・<td> の数が合っているか
削るべきタグが残っていたり、逆に削りすぎて空き地ができていないか数え直します。
■ 開始タグ・終了タグの記述ミスがないか
</td> のスラッシュが抜けていたり、</tr> の閉じ忘れがあると表示がおかしくなります。
■ ブラウザの開発者ツールで確認する
Google ChromeなどのブラウザでF12キーを押し、「開発者ツール（検証モード）」を使って表の要素にマウスを当ててください。
どのセルがどこまで広がっているかが視覚的に青や緑の枠線で表示されるため、原因が特定しやすくなります。
よくある質問（FAQ）
■ <th>（見出しセル）でもセル結合できる？
全く同じように結合できます。 <th colspan="2"> のように記述すれば、太字・中央揃えの見出しのまま横結合が可能です。
■ CSSだけでセル結合はできる？
<table> タグの構造（<tr> や <td>）を使う場合、CSSだけでセルを結合することはできません。 必ずHTML側で colspan や rowspan を指定する必要があります。
※Grid Layoutなど、テーブルタグを使わないレイアウト手法であればCSSで結合のような配置は可能です。
■ HTML Living Standard（現在のHTML標準仕様）でも使える？
問題なく使えます。 colspan と rowspan は現在のHTML標準仕様（HTML Living Standard）でも正式に推奨されている属性です。
