2026年4月16日
HTML テーブル colspan・rowspan とは？
基本的なHTMLテーブルを覚えたら、次は応用です。colspan（コルスパン）と rowspan（ロウスパン）を使うと、複数のセルを結合して複雑な表が作れます。
この記事では、セルの結合方法からアクセシビリティ（accessibility：誰でも使いやすくすること）の高め方まで、実際のコード例とともに解説します。
colspan="数"：横方向に結合（列をまたぐ）rowspan="数"：縦方向に結合（行をまたぐ）
HTMLテーブルの基本がまだ不安な人はHTMLテーブルの基本を先に読んでおきましょう。
colspanで横に結合する
colspan は「column span（列の幅）」の略で、セルを横方向に結合します。たとえば colspan="3" と書くと、そのセルが3列分の幅を占めます。
表のタイトル行を作るときによく使います。たとえば「成績表」という見出しを3列の表の上部全体に表示したいときに使います。
<table border="1">
<tr>
<th colspan="3">2026年度 成績表</th> <!-- 3列分の幅を占める -->
</tr>
<tr>
<th>教科</th>
<th>前期</th>
<th>後期</th>
</tr>
<tr>
<td>数学</td>
<td>85点</td>
<td>90点</td>
</tr>
<tr>
<td>英語</td>
<td>72点</td>
<td>88点</td>
</tr>
</table>💡 colspan を使うときのポイント
colspanを使った行の セル数 は、使っていない行より少なくなります。たとえば3列のテーブルで colspan="3" にすると、その行のセルは1つだけでOKです。
rowspanで縦に結合する
rowspan は「row span（行の高さ）」の略で、セルを縦方向に結合します。rowspan="2" と書くと、そのセルが2行分の高さを占めます。
時間割や予定表など、同じカテゴリーが複数の行にまたがる表でよく使います。
<table border="1">
<tr>
<th rowspan="2">前期</th> <!-- 2行分の高さを占める -->
<td>4月</td>
<td>入学式</td>
</tr>
<tr>
<!-- ここは rowspan で埋まっているので th は書かない -->
<td>5月</td>
<td>体育祭</td>
</tr>
<tr>
<th rowspan="2">後期</th>
<td>10月</td>
<td>文化祭</td>
</tr>
<tr>
<td>12月</td>
<td>球技大会</td>
</tr>
</table>⚠️ rowspan を使うときの注意点
rowspan でセルが結合された行では、結合された分だけセルを省略します。「前期」が2行にまたがっている場合、2行目では「前期」のセルを書きません。書いてしまうと表が崩れます。
colspanとrowspanを組み合わせる
colspanとrowspanを組み合わせると、さらに複雑な表を作れます。時間割のように「縦にも横にも結合したい」ときに便利です。
<table border="1">
<tr>
<th colspan="4">時間割（月〜水）</th>
</tr>
<tr>
<th>時限</th>
<th>月曜</th>
<th>火曜</th>
<th>水曜</th>
</tr>
<tr>
<th rowspan="2">午前</th>
<td>数学</td>
<td>英語</td>
<td>国語</td>
</tr>
<tr>
<!-- rowspan で埋まっているので書かない -->
<td>体育</td>
<td>理科</td>
<td>社会</td>
</tr>
</table>最初は難しく感じるかもしれません。紙に表の構造を書いてから、どのセルをどう結合するか考えてからコーディングするとわかりやすいです。
captionでテーブルにタイトルをつける
<caption> タグを使うと、テーブルにタイトルをつけられます。アクセシビリティ（誰でも使いやすくすること）とSEO（検索エンジン最適化）に効果的です。
スクリーンリーダー（目が不自由な方が使う読み上げソフト）は、テーブルを読む前にcaptionの内容を先に読み上げます。そのため「何のテーブルか」がすぐにわかります。
<table border="1">
<caption>2026年度 1年3組の時間割</caption> <!-- テーブルの直後に書く -->
<tr>
<th>時限</th>
<th>月曜</th>
<th>火曜</th>
</tr>
<tr>
<td>1限</td>
<td>数学</td>
<td>英語</td>
</tr>
<tr>
<td>2限</td>
<td>国語</td>
<td>体育</td>
</tr>
</table>captionは必ず <table> タグの直後に書きます。デフォルトではテーブルの上部に表示されます。
scope属性でアクセシビリティを高める
scope 属性を <th> に追加すると、スクリーンリーダーがどの行・列のヘッダーかを正しく認識できます。
視覚的には同じに見えても、scope をつけることで「このセルは◯列のヘッダーです」という情報がHTMLに含まれます。目が不自由な方が表を読むときに、各セルの意味が正確に伝わります。
<table border="1">
<tr>
<th scope="col">名前</th> <!-- この列のヘッダー -->
<th scope="col">点数</th>
<th scope="col">評価</th>
</tr>
<tr>
<th scope="row">田中くん</th> <!-- この行のヘッダー -->
<td>85点</td>
<td>B</td>
</tr>
<tr>
<th scope="row">鈴木さん</th>
<td>92点</td>
<td>A</td>
</tr>
</table>scope="col"：この<th>は列のヘッダーですscope="row"：この<th>は行のヘッダーです
テーブルのCSSスタイリングとレスポンシブ対応
テーブルをそのままにしておくと、スマホでは横にはみ出してしまうことがあります。overflow-x: auto で横スクロールを追加すると、スマホでも見やすくなります。
/* テーブルをスマホでも見やすくする */
.table-wrapper {
overflow-x: auto; /* 横スクロールを有効にする */
}
table {
border-collapse: collapse; /* セルの境界線を1本にする */
width: 100%;
min-width: 400px; /* 最小幅を指定 */
}
th, td {
border: 1px solid #ccc;
padding: 8px 12px;
text-align: left;
}
th {
background-color: #f0fdf4;
}border-collapse: collapse について
デフォルトでは、テーブルのセルの境界線（ボーダー）は2重に表示されます。border-collapse: collapse を指定すると、境界線が1本にまとめられてすっきりします。ほぼ必ず使う設定です。
実際に書いてみよう：成績表を作る
captionとscope、colspanをすべて使った実践的なコードを書いてみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>成績表</title>
<style>
.table-wrapper {
overflow-x: auto;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ccc;
padding: 8px 12px;
text-align: center;
}
th {
background-color: #ecfdf5;
}
caption {
font-weight: bold;
margin-bottom: 8px;
font-size: 1.1em;
}
</style>
</head>
<body>
<div class="table-wrapper">
<table>
<caption>2026年度 前期成績表</caption>
<tr>
<th scope="col" colspan="4">各教科の点数</th>
</tr>
<tr>
<th scope="col">名前</th>
<th scope="col">数学</th>
<th scope="col">英語</th>
<th scope="col">国語</th>
</tr>
<tr>
<th scope="row">田中くん</th>
<td>85</td>
<td>72</td>
<td>90</td>
</tr>
<tr>
<th scope="row">鈴木さん</th>
<td>92</td>
<td>88</td>
<td>76</td>
</tr>
</table>
</div>
</body>
</html>このコードをHTMLファイルとして保存してブラウザで確認してみましょう。CSSのスタイルも含まれているので、見た目がきれいに仕上がります。
よくある間違いと対策
間違い1：rowspan/colspanの数が合わない
rowspanやcolspanを使うと、その分だけ後続のセルが減ります。数が合っていないとテーブルの列がズレてしまいます。紙に表の構造を書いてから、どのセルが何行/何列を占めるか確認しましょう。
間違い2：captionの位置が違う
captionは必ず <table> の直後に書きます。<tr> の前、<thead> の前です。別の場所に書くとHTMLとして正しくありません。
間違い3：スマホで表がはみ出す
テーブルを囲む <div> に overflow-x: auto をつけるのを忘れると、スマホで表示したときに右にはみ出します。5列以上ある表は必ずこの対応をしましょう。
まとめ
- ✅ colspan：横方向にセルを結合する（列をまたぐ）
- ✅ rowspan：縦方向にセルを結合する（行をまたぐ）
- ✅ caption：テーブルの直後に書いてタイトルをつける
- ✅ scope：ヘッダーの対象（col/row）を明示してアクセシビリティを高める
- ✅ overflow-x: auto：スマホでの横スクロール対応
- ✅ border-collapse: collapse：境界線を1本にしてすっきりさせる
テーブルの応用を覚えると、複雑なデータも整理して表示できます。レッスンでさらに詳しく学んでみましょう。
あわせて読みたい記事
- HTMLテーブルの基本 — テーブルの基礎に戻る
- HTMLとは？初心者向け解説 — HTML基礎に戻る
- レスポンシブデザイン入門 — スマホ対応の基本
- セマンティックHTML — 意味のあるHTML構造