HTMLテーブルのcolspanとrowspanを完全ガイド！セル結合で表を自由自在に操ろう

HTML属性（colspan・rowspan）を活かしたスタイル調整

先生と生徒の会話形式で理解しよう

生徒

「HTMLで表を作っているのですが、複数のマス目を一つに繋げるにはどうすればいいですか？」

先生

「それなら、colspanとrowspanという属性を使うと、簡単にセルを結合できますよ。」

生徒

「具体的にはどのように使うんですか？」

先生

「それでは、基本的な使い方を一緒に見ていきましょう！」

1. HTMLテーブルのセル結合とは？

HTMLで表を作る際には、tableタグの中にtrタグやtdタグという部品を使います。trは横一列の行を、tdは一つ一つのマス目であるセルを意味します。通常、表はきれいに整列したマス目で構成されますが、複雑な情報を表示したいときには、複数のマス目を合体させて大きな一つのマスを作る必要があります。この操作を「セル結合」と呼びます。例えば、カレンダーで土曜日と日曜日を一つにまとめたり、見出しを二行分に広げたりする際に非常に便利です。

2. colspanで横方向にセルを繋げる

colspan（コールスパン）は、横方向にマス目を繋げるための属性です。colはカラム（列）、spanはまたがるという意味です。例えば、一つの行の中で「三つ分の横幅を一つにしたい」という場合は、tdタグにcolspan="3"と記述します。これを使うことで、表の左側に見出しを大きく配置し、右側に詳細データを並べるようなレイアウトを簡単に作成できます。横に広げることで、情報の重要度を強調する効果もあります。


<table>
  <tr>
    <td colspan="2">横に2つ分繋がったセル</td>
  </tr>
  <tr>
    <td>セル1</td>
    <td>セル2</td>
  </tr>
</table>

ブラウザ表示

3. rowspanで縦方向にセルを繋げる

rowspan（ロウスパン）は、縦方向にマス目を繋げるための属性です。rowは行を意味します。例えば、「縦に二行分を一つにしたい」という場合は、tdタグにrowspan="2"と記述します。これを利用すると、左側の列に見出しを置き、右側の列に複数の詳細情報を縦に並べてグループ化することができます。表全体を見やすく整理し、同じカテゴリーの情報を一目で関連付けられるようになるため、非常に実用的なテクニックです。


<table>
  <tr>
    <td rowspan="2">縦に2つ分繋がったセル</td>
    <td>詳細A</td>
  </tr>
  <tr>
    <td>詳細B</td>
  </tr>
</table>

ブラウザ表示

4. 属性を組み合わせた高度なスタイル調整

colspanとrowspanは、同じテーブルの中で同時に使用することができます。これらを組み合わせることで、複雑なレイアウトの表を作成できます。例えば、最上部に大きな見出しを配置し、左側でカテゴリーを縦にまとめつつ、右側で詳細を横に広げるといった構成が可能です。ただし、結合する数と実際に用意するセルの数に矛盾が生じると、表の形が崩れてしまいます。どのセルを消して、どこを広げるのかを計算しながら記述するのがコツです。


<style>
    table, td { border: 1px solid black; }
</style>
<table>
  <tr>
    <td rowspan="2">A</td>
    <td colspan="2">B</td>
  </tr>
  <tr>
    <td>C</td>
    <td>D</td>
  </tr>
</table>

ブラウザ表示

5. テーブルレイアウトの注意点とSEO

昔のWebサイトではデザインの配置（レイアウト）をテーブルで行うことが主流でしたが、現在はCSSという別の技術でレイアウトを整えるのが基本です。テーブルタグはあくまで「表データ」を表示するために使うべきです。検索エンジンも、テーブルは「数値や項目の比較データである」と認識します。セルの結合を多用しすぎると、検索エンジンが表の構造を正しく理解できなくなる可能性があります。そのため、セルの結合は表の中身を分かりやすくするための手段として適度に使用しましょう。

6. 初心者が陥りやすいミスと解決策

よくあるミスは、結合した後のセル数を考慮し忘れることです。例えば、1行目にcolspan="2"を指定した場合、その行には元々あったtdタグを一つ減らさないと、表の列がズレてしまいます。これはパズルと同じです。もし画面上で表が歪んで見えたら、HTMLコードを一度整理し、各行で使っているセルの合計数が合っているか数えてみてください。表のマス目を紙に書いてからコードを書くと、圧倒的にミスが減ります。

7. アクセシビリティとわかりやすい表

多くの人にとって見やすい表を作るためには、セル結合を活用しつつ、見出し（thタグ）を適切に使うことが重要です。見出しタグを使うことで、視覚に障害がある方や読み上げツールを使っている方にも、どこが項目の名前で、どこがデータなのかが伝わりやすくなります。colspanやrowspanを使う際は、単に形を整えるだけでなく、情報のグループ化という視点を持つことが、プロのコーダーへの第一歩となります。


<table>
  <tr>
    <th>項目名</th>
    <th>詳細情報</th>
  </tr>
  <tr>
    <td>名前</td>
    <td>サンプル太郎</td>
  </tr>
</table>

ブラウザ表示

8. モダンなCSSとの使い分け

テーブルタグでのデザイン調整には限界がありますが、Bootstrapのようなフレームワークを使うと、テーブル全体のスタイルを整えるのが非常に簡単になります。セルの結合はHTMLの構造で指定し、色や枠線、余白などの調整はCSSで行うという役割分担が基本です。HTMLは「情報の意味」を伝え、CSSは「見た目の美しさ」を整える。この役割分担を理解して書くコードは、読みやすく、修正も容易な、質の高いものになります。まずはシンプルな表から結合を練習してみましょう。

2026年最新スキルアップ・実践セミナー