表をつくろう

時間割、料金表、メニュー——縦と横に情報がならぶとき、いちばん見やすいのが表（テーブル）です。パーツが少し多いので身構えるかもしれませんが、だいじょうぶ。「箱を組み合わせるだけ」です。

まずは小さな表から

2行2列の、いちばん小さな表を作ってみます。

<table>
  <tr>
    <td>りんご</td>
    <td>150円</td>
  </tr>
  <tr>
    <td>みかん</td>
    <td>100円</td>
  </tr>
</table>

読み解くと、こうです。

「表 → 行 → マス」と、だんだん小さくなる入れ子。まずはこの順番だけ押さえましょう。

見出しのマスはth

いちばん上の行を「品名／値段」のような見出しにすると、ぐっと読みやすくなります。見出しのマスには、<td> の代わりに <th>（table header）を使います。

<table>
  <tr>
    <th>品名</th>
    <th>値段</th>
  </tr>
  <tr>
    <td>りんご</td>
    <td>150円</td>
  </tr>
</table>

<th> で書いたマスは、多くのブラウザで太字＆中央ぞろえになり、「ここは見出しだよ」と伝わります。実際の表示がこちら。

表に題名をつける（caption）

「この表は何の表か」をひとことで示すのが <caption>。表専用の題名タグで、<table> を開いたすぐ次の行に書きます。

<table>
  <caption>くだものの値段</caption>
  <tr>
    <th>品名</th>
    <th>値段</th>
  </tr>
  <tr>
    <td>りんご</td>
    <td>150円</td>
  </tr>
</table>

見出しタグ（<h2> など）を表の上に置くのと似ていますが、<caption> は表とひとつながりとして扱われるのがちがい。読み上げソフトにも「これは“くだものの値段”の表です」と伝わるので、表の意味がぐっと分かりやすくなります。

マスをよこ長にする（colspan）

「2月の予定」のように、1つのマスで2列分を占めたいときは、colspan="2" をつけます。

<tr>
  <th colspan="2">2月の予定</th>
</tr>
<tr>
  <td>1日</td>
  <td>おやすみ</td>
</tr>

colspan="2" をつけたマスは、となりのマスとくっついて横2つ分に広がります。

縦にくっつけたいときは rowspan。たとえば「午前」というマスを縦2行分にしたければ、こうです。

<tr>
  <th rowspan="2">午前</th>
  <td>こくご</td>
</tr>
<tr>
  <td>さんすう</td>
</tr>

「午前」のマスが縦にのびて、こくご・さんすうの2行にまたがります。2行目に「午前」のマスを書いていないのがポイント——上の行からのびてきたマスが、その場所をすでに使っているからです。

よくある間違いと直し方

表は入れ子が深いぶん、書き間違いも起きやすいタグです。代表的なつまずきを知っておきましょう。

<td> を <table> に直接書いてしまう。 マスは必ず <tr>（行）の中に入れます。行の“いれもの”を飛ばすと、ブラウザが表として組み立てられず、文字だけがぽろっと表の外に出てしまうことがあります。

閉じタグを忘れる。 </td> </tr> </table> のどれかを閉じ忘れると、そこから先の行がずれたり、表のあとの文章まで巻きこまれたりします。表を書くときは「開けたら閉じる」を1セットずつ確かめながら進めるのが安全です。

<th> と <td> を見た目で選んでしまう。 「太字にしたいから <th>」は間違いのもと。<th> は見出しの意味を持つマス専用です。太字にしたいだけなら、あとで学ぶCSSでいくらでも変えられます。

このレッスンのまとめ

1. 表は <table>（全体）→ <tr>（行）→ <td>（マス）の入れ子で作る
2. 見出しのマスは <td> ではなく <th>、表の題名は <caption>
3. どの行もマスの数をそろえるとガタつかない（colspan・rowspanのぶんも数える）
4. 枠線や色はCSSの仕事。表はデータのならびのために使う