colspanとrowspanの使い方をHTMLの表で解説 実例と注意点つき

colspan と rowspan は、HTMLのtableでセルを結合するための属性です。colspan は列をまたがる指定、rowspan は行をまたがる指定です。検索ではCSSと一緒に調べられやすいですが、仕組みそのものはHTMLの表構造に関わるものです。この記事では、実際の表示例を見ながら、使い方、つまずきやすい点、見やすく整えるCSSまでまとめて解説します。

まず整理すること

colspan と rowspan は、見た目だけを変える装飾ではありません。表のセル構造そのものを変えます。つまり、td や th の並び方が変わるので、行と列の数を先に把握しておく必要があります。

CSSでできるのは、枠線、余白、背景色、文字寄せ、caption の見せ方などの調整です。セルを結合する役割はHTML、見やすく整える役割はCSS、と分けて考えると混乱しにくくなります。

colspanの基本

colspan は、1つのセルを横方向に何列分またがせるかを指定します。たとえば colspan="2" なら、そのセルは2列分の幅になります。見出し行や、補足説明を横に広く表示したいときによく使います。

<table>
  <tr>
    <th>時間帯</th>
    <th>月</th>
    <th>火</th>
  </tr>
  <tr>
    <th>午前</th>
    <td colspan="2">打ち合わせを2列分で表示</td>
  </tr>
  <tr>
    <th>午後</th>
    <td>実装</td>
    <td>レビュー</td>
  </tr>
</table>

colspan を使うと、該当行の列数が減ったように見えますが、実際には結合した分だけ他のセル配置を調整しています。行全体で見たときに、セルの数と位置が合っているかを確認するのが重要です。

rowspanの基本

rowspan は、1つのセルを縦方向に何行分またがせるかを指定します。rowspan="2" なら、そのセルは2行分の高さになります。部署名、担当者名、カテゴリ名のように、同じ値を複数行にまたがって見せたいときに使いやすいです。

<table>
  <tr>
    <th>担当</th>
    <th>内容</th>
  </tr>
  <tr>
    <th rowspan="2">Aチーム</th>
    <td>画面設計</td>
  </tr>
  <tr>
    <td>実装</td>
  </tr>
</table>

rowspan を使うときは、結合したセルの下に同じ列の td を入れません。下の行まで含めて列の位置をそろえる必要があるため、見た目よりも構造の確認が大切です。

併用の実例

colspan と rowspan は同時に使えます。表の一部を大きく見せながら、ほかのセルは細かく分けたいときに便利です。会議予定、料金表、在庫表のような少し複雑な表で役立ちます。

見た目を整えるCSS

セル結合そのものはHTMLですが、見やすさはCSSで大きく変わります。まずは border-collapse: collapse; で罫線を整え、th と td に余白を入れ、必要なら vertical-align: middle; で縦位置をそろえます。古い align や valign に頼るより、CSSで調整するほうが扱いやすいです。

table {
  width: 100%;
  border-collapse: collapse;
}
th,
td {
  border: 1px solid #94a3b8;
  padding: 10px 12px;
}
th {
  background: #0f172a;
  color: #fff;
  text-align: center;
}
td[colspan="2"] {
  text-align: center;
}

つまずきやすいポイント

• 行ごとの列数が合っていない と、表の見た目が崩れます。colspan や rowspan を足した結果、全体の列位置がどうなるかを確認してください。
• 結合セルの下に余分な td を置く と、想定外のずれが起きます。rowspan の下側は特に見落としやすいです。
• 小さい画面でそのまま詰め込む と、横幅が足りなくなります。必要なら横スクロールのラッパーを使うか、表の構造を分けます。
• caption や scope を省略する と、表の意味が伝わりにくくなります。見た目だけでなく、読み上げ時の理解にも影響します。

特に、colspan が効かないように見えるときは、HTML構造を先に見直すのが近道です。CSSの問題に見えても、実際は tr と td の並びが崩れているだけということが少なくありません。

アクセシビリティとレスポンシブ

複雑な表ほど、caption、th、scope を適切に使う意味が大きくなります。見出しセルとデータセルの関係が明確になると、スクリーンリーダーでも理解しやすくなります。align や valign のような古い属性は避け、配置はCSSで整えるほうが保守しやすいです。

レスポンシブ対応では、表を無理に縮めるより、overflow-x:auto; で横スクロールを許可するほうが実用的な場合があります。表の内容が多いときは、1つの表に詰め込みすぎず、別の表に分ける判断も必要です。

まとめ

colspan は列をまたがせる指定、rowspan は行をまたがせる指定です。どちらもHTMLの表構造を変える属性なので、まずは tr、th、td の並びを正しく作ることが重要です。そのうえで、caption、scope、border-collapse、vertical-align などを使って、見やすくて意味が伝わる表に整えるのが実務的です。