テーブル①

テーブルの特徴

HTML では、表組みのことをテーブルと呼ぶ。
テーブルでは、table タグを親要素として記述し、子要素としてcaption タグ、tr タグ、th タグ、td タグなどを記述して行く。
テーブルはリストと違い、特に理由がない限り入れ子にすることはない。
なお、テーブルは HTML の中でも最も複雑で記述量の多いタグの集まりである。

テーブルの例

テーブルにはタイトルを付けることが出来、そのタイトル名を「キャプション」、横方向のマスを「列」、縦方向のマスを「行」、それぞれのマスのことを「セル」と呼ぶ。

テーブルのHTML

まず、tableタグでテーブルの開始を記述する。
それ以降はtr タグで行を記述し、th タグまたは td タグで列を記述して行く。
th タグはセルの項目名に使うタグで、td タグはセルの値に使うタグである。
最後にテーブルを閉じるために table の終了タグを記述する。
リストに比べると記述量が多くなっているが、それでも構成は似ていることに気付く。
これがテーブルの基本形である。

<table>
<tr><th>名前</th><th>色</th><th>形</th><th>味</th></tr>
<tr><td>メロン</td><td>緑</td><td>丸</td><td>甘い</td></tr>
<tr><td>レモン</td><td>黄</td><td>楕円</td><td>酸っぱい</td></tr>
</table>

キャプションのHTML

キャプションは caption タグを使用するが、記述する位置は table の開始タグの直後に限定されている。
記述出来るのは一つのテーブルにつき一度だけである。
なお、キャプションはテーブルに必ず書かなければならないものではない。
ただし、表の説明書きが必要な場合にはp タグで記述するのではなく、キャプションを使用する。

<table>
<caption>図1. 果物の特徴まとめ</caption>
<tr>
:
</tr>
</table>

テーブルの改行

テーブルは記述量が多く複雑なため、HTML ソースを整理すると読みやすくなる。
特にセル中の文章が長くなると、HTML が非常に読みづらくなってしまう。
こういう時は、各セルを構成している HTML タグをまとめて、適度に改行やインデントを入れると良い。

<tr>
  <td>メロンはウリ科の植物で、つる状に成長します。</td>
  <td>レモンはミカン科の植物で、樹木に成長します。</td>
</tr>