テーブル要素

テーブル要素は表を作成するための要素です。

テーブル要素に必要な主な要素はtable要素、tr要素、th要素、td要素です。

テーブルを構成する最上位の要素です。

テーブルの説明を表すsummary属性は必須ではありませんが、音声ブラウザなどを考慮して記述するべきです。

テーブルの行を作成する要素です。

tr要素の数だけテーブルの行が作成されます。

行の終了は明確なので終了タグの省略が可能な要素です。

テーブルのセルを作成しますが、その内容は各項目の題を表します。

説明しづらいので、サンプルで理解してください。

視覚系ブラウザでは中央寄せ、太字で表示されることが多いようです。

colspan属性とrowspan属性によりセルの連結が可能です。

閉じタグの省略は可能ですが、読みにくくなるので省略しないほうが良いでしょう。

テーブルのセルを作成する要素です。

tr要素内のtd(もしくはth)要素の数だけセルが作成されます。

tr要素もth要素と同様、colspan属性とrowspan属性によりセルの連結が可能です。

閉じタグの省略は可能ですが、読みにくくなるので省略しないほうが良いでしょう。

<table summary="簡易名簿">
<tr><th>氏名</th><th>年齢</th><th>出身中学</th></tr>
<tr><td>山田 太郎</td><td>18</td><td>不明</td></tr>
<tr><td>鈴木 次郎</td><td>19</td><td>不明</td></tr>
<tr><td>佐藤 五郎</td><td>18</td><td>不明</td></tr>
</table>

これをブラウザで表示させると以下のようになります。

これにこのサイトのスタイルシートを適用すると以下のようになります。

枠をつけるのに手軽なのはtable要素にborder属性を付加することで、border="1"とすると枠が表示されます。

しかしこれは構造の情報ではなく見栄えの情報ですので、推奨されません(とか言いつつ手軽なのでこのサイトでも一部使ってますが:-P)。

スタイルシートを使用して設定しましょう。一応例を載せておきます。

<table summary="簡易名簿" border="1">
<tr><th>氏名</th><th>年齢</th><th>出身中学</th></tr>
<tr><td>山田 太郎</td><td>18</td><td>不明</td></tr>
<tr><td>鈴木 次郎</td><td>19</td><td>不明</td></tr>
<tr><td>佐藤 五郎</td><td>18</td><td>不明</td></tr>
</table>