HTML要素 ・ リスト・テーブル
<table>
表
行と列で構成されるデータを表として表示する要素です。tr で行を、th と td でセルを作ります。
01
サンプルコード
HTML
1<table>
2 <caption>料金表</caption>
3 <thead>
4 <tr><th>メニュー</th><th>価格</th></tr>
5 </thead>
6 <tbody>
7 <tr><td>ブレンド</td><td>¥480</td></tr>
8 <tr><td>カフェラテ</td><td>¥550</td></tr>
9 </tbody>
10</table>
CSS
1table {
2 border-collapse: collapse;
3}
4th, td {
5 padding: 8px 16px;
6 border: 1px solid #ccc;
7}
8th {
9 background: #f5efe6;
10}
02
実行結果
ブラウザでの表示
03
解説
table は、データを行と列で整理して見せるための要素です。行は tr、見出しセルは th、データセルは td で書きます。
thead（見出し行）と tbody（本体）に分けると、表の構造がはっきりし、読み上げソフトにも伝わりやすくなります。表の題名は caption で付けます。
セルの枠線は既定では二重に見えるため、CSSで border-collapse: collapse を指定して1本にまとめるのが定番です。
04
応用例・注意点
表を構成する要素
| 要素 | 説明 |
|---|---|
caption | 表の題名 |
thead | 見出し行のまとまり |
tbody | データ行のまとまり |
tfoot | 合計などのまとまり |
tr | 行 |
th / td | 見出しセル / データセル |
スマートフォンで横スクロールさせる
列の多い表は、外側の div でスクロールさせると画面からはみ出しません。
HTML
1<div class="table-wrap">
2 <table>...</table>
3</div>
CSS
1.table-wrap {
2 overflow-x: auto;
3}
注意点
- 01レイアウト（横並び）のために table を使わないでください。レイアウトは Flexbox や Grid で行います。
- 02見出しのセルには td ではなく th を使います。
05
応用編：セルを結合する（rowspan / colspan）
表を作っていると、「この見出しは2行ぶんまとめたい」「この欄は横に広げたい」という場面が出てきます。そんなときに使うのが、セルを結合（くっつけて1つに）する rowspan と colspan という属性です。th や td に書き足すだけで使えます。
まずはおさらい：表をつくる4つのタグ
| タグ | もとの英語 | 役割 |
|---|---|---|
<table> | table ＝ 表 | 表の全体を囲む |
<tr> | table row ＝ 表の行 | 横一列（1行）をつくる |
<th> | table header ＝ 表の見出し | 見出しのセル（太字・中央寄せで表示される） |
<td> | table data ＝ 表のデータ | 中身のセル |
HTMLの表は、行（<tr>）を上から順に書き、その中にセル（<th>・<td>）を左から順に並べるというルールで作ります。この「先に行、セルはその中」という書き方が、rowspan と colspan を理解するカギになります。
英単語を分解してみよう
rowspanrow行（横一列）＋spanまたがる・範囲「いくつの行にまたがるか」を指定します。rowspan="2" なら2つの行にまたがります。
colspancolcolumn の略＝列（縦一列）＋spanまたがる・範囲「いくつの列にまたがるか」を指定します。colspan="2" なら2つの列にまたがります。
なぜ rowspan は縦、colspan は横に結合するの？
ここがいちばん混乱しやすいところです。row は「横一列」なのに、rowspan は縦に結合します。反対に column は「縦一列」なのに、colspan は横に結合します。あべこべに見えますが、「何をまたぐのか」を考えると納得できます。
1行目（横一列）2行目（横一列）3行目（横一列）
rowspan="2"↓ 2つの行rowspan は縦方向の結合になります。1列目（縦一列）2列目（縦一列）3列目（縦一列）
colspan="2"→ 2つの列colspan は横方向の結合になります。覚え方
rowspan＝ 行（row）を何本またぐか → 行は縦に積まれているので、セルは縦に伸びるcolspan＝ 列（column）を何本またぐか → 列は横に並んでいるので、セルは横に伸びる- 「row＝横なのに縦？」と迷ったら、「横一列の“帯”を何本またぐか」と考えましょう。
rowspan と colspan の違い
| 属性 | 結合する方向 | 意味 |
|---|---|---|
rowspan="2" | 縦方向 | 2行分を結合 |
rowspan="3" | 縦方向 | 3行分を結合 |
colspan="2" | 横方向 | 2列分を結合 |
colspan="3" | 横方向 | 3列分を結合 |
結合したら、その分の <td> を書かない
rowspanを使うと、結合したセルが下の行にはみ出してきます。そのため、次の行ではその場所の<td>を書きません。colspanを使うと、結合したセルが右どなりの場所を使います。そのため、同じ行ではその分の<td>を書きません。- 書き忘れると、セルが1つ余って表の右側がはみ出し、ガタガタの表になります。
コードと表示結果で見てみよう
ここからは、コードとブラウザでの表示を並べて確認します。縦に結合したセルはオレンジ、横に結合したセルは青に色を付けています。色は CSS の class で付けているだけで、結合そのものは rowspan・colspan の働きです。
例1：rowspan="2"（縦に2行分を結合）
時間割で、「月曜日」のセルを1時間目と2時間目の2行にまたがらせます。
HTML
1<table>
2 <tr>
3 <th>曜日</th>
4 <th>時間</th>
5 <th>教科</th>
6 </tr>
7 <tr>
8 <td class="row-merged" rowspan="2">月曜日</td>
9 <td>1時間目</td>
10 <td>国語</td>
11 </tr>
12 <tr>
13 <td>2時間目</td>
14 <td>数学</td>
15 </tr>
16</table>
CSS
1table {
2 border-collapse: collapse;
3}
4th, td {
5 padding: 8px 12px;
6 border: 1px solid #999;
7 text-align: center;
8}
9th {
10 background: #f2f2f2;
11}
12/* 結合したセルに色を付ける（結合そのものには関係ない） */
13.row-merged {
14 background: #ffe3bf; /* 縦に結合：オレンジ */
15 font-weight: bold;
16}
17.col-merged {
18 background: #d6e6fb; /* 横に結合：青 */
19 font-weight: bold;
20}
ブラウザでの表示
コードと表示の対応
<td class="row-merged" rowspan="2">月曜日</td>オレンジの「月曜日」のセルです。rowspan="2"なので、書いた行とその下の行の2行分を縦に使います。3つ目の <tr>（2時間目の行）<td>が2つしかありません。1列目は上から伸びてきた「月曜日」が使っているので、書かないのが正解です。
例2：rowspan="3"（縦に3行分を結合）
「月曜日」を1〜3時間目の3行にまたがらせます。数字を変えるだけで、伸びる長さが変わります。
HTML
1<table>
2 <tr>
3 <th>曜日</th>
4 <th>時間</th>
5 <th>教科</th>
6 </tr>
7 <tr>
8 <td class="row-merged" rowspan="3">月曜日</td>
9 <td>1時間目</td>
10 <td>国語</td>
11 </tr>
12 <tr>
13 <td>2時間目</td>
14 <td>数学</td>
15 </tr>
16 <tr>
17 <td>3時間目</td>
18 <td>英語</td>
19 </tr>
20</table>
CSS
1table {
2 border-collapse: collapse;
3}
4th, td {
5 padding: 8px 12px;
6 border: 1px solid #999;
7 text-align: center;
8}
9th {
10 background: #f2f2f2;
11}
12/* 結合したセルに色を付ける（結合そのものには関係ない） */
13.row-merged {
14 background: #ffe3bf; /* 縦に結合：オレンジ */
15 font-weight: bold;
16}
17.col-merged {
18 background: #d6e6fb; /* 横に結合：青 */
19 font-weight: bold;
20}
ブラウザでの表示
コードと表示の対応
<td class="row-merged" rowspan="3">月曜日</td>オレンジのセルが3行分、縦に伸びています。3つ目と4つ目の <tr>どちらも<td>が2つです。「月曜日」が1列目を3行分使っているので、下の2行では1列目を書きません。
例3：colspan="2"（横に2列分を結合）
名簿で、「名前」の見出しを「姓」と「名」の2列にまたがらせます。
HTML
1<table>
2 <tr>
3 <th class="col-merged" colspan="2">名前</th>
4 <th>年齢</th>
5 </tr>
6 <tr>
7 <td>山田</td>
8 <td>太郎</td>
9 <td>13</td>
10 </tr>
11 <tr>
12 <td>佐藤</td>
13 <td>花子</td>
14 <td>14</td>
15 </tr>
16</table>
CSS
1table {
2 border-collapse: collapse;
3}
4th, td {
5 padding: 8px 12px;
6 border: 1px solid #999;
7 text-align: center;
8}
9th {
10 background: #f2f2f2;
11}
12/* 結合したセルに色を付ける（結合そのものには関係ない） */
13.row-merged {
14 background: #ffe3bf; /* 縦に結合：オレンジ */
15 font-weight: bold;
16}
17.col-merged {
18 background: #d6e6fb; /* 横に結合：青 */
19 font-weight: bold;
20}
ブラウザでの表示
コードと表示の対応
<th class="col-merged" colspan="2">名前</th>青い「名前」の見出しです。colspan="2"なので、右どなりまでの2列分を横に使います。1つ目の <tr>セルは<th>が2つだけです。「名前」が2列分を使うので、2 ＋ 1 ＝ 3列になり、下の行（3つずつ）とそろいます。
例4：colspan="3"（横に3列分を結合）
成績表の一番上に、表全体の題名を3列にまたがらせて置きます。
HTML
1<table>
2 <tr>
3 <th class="col-merged" colspan="3">1学期の成績</th>
4 </tr>
5 <tr>
6 <th>国語</th>
7 <th>数学</th>
8 <th>英語</th>
9 </tr>
10 <tr>
11 <td>80</td>
12 <td>75</td>
13 <td>90</td>
14 </tr>
15</table>
CSS
1table {
2 border-collapse: collapse;
3}
4th, td {
5 padding: 8px 12px;
6 border: 1px solid #999;
7 text-align: center;
8}
9th {
10 background: #f2f2f2;
11}
12/* 結合したセルに色を付ける（結合そのものには関係ない） */
13.row-merged {
14 background: #ffe3bf; /* 縦に結合：オレンジ */
15 font-weight: bold;
16}
17.col-merged {
18 background: #d6e6fb; /* 横に結合：青 */
19 font-weight: bold;
20}
ブラウザでの表示
コードと表示の対応
<th class="col-merged" colspan="3">1学期の成績</th>青いセルが3列分、横いっぱいに伸びています。1つ目の <tr>セルは1つだけです。この1つで3列分を使うので、ほかのセルは書きません。
例5：rowspan と colspan を組み合わせる
時間割で、2時間続きの「理科」を縦に、全曜日共通の「給食」を横に結合します。
HTML
1<table>
2 <tr>
3 <th></th>
4 <th>月</th>
5 <th>火</th>
6 <th>水</th>
7 </tr>
8 <tr>
9 <th>1時間目</th>
10 <td class="row-merged" rowspan="2">理科</td>
11 <td>国語</td>
12 <td>数学</td>
13 </tr>
14 <tr>
15 <th>2時間目</th>
16 <td>英語</td>
17 <td>社会</td>
18 </tr>
19 <tr>
20 <th>昼</th>
21 <td class="col-merged" colspan="3">給食</td>
22 </tr>
23</table>
CSS
1table {
2 border-collapse: collapse;
3}
4th, td {
5 padding: 8px 12px;
6 border: 1px solid #999;
7 text-align: center;
8}
9th {
10 background: #f2f2f2;
11}
12/* 結合したセルに色を付ける（結合そのものには関係ない） */
13.row-merged {
14 background: #ffe3bf; /* 縦に結合：オレンジ */
15 font-weight: bold;
16}
17.col-merged {
18 background: #d6e6fb; /* 横に結合：青 */
19 font-weight: bold;
20}
ブラウザでの表示
コードと表示の対応
<td class="row-merged" rowspan="2">理科</td>オレンジのセルです。月曜日の1時間目と2時間目の2行分を縦に使います。3つ目の <tr>（2時間目の行）<th>のあとに<td>が2つだけです。月曜日の場所は「理科」が使っているので書きません。<td class="col-merged" colspan="3">給食</td>青いセルです。月・火・水の3列分を横に使います。そのため、この行には<td>が1つしかありません。
セルの数を数えて確かめよう
- どの行も「書いたセルの数 ＋
colspanで増えた分 ＋ 上の行からrowspanで伸びてきた分」が同じになっていれば、正しい表です。 - 例5では、どの行も4つ（見出し1つ＋曜日3つ）になっています。2時間目の行は「書いたセル3つ ＋ 上から伸びてきた1つ」、昼の行は「見出し1つ ＋
colspan="3"で3つ分」です。