HTML table 結合を完全理解【rowspanとcolspanの使い方がすぐわかる】

HTMLの表を作っていると、見出しをまたいでセルをまとめたい、複数行や複数列をひとつのセルとして表示したい、といった場面がよくあります。そこで重要になるのが、tableの結合です。
ただし、見た目だけを整えようとして使うと、構造が崩れたり、読み上げや保守性に影響したりすることもあります。

この記事では、HTML table 結合の基本から、rowspanとcolspanの違い、正しい書き方、よくあるミス、実務で使いやすいコツまでを整理して解説します。
表をわかりやすく作りたい方も、レイアウト崩れを防ぎたい方も、この記事を読めば必要なポイントを一通り理解できます。

HTML table 結合の基本とできること

HTML table 結合とは、表の中にあるセルを縦方向または横方向にまとめて、ひとつのセルとして扱うための書き方です。
通常、表は行と列が規則的に並びますが、表の見出しや分類をわかりやすく示したい場合には、すべてのセルを同じ大きさで並べるだけでは不十分なことがあります。

そのような場面で使うのが、横方向に結合するcolspanと、縦方向に結合するrowspanです。これらを使うことで、たとえば大分類の見出しを複数列にまたがって表示したり、同じ項目名を複数行分まとめたりできます。
ただし、結合を増やしすぎると表の構造が複雑になり、修正しにくくなるため、必要な箇所だけに絞って使うことが重要です。

セル結合が必要になる代表的な場面

セル結合が活躍するのは、複数の項目を階層的に見せたい表です。たとえば、月別売上表で上段に四半期の見出しを置き、その下に各月を並べる場合、四半期の見出しは複数列にまたがるためcolspanが適しています。
また、時間割や料金表のように、同じ分類が複数行に続くケースではrowspanを使うと重複表示を避けられます。

このように、結合は単なる装飾ではなく、情報のまとまりを明確に伝える手段です。スマホで見たときも、意味のあるまとまりがある表は理解しやすくなります。
一方で、複雑な比較表に無理やり多用すると、どのセルがどの見出しに対応しているか分かりにくくなるため、結合の目的を明確にして使うことが大切です。

結合に使うrowspanとcolspanの違い

rowspanは、ひとつのセルを複数行分にまたがって表示する属性です。縦に結合したいときに使います。たとえば、同じ担当者名が3行続く場合、1つのセルを3行分に広げることで重複を避けられます。
一方のcolspanは、ひとつのセルを複数列分にまたがって表示する属性で、横に結合したいときに使います。

違いは単純ですが、実際のコーディングでは、結合した分だけ他のセル数を調整する必要があります。ここを理解していないと、列がずれたり、表示が崩れたりします。
つまり、結合は属性を書くだけではなく、表全体のマス目を意識して設計することが重要です。最初に完成形を紙やメモで整理してから書くと、ミスを減らしやすくなります。

colspanで横方向に結合する方法

colspanは、thまたはtdに指定して、セルを横方向へ広げるための属性です。書き方は非常にシンプルで、colspan=2のように数字を指定すると、2列分をひとつのセルとして表示できます。
特に上段の見出しをまとめるときによく使われ、比較表や料金表、スケジュール表などで頻繁に登場します。

横方向の結合では、結合したセルが占める列数を意識し、その行に配置する残りのセル数を合わせる必要があります。ここを誤ると、列の対応関係が崩れます。
基本構造を理解したうえで、見出しセルにはthを使い、データセルにはtdを使うと、意味的にもわかりやすい表になります。

colspanの基本構文とサンプル

colspanの基本は、結合したいセルに列数を指定するだけです。たとえば、ある見出しを2列分に広げたいなら、そのセルにcolspan=2を付けます。
下の表は、上段の見出しを横に結合したシンプルな例です。

このように、見出しをまとめるだけで表の意味が伝わりやすくなります。複数列に共通するラベルがある場合は、colspanを使うことで視認性が大きく向上します。
ただし、列数の合計は各行で整合している必要があるため、全体の列構成を先に決めることが大切です。

colspanでよくあるズレの原因

colspanで多いミスは、結合後の列数を考えずに通常どおりセルを書いてしまうことです。たとえば、2列分を占めるセルを置いたのに、その後ろに本来の列数分のセルを追加すると、行全体の列数が過剰になってしまいます。
その結果、ブラウザが自動調整して見た目が崩れたり、別の行との対応が分かりにくくなったりします。

