テーブル

次に紹介するのはテーブルです。テーブルとは、表のことです。つまり、次のようなものですね。

このような表を作るには、table要素を使います。table要素があることで、「そこに表がある」ということを表します。表の中身はtable要素の中に記述します。

次に表はいくつかの「行」からなっています。さっきの例の場合、4つの行がありますね。この行1つをtr要素で表します。つまり、table要素の中にはいくつかのtr要素が並ぶことになります。

さらに、各行はいくつかの「セル」からなっています。このセルが、テーブルの1つ1つのマスです。このセルを表す要素がtd要素です。

セルは行に所属するため、当然td要素はtr要素の子として現れます。つまり、ここまでをまとめると、次のようになります。

<table>
<tr><td>メニュー</td><td>値段</td></tr>
<tr><td>醤油ラーメン</td><td>¥700</td></tr>
<tr><td>味噌ラーメン</td><td>¥750</td></tr>
<tr><td>塩ラーメン</td><td>¥700</td></tr>
</table>

table要素の中に4つのtr要素があり、各tr要素の中に2つずつのtd要素があります。

ちなみに、この表を実際に表示してみても、枠線が出ないと思います。実は、枠線を出すにはCSSを使用しないといけません。それはまたあとで解説します。

th要素

さて、最初に例として紹介した表では、一番上の「メニュー」「値段」のセルが太字になるなどして強調されていたかと思います。これは、そこから下に書いてあることがそれぞれ「メニュー」「値段」である、ということを表しているのです。これを、「テーブルの見出し」などと言います。

このテーブルの見出しを表現するには、td要素の代わりにth要素を使います。これはtd要素と同様の使い方をすることができる要素です。つまり、次のようになります。

<table>
<tr><th>メニュー</th><th>値段</th></tr>
<tr><td>醤油ラーメン</td><td>¥700</td></tr>
<tr><td>味噌ラーメン</td><td>¥750</td></tr>
<tr><td>塩ラーメン</td><td>¥700</td></tr>
</table>

ここまでのtr要素・td要素・th要素を使った構造がテーブルの基本です。

thead要素

次に紹介するのはthead要素です。これはtable要素の子として置けるもので、tr要素を囲みます。つまり、例えば次のようになります。

<table>
<thead>
  <tr><th>メニュー</th><th>値段</th></tr>
</thead>
<tr><td>醤油ラーメン</td><td>¥700</td></tr>
<tr><td>味噌ラーメン</td><td>¥750</td></tr>
<tr><td>塩ラーメン</td><td>¥700</td></tr>
</table>

thead要素の位置は、このように他のtr要素よりも前の位置と決まっています。

このthead要素は何を現すかというと、テーブルのヘッダーです。th要素のところで出てきたテーブルの見出しですね。

thead要素で囲まれたtr要素の行は、そのテーブルのヘッダーを表しているということになります。そのため、thead要素の子であるtr要素の行のセルには、td要素は使えません。th要素のみです。

1つのtable要素の中にthead要素は1つしかあってはいけません。

tbody要素

次に紹介するのがtbody要素です。tbody要素は、テーブルの本体部分（ヘッダーなどではない部分）を表します。

これも、thead要素と同じようにtr要素を子に持ちます。つまり、さっきの例は次のようにすることができます。

<table>
<thead>
  <tr><th>メニュー</th><th>値段</th></tr>
</thead>
<tbody>
  <tr><td>醤油ラーメン</td><td>¥700</td></tr>
  <tr><td>味噌ラーメン</td><td>¥750</td></tr>
  <tr><td>塩ラーメン</td><td>¥700</td></tr>
</tbody>
</table>

このようにして、全体がtheadとtbodyの2つの部分に分かれました。

ちなみに、このようにtbodyを使う場合と、tbodyを使わずにtable要素の子として直接trを書く場合がありましたが、これらは両立できません。

