colspan: 1 つのセルで複数の列をまたぐ
colspan="n" を指定すると、セルの幅が n 列分になります。そのセルがある行は、セルが n - 1 個少なくなります。ここでは合計のセルが最初の 2 列をまたいでいます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>colspan</title>
<style>
table { border-collapse: collapse; font-family: system-ui, sans-serif; }
th, td { border: 1px solid #6b7280; padding: 6px 12px; }
.span { background: #dbeafe; }
</style>
</head>
<body>
<table>
<tr><th>Item</th><th>Qty</th><th>Price</th></tr>
<tr><td>Pens</td><td>2</td><td>4.00</td></tr>
<tr><td>Paper</td><td>1</td><td>6.50</td></tr>
<tr><td class="span" colspan="2">Total</td><td>10.50</td></tr>
</table>
</body>
</html>
最後の行のセルは 2 つですが、最初のセルが 2 つ分に数えられるので、ほかの行と同じく合計 3 列になります。
rowspan: 1 つのセルで複数の行をまたぐ
rowspan="n" を指定すると、セルの高さが n 行分になります。縦長のセルがすでにその列を埋めているので、下の行ではその列を省きます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>rowspan</title>
<style>
table { border-collapse: collapse; font-family: system-ui, sans-serif; }
th, td { border: 1px solid #6b7280; padding: 6px 12px; }
.span { background: #dcfce7; }
</style>
</head>
<body>
<table>
<tr><th>Team</th><th>Member</th></tr>
<tr><td class="span" rowspan="3">Design</td><td>Ana</td></tr>
<tr><td>Bob</td></tr>
<tr><td>Cy</td></tr>
<tr><td>Web</td><td>Dee</td></tr>
</table>
</body>
</html>
Bob と Cy の行には <td> が 1 つしかありません。Team の列はすでに「Design」が占めているからです。HTML にはそれを示す印がないので、rowspan のある表は上から下へ読み、どの列がまだ覆われているかを数えながら読みましょう。
colspan と rowspan を組み合わせる: 時間割
1 つのセルで両方向にまたがることもできます。典型的な例が時間割で、2 コマ続く授業や 2 日にまたがる授業があります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Timetable</title>
<style>
table { border-collapse: collapse; font-family: system-ui, sans-serif; text-align: center; }
th, td { border: 1px solid #6b7280; padding: 8px 14px; }
thead th { background: #e5e7eb; }
.html { background: #fde68a; }
.css { background: #bfdbfe; }
.lab { background: #bbf7d0; }
</style>
</head>
<body>
<table>
<thead>
<tr><th scope="col">Time</th><th scope="col">Mon</th><th scope="col">Tue</th><th scope="col">Wed</th></tr>
</thead>
<tbody>
<tr><th scope="row">9:00</th><td class="html" rowspan="2">HTML</td><td class="css">CSS</td><td>Free</td></tr>
<tr><th scope="row">10:00</th><td class="lab" colspan="2" rowspan="2">Lab</td></tr>
<tr><th scope="row">11:00</th><td>Free</td></tr>
</tbody>
</table>
</body>
</html>
10:00 の行を数えてみましょう。時刻の見出し、次に Mon は上の行の HTML に覆われていて、Lab が Tue と Wed を埋めます。11:00 では Mon が再び空き、Lab はまだ Tue と Wed を覆っているので、その行のデータセルは 1 つです。
表が崩れないようにセルを数える
各セルの colspan と、上の rowspan のセルに覆われた列を数えに入れて、どの行も同じ列数になるようにします。ある行のセルが 1 つ多いと、ブラウザはそのための列を新しく追加し、表の端がギザギザになります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Wrong count</title>
<style>
body { display: flex; flex-wrap: wrap; gap: 24px; font-family: system-ui, sans-serif; }
table { border-collapse: collapse; }
th, td { border: 1px solid #6b7280; padding: 6px 12px; }
.span { background: #dcfce7; }
.extra { background: #fee2e2; }
</style>
</head>
<body>
<table>
<caption>Wrong</caption>
<tr><td class="span" rowspan="2">A</td><td>B</td></tr>
<tr><td>C</td><td class="extra">D</td></tr>
</table>
<table>
<caption>Right</caption>
<tr><td class="span" rowspan="2">A</td><td>B</td></tr>
<tr><td>C</td></tr>
</table>
</body>
</html>
間違った表では、2 行目が A に 1 列目を覆われていることを忘れているので、D がほかの行にない 3 列目に入っています。セルを 1 つ消せば直ります。colspan での同じ間違いは、幅の広いセルがある行で元のセルをすべて残してしまうことです。
セルが 1 つ少ない場合は逆の問題で、行が途中で終わり、末尾に穴が空きます。
colspan でまとめた見出し
見出しは、より細かい見出しの行の上で、自分がラベルを付ける列をまたぐことができます。スクリーンリーダーがその下のすべての列に見出しを当てはめられるよう、scope="colgroup" を付けましょう。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Grouped headers</title>
<style>
table { border-collapse: collapse; font-family: system-ui, sans-serif; }
th, td { border: 1px solid #6b7280; padding: 6px 12px; text-align: center; }
thead th { background: #e5e7eb; }
</style>
</head>
<body>
<table>
<colgroup><col></colgroup>
<colgroup span="2"></colgroup>
<colgroup span="2"></colgroup>
<thead>
<tr>
<th rowspan="2" scope="col">City</th>
<th colspan="2" scope="colgroup">January</th>
<th colspan="2" scope="colgroup">July</th>
</tr>
<tr>
<th scope="col">Low</th><th scope="col">High</th>
<th scope="col">Low</th><th scope="col">High</th>
</tr>
</thead>
<tbody>
<tr><th scope="row">Oslo</th><td>-7</td><td>-1</td><td>13</td><td>22</td></tr>
<tr><th scope="row">Rome</th><td>3</td><td>12</td><td>19</td><td>31</td></tr>
</tbody>
</table>
</body>
</html>
「City」は rowspan="2" で 2 行の見出しをまたぎ、各月は colspan="2" で 2 列をまたいでいます。<colgroup> 要素が、scope="colgroup" が参照する列のグループを定義します。これでスクリーンリーダーは Rome の 31 のセルで「Rome、July、High、31」と読み上げられます。テーブルのほかの構造については HTML テーブル を参照してください。
結合は本当の構造にだけ使う
セルを結合した表は、スクリーンリーダーで読みにくくなり、並べ替え、絞り込み、表計算ソフトへのコピーもしにくくなります。データが本当にまとまっている場所 (合計、サブ列の上の見出し、2 時間続く授業) に使いましょう。結合がたくさん必要な表は、単純な表 2 つに分けたほうがわかりやすいことがよくあります。
よくある間違い
- 覆われたセルを残したままにする。
colspan="2" のセルは 2 つのセルの代わりなので、元のセルを 1 つ消しましょう。
rowspan の下の行を忘れる。 その各行でセルを 1 つ減らす必要があります。<tr> に colspan を書く。 <td> と <th> でしか効きません。- ページのレイアウト用の表で、横長の見出し行などの見た目のために結合を使う。 レイアウトには CSS grid を使いましょう。
- 「全幅」のつもりで
colspan="100%" と書く。 ブラウザは先頭の数字しか読まないので、このセルは 100 列をまたぎ、表に空の列が追加されます。値は列の数を表す整数です。
