HTML講座 / table・tr・th・tdで表を作る

HTMLの表はtableの中に行のtrを置き、見出しセルをth、データセルをtdで表します。まずデータの行と列の関係を決め、罫線や色などの見た目はCSSで調整します。

行と列を持つ基本の表

例は果物の在庫を表す架空のデータです。最初の行が列の名前で、以降の行が果物と数量の組になっています。次をHTML文書のbodyへ入れます。

<table>
  <tr>
    <th>Fruit</th>
    <th>Stock</th>
  </tr>
  <tr>
    <td>Apples</td>
    <td>12 pieces</td>
  </tr>
  <tr>
    <td>Pears</td>
    <td>8 pieces</td>
  </tr>
</table>

一つのtrが横一行になり、セルが左から並びます。初期表示では罫線が目立たないこともありますが、表が壊れているとは限りません。新しい果物を加える場合は、名前と数量を含む行を一つ追加します。先に紙などで行列を整理すると、セルの不足を見つけやすくなります。

見出し行とデータ行をまとめる

theadは見出し行、tbodyはデータ行のグループです。合計などのまとめにはtfootを使えます。次の例は基本の表と同じデータを明示的にグループ化しています。

<table>
  <thead>
    <tr><th>Fruit</th><th>Stock</th></tr>
  </thead>
  <tbody>
    <tr><td>Apples</td><td>12 pieces</td></tr>
    <tr><td>Pears</td><td>8 pieces</td></tr>
  </tbody>
</table>

これらは行の構造を表し、背景色や罫線を自動で指定するものではありません。HTMLソースでtbodyを省略していても、ブラウザーがDOMに追加する場合があります。開発者ツールの構造と、保存したソースの表記が違うことを区別して確認します。

見出しとデータを区別し、幅を調整する

thは行や列を識別する見出し、tdは対応する値です。太字にしたいだけでthを選びません。数量には単位を添えるか、見出し側で単位を説明し、12が個数か金額かを判断できるようにします。

広い表は次の包みとCSSで横スクロールさせられます。最初のコードのコメント位置へ、すでに作った表の行を入れてください。

<div class="table-scroll">
  <table>
    <!-- Place the preceding table rows here. -->
  </table>
</div>

.table-scroll { max-width: 100%; overflow-x: auto; }

caption、scope、セル結合は読みやすい表の構造で扱います。MDNのtable要素でも関連する属性を確認できます。

セルの位置がずれる場合

各行のセル数が予定した列数と一致するかを確認します。セルが足りないと、値が別の見出しの下へ入ってしまいます。列幅を合わせるためにスペースを何個も入れず、CSSで見た目を調整してください。

狭い画面で切れるときは、データを消したり極端に小さくしたりする前に、横スクロールを検討します。表はデータの関係を表すために使い、ページ全体の配置にはCSSのレイアウトを使います。