つまり、tbody要素を使うなら外に出るtr要素がないようにし、tr要素を直接table直下に書くならtbody要素は使ってはいけないということです。

また、tbody要素は1つのtableの中に複数書くことができます。これを利用して、行のグループ化をすることが可能です。次の例を見て下さい。

<table>
<thead>
  <tr><th>メニュー</th><th>値段</th></tr>
</thead>
<tbody>
  <tr><td>醤油ラーメン</td><td>¥700</td></tr>
  <tr><td>味噌ラーメン</td><td>¥750</td></tr>
  <tr><td>塩ラーメン</td><td>¥700</td></tr>
</tbody>
<tbody>
  <tr><td>ライス（小）</td><td>¥200</td></tr>
  <tr><td>ライス（大）</td><td>¥400</td></tr>
  <tr><td>チャーハン</td><td>¥600</td></tr>
</tbody>
</table>

メニューにご飯物が加わりました。このとき、tbody要素が2つになりメニューがラーメンとご飯物に分かれています。このように、tbody要素はテーブルをいくつかのグループに分けることができます。

tfoot要素

さて、今まで「テーブル全体はthead（ヘッダー）とtbody（本体）の2つで構成される」かのように解説してきましたが、実はそうではありません。もう1つあります。それがtfoot要素です。

この要素はテーブルのフッターです。ヘッダーがあるならフッターもあるということですが、つまりテーブルの一番下に表示させておきたい行をこの中に入れておきます。

tfoot要素の位置は特殊です。

<table>
<thead>
  <tr><th>メニュー</th><th>値段</th></tr>
</thead>
<tfoot>
  <tr><th>合計</th><td>¥3350</td></tr>
</tfoot>
<tbody>
  <tr><td>醤油ラーメン</td><td>¥700</td></tr>
  <tr><td>味噌ラーメン</td><td>¥750</td></tr>
  <tr><td>塩ラーメン</td><td>¥700</td></tr>
</tbody>
<tbody>
  <tr><td>ライス（小）</td><td>¥200</td></tr>
  <tr><td>ライス（大）</td><td>¥400</td></tr>
  <tr><td>チャーハン</td><td>¥600</td></tr>
</tbody>
</table>

このように、位置は、tbodyなど（本体部分）の前で、theadの後ろということになります。

ちなみに今回「合計」をフッターとして追加しましたが、全く意味はありませんね。ただ、合計などは結構使う場面があると思います。

さて、実際にこのテーブルを表示させてみるとわかりますが、見た目では「メニュー」「値段」の次の行に「合計」の行が来そうですが、それに反して「合計」の行は一番下になります。フッターは、書く位置はあそこなのに表示される位置は一番下になるのです。

ただ、昔（HTML4時代）はこうだったのですが、HTML5になるともっと直感的な方法が登場しました。

<table>
<thead>
  <tr><th>メニュー</th><th>値段</th></tr>
</thead>
<tbody>
  <tr><td>醤油ラーメン</td><td>¥700</td></tr>
  <tr><td>味噌ラーメン</td><td>¥750</td></tr>
  <tr><td>塩ラーメン</td><td>¥700</td></tr>
</tbody>
<tbody>
  <tr><td>ライス（小）</td><td>¥200</td></tr>
  <tr><td>ライス（大）</td><td>¥400</td></tr>
  <tr><td>チャーハン</td><td>¥600</td></tr>
</tbody>
<tfoot>
  <tr><th>合計</th><td>¥3350</td></tr>
</tfoot>
</table>

このように、テーブルの一番最後に書く方法です。この場合、書いた順番通りに表示されるので直感的です。

この2種類以外の場所に置くことはできません。まとめると、「theadと、tbody（または直接書く場合はtr）の間」または「一番最後」となります。

ちなみにここまで登場してきませんでしたが、thead,tfootの中には複数tr要素を入れることが可能です。つまり、ヘッダーやフッターは複数行であってもいいということです。

次回はテーブルの応用編です。