表をつくろう

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

まずは小さな表から

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> で書いたマスは、多くのブラウザで太字＆中央ぞろえになり、「ここは見出しだよ」と伝わります。

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

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

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

colspan="2" をつけたマスは、となりのマスとくっついて横2つ分に広がります。縦に2行分くっつけたいときは rowspan="2"。表の見出しをまとめたいときに活躍します。

このレッスンのまとめ

1. 表は <table>（全体）→ <tr>（行）→ <td>（マス）の入れ子で作る
2. 見出しのマスは <td> ではなく <th> を使う
3. どの行もマスの数をそろえるとガタつかない