対策としては、表全体をまず何列構成にするか決め、各行の合計列数が一致するか確認することです。
複雑な表では、作成前に次のような整理をすると効果的です。

• 最終的な列数を最初に決める
• どのセルが何列分を占めるかを書き出す
• 各行の合計が同じか確認する

rowspanで縦方向に結合する方法

rowspanは、セルを縦方向に複数行へまたがらせる属性です。たとえば、同一カテゴリのデータが3行続くとき、そのカテゴリ名を1回だけ表示して3行分に広げることで、表がすっきりします。
一覧表や時間割、担当表などで特に使いやすい属性です。

ただし、rowspanは縦方向にまたがる分、次の行に本来置かれるはずのセルが不要になるため、どの行でセルを省略するかを正確に把握する必要があります。
横結合よりも構造を見失いやすいため、初学者はcolspanより慎重に扱うとよいです。

rowspanの基本構文とサンプル

rowspanは、結合したい行数を数字で指定します。たとえばrowspan=3なら、そのセルは3行分の高さを持つことになります。
下の表は、左端のカテゴリ名を縦にまとめた例です。

この書き方により、同じ分類名を繰り返さずに済みます。読み手にとっても、どの項目が同じグループか直感的に理解しやすくなります。
とくにデータ量が多い表では、rowspanによる整理効果が高いです。

rowspan使用時に注意したい構造上のポイント

rowspanでつまずきやすいのは、結合した次の行に不要なセルまで書いてしまうことです。縦に2行結合したなら、次の1行ではその列のセルはすでに埋まっている状態になります。
そのため、残りの列だけを書く必要があります。ここを理解していないと、列の位置がひとつずつずれて見えてしまいます。

また、見出しとの対応関係が複雑になる場合は、むやみにrowspanを増やさず、表を分けたほうが読みやすいこともあります。
実務では、次の観点で判断すると失敗しにくいです。

• 同じ項目名の繰り返しを減らしたいか
• 結合によって意味が明確になるか
• スマホ表示でも対応関係が追いやすいか

HTML table 結合を使うときの実務上の注意点

HTML table 結合は便利ですが、見た目だけで使うと、かえって分かりにくい表になることがあります。特に、複雑な比較表や入力フォーム風のレイアウトを表で再現しようとすると、構造が過度に入り組み、修正時の負担が大きくなります。
表は本来、表形式データを示すための要素です。その前提を守ることで、保守しやすく読みやすいマークアップになります。

また、見出しセルにはthを使い、必要に応じてscopeを指定することで、支配関係が明確になります。結合と見出しの指定を適切に組み合わせることが、実務では非常に重要です。
見た目を整えるのはCSSの役割、データ構造を示すのはHTMLの役割、と切り分けて考えると設計しやすくなります。

結合を多用しすぎないほうがよい理由

結合を増やしすぎると、作成者本人でも後から構造を追いにくくなります。1か所修正すると別の行の整合性まで見直す必要が出るため、保守性が下がります。
さらに、表の見出しとデータの対応が視覚的に複雑になり、読み手がどの数値を見ればよいか迷う原因にもなります。

そのため、結合は情報のまとまりを明確にするために使い、単に空白を減らしたいだけなら使用を再検討するのが賢明です。
実務では次の比較が参考になります。

アクセシビリティと見出し設計の考え方

表の結合では、見出し設計も非常に重要です。見出しセルをthで示し、列見出しなのか行見出しなのかをわかりやすくすると、読み上げ環境でも理解しやすい表になります。
単純な表ならscope=colやscope=rowで十分対応しやすく、結合があっても見出しの意味が伝わりやすくなります。

また、セル結合で複雑になりすぎると、視覚的には分かっても構造的には把握しづらくなることがあります。そうした場合は、表を分割する、説明文を補足する、項目名を簡潔に整理する、といった工夫が有効です。
見た目の美しさより、意味が伝わることを優先するのが、質の高いHTML表の基本です。

まとめ

HTML table 結合を理解するうえで押さえたいのは、横方向の結合にはcolspan、縦方向の結合にはrowspanを使うという基本です。
そして本当に大切なのは、属性の書き方だけでなく、表全体の列数や行の対応関係を意識して構造を組み立てることです。

見出しをわかりやすくしたいときや、同じ分類をまとめたいときに結合はとても有効です。反対に、見た目だけの都合で多用すると、保守性や読みやすさを損ないやすくなります。
まずはシンプルな表でcolspanとrowspanを試し、必要最小限の結合で情報を整理する感覚を身につけると、実務でも使いやすい表を作れるようになります。