料金表や比較表など、表を作る場面は意外と多くあります。tableのタグは種類が多く見えますが、基本の構造はとても単純です。

3つの入れ子で考える

  • table … 表そのもの。いちばん外側の箱
  • tr … 横1行（table row）
  • td … 1つのマス（table data）。見出しのマスは th を使う

「表の中に行があり、行の中にマスがある」。この順番だけ守れば表になります。マスを直接 table の中に書くことはできません。

いちばん小さい表
<table>
  <tr>
    <th>項目</th>
    <th>値段</th>
  </tr>
  <tr>
    <td>コーヒー</td>
    <td>400円</td>
  </tr>
</table>

実際に組んでみる

そのままだと罫線も無く見づらいので、CSSを少しだけ当てます。表のCSSでほぼ必ず書くのが border-collapse です。これを書かないと、隣り合うマスの線が二重になります。

CODE表の基本形コードを書き換えると、すぐ下で動きます

border-collapse: collapse を消すと、線が二重になります。行を1つ増やしてみるのもおすすめです。

th と td を使い分ける

見出しのマスは td ではなく th にします。見た目が太字中央寄せになるだけでなく、読み上げ環境が「この列は値段の列です」と伝えられるようになります。太字にしたいだけなら th を使わずCSSで十分です。

マスを結合する

「この行は2列ぶんまとめたい」というときは colspan、縦にまとめたいときは rowspan を使います。数字は「何マスぶんか」です。

CODEcolspan で横につなげるコードを書き換えると、すぐ下で動きます

colspan の数字を 1 にすると、マスが1つぶんに戻って表が崩れます。結合したぶん、そのマスは書かないのがポイントです。

レイアウトに table を使わない

昔は、ページ全体のレイアウトを table で組む方法が使われていました。いまはやりません。表は「表形式のデータ」のためのものです。横並びにしたいだけなら Flexbox を使ってください。

スマホではみ出す問題

列が多い表は、スマホの画面に収まりません。対策は単純で、表を div で囲んで横スクロールできるようにします。

はみ出す表の定番対策
/* HTML側で <div class="table-wrap"><table>...</table></div> と囲む */
.table-wrap {
  overflow-x: auto;
}

こうすると、表だけが横に動くようになり、ページ全体が横スクロールする事故を防げます。