HTMLで表を作るときは、table タグを使います。縦と横にセルが並ぶので、タグの並べ方を間違えると表が崩れやすいところです。この記事では、基本の形と、セルの結合、表を分かりやすくするタグ、WordPressでの作り方をまとめます。
基本の4つのタグ
HTMLの表は、「行」を上から順に並べ、その中にセルを左から順に入れていく形で書きます。
| タグ | 名前の由来 | 役割 |
|---|---|---|
table | table | 表全体を囲む |
tr | table row | 1行分を囲む |
th | table header | 見出しのセル |
td | table data | データのセル |
3行×3列（見出しの行＋データ2行）の表は、次のようになります。
<table border="1">
<tr>
<th>商品名</th>
<th>価格</th>
<th>在庫</th>
</tr>
<tr>
<td>HTML参考書</td>
<td>¥2,400</td>
<td>あり</td>
</tr>
<tr>
<td>PHP参考書</td>
<td>¥2,600</td>
<td>なし</td>
</tr>
</table>
th は、ブラウザでは太字・中央揃えで表示されますが、これは初期の見た目です。大事なのは「このセルは列（または行）の見出し」という意味で、画面読み上げソフトは、データのセルを読むときに対応する見出しも一緒に読み上げます。
線は CSS で引く
例の border="1" は、表に線を引く古い書き方です。今でもブラウザは線を引いてくれますが、数字で変えられるのは線の太さくらいです。今は、線の色や種類も含めてCSSで指定するのが普通です。
table {
border-collapse: collapse; /* 隣り合うセルの線を重ねて、1本にする */
}
th, td {
border: 1px solid #999; /* 太さ・種類・色 */
padding: 4px 8px; /* セルの内側の余白 */
}border-collapse: collapse を付けないと、セルごとに線が引かれて二重線のようになります。
書くときの決まり
① tr のすぐ下には th か td しか置けない
箇条書きの ul のすぐ下に li しか置けないのと同じように、tr のすぐ内側には th か td しか置けません（「箇条書きリスト（ul・ol・li）の書き方」）。セルの中身を囲みたいときは、セルの内側で囲みます。
<!-- よくない例：tr と td の間に div がある -->
<tr> <div><td>データ</td></div> </tr>
<!-- よい例：td の内側で囲む -->
<tr> <td><div>データ</div></td> </tr>表の中に間違った位置で書いたものは、ブラウザが表の外（上）に追い出してしまうことがあり、思った形になりません。
② ページのレイアウトには使わない
昔のWebサイトでは、メニューと本文を左右に並べるようなページ全体の配置に table が使われていました。今は、table は表のデータを表すときだけに使い、横に並べるなどの配置はCSS（Flexbox や Grid）で行います。レイアウトに表を使うと、スマホの狭い画面に合わせにくく、読み上げソフトも「表」として読んでしまいます。
セルをつなげる：colspan と rowspan
複数のセルを1つにつなげるときは、th や td に属性を付けます。値は、いくつ分のセルをつなげるかです。
| 属性 | 意味 |
|---|---|
colspan | 横につなげる列の数（column span） |
rowspan | 縦につなげる行の数（row span） |
colspan：横につなげる
<table border="1">
<tr>
<th>商品名</th>
<th>数量</th>
<th>金額</th>
</tr>
<tr>
<td>HTML参考書</td>
<td>1</td>
<td>¥2,400</td>
</tr>
<tr>
<td>CSS参考書</td>
<td>1</td>
<td>¥2,000</td>
</tr>
<tr>
<td colspan="2">合計</td>
<td>¥4,400</td>
</tr>
</table>
最後の行は「合計」が2列分を使うので、td は2つだけになります。つなげた分だけセルを減らさないと、その行だけ列がはみ出して表が崩れます。
rowspan：縦につなげる
<table border="1">
<tr>
<th>分類</th>
<th>言語</th>
</tr>
<tr>
<td rowspan="2">画面を作る</td>
<td>HTML</td>
</tr>
<tr>
<td>CSS</td>
</tr>
</table>「画面を作る」が2行分の高さになります。3行目は、左の列が上からつながったセルで埋まっているので、td は1つだけ書きます。
表を分かりやすくするタグ
表には、タイトルを付ける caption と、行を「頭・体・足」に分ける thead・tbody・tfoot もあります。
<table border="1">
<caption>【2026年度】売上表</caption> <thead>
<tr>
<th>月</th>
<th>売上</th>
</tr>
</thead>
<tbody>
<tr>
<td>1月</td>
<td>¥100,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>総計</td>
<td>¥100,000</td>
</tr>
</tfoot>
</table>
| タグ | 役割 |
|---|---|
caption | 表のタイトル。table のすぐ内側の最初に書く |
thead | 見出しの行をまとめる |
tbody | データの行をまとめる。書かなくてもブラウザが自動で足す |
tfoot | 合計など、最後の行をまとめる |
分けておくと、どこが見出しでどこがデータかが分かりやすくなり、CSSで見出しの行だけ色を変えるようなことも簡単になります。長い表を印刷したときに、ページごとに thead の行を繰り返してくれるブラウザもあります。
見出しの向きを伝える scope
th には、その見出しが「列の見出し」か「行の見出し」かを伝える scope 属性を付けられます。左端の列を行の見出しにする表では、付けておくと読み上げソフトが正しく対応を付けられます。
<tr>
<th scope="col">項目</th>
<th scope="col">内容</th>
</tr>
<tr>
<th scope="row">タイトル</th>
<td>tableタグの書き方</td>
</tr>WordPressでは
WordPressのブロックエディタでは、「テーブル」ブロックで表を作れます。
- 見出しの行：
右側の設定で「ヘッダーセクション」をオンにすると、最初の行がtheadとthになる - 合計の行：
「フッターセクション」をオンにすると、最後の行がtfootになる - キャプション：
表の下に入力した説明は、figcaptionとして表の下に表示される
WordPressのテーブルブロックでは、セルの結合（colspan・rowspan）はできないので、必要なときは「カスタムHTML」ブロックにHTMLで書きます。また、列の多い表はスマホでは横にはみ出しやすいので、列は少なめにして、公開前にスマホでも表示を確かめます。
HTML全体の基本は「HTMLの基本｜タグの書き方とよく使う5つのタグ」で紹介しています。
まとめ
- 表は
tableの中にtr（行）を並べ、その中にth（見出し）かtd（データ）を入れる - 線は
border属性ではなく、CSSのborderとborder-collapseで引く trのすぐ下にはthかtdしか置かない。ページのレイアウトには使わないcolspan・rowspanでつなげたら、その分だけセルを減らすcaptionやthead・tbody・tfoot、scopeを使うと、表の構造が伝わりやすくなる
コメント