<table> …… テーブル（表）を作成する
<table>タグは、テーブル（表）を作成する際に使用します。
テーブルの基本的な構造は、<table>～</table>の中に <tr>～</tr>で表の横一行を定義して、 さらにその中に<th>～</th>や<td>～</td>でセルを定義します。 テーブルは行（横行）とカラム（縦列）を持ちますが、空の行やカラムを持つことはできません。
テーブルの各セルには見出しを定義するヘッダセル（<th>～</th>）と、 データを定義するデータセル（<td>～</td>）があります。 ヘッダセル内のテキストは、一般的なブラウザでは太字でセンタリングされて表示されます。
テーブルのキャプションは<caption>で指定します。 また、テーブルのヘッダ・フッタ・本体は、 <thead>・<tfoot>・<tbody>で定義します。 これらの要素は省略することもできますが、指定しておけばテーブル構造がより明確になるでしょう。
<table>のsummary属性は、表の目的や構造を分かりやすくするための説明・要約を指定する場合に使用します。 表の説明・要約を指定する際には、特に目の不自由な人にとってこれらのテキストが役立つかどうかを考慮する必要があります。 もし、役立たないのであれば、むしろsummary属性は入れないほうが良いでしょう。
また、表の説明・要約をする場合には、必ず<table>のsummary属性を使用しなければならないということはありません。 summary属性の代わりに、テーブルの前や後に<p>タグで説明文の段落を添えても良いでしょうし、 <caption>～</caption>の中にテーブルの内容が伝わるようなキャプション内容を指定しても良いでしょう。 大切なことは、構造が複雑になりがちなテーブルの内容を、様々な環境のユーザーが理解しやすいように配慮することです。 最善の方法は、テーブル構造についての説明を記述するのではなく、説明が不要な分かりやすい構造のテーブルを作成することです。
テーブルをレイアウト目的で使用してはいけません。 テーブルでレイアウトを制御すると、 ユーザー環境によっては情報の出力のされ方がでたらめになってしまう場合があるからです。 例えば、一般的なブラウザでは見栄え良くまとまっていても、 読み上げソフトで再生すると、読み上げ順がバラバラになってしまうかもしれません。 レイアウトが目的の場合にはCSSを使用してください。
■HTML4.01からHTML5へのバージョンアップによる変更点
table要素には、HTML4.01ではborder属性・cellpadding属性・cellspacing属性・frame属性・rules属性・width属性が用意されていました。 HTML5ではこれらの属性は廃止され、summary属性のみが残されています。
■属性
summary属性
表の説明・要約を指定
表の説明・要約を指定
■使用例
HTMLソース
<table>
<caption>
<strong>お寿司をどこで食べるか？その長所と短所</strong>
<details>
<summary>このテーブルの説明</summary>
<p>以下のテーブルでは、２番目のカラムに寿司店のタイプが入れられています。その左側にそのようなタイプのお店でお寿司を食べる場合の長所が、右側に短所が入れられています。</p>
</details>
</caption>
<thead>
<tr><th>長所</th><th>どこで食べるか</th><th>短所</th></tr>
</thead>
<tbody>
<tr><td>ネタにこだわり、技術が素晴らしい</td><th>銀座の高級店</th><td>値段が時価で不安、予約が必要</td></tr>
<tr><td>値段が良心的、気軽に手に取れる</td><th>回転寿司</th><td>ネタが解凍もの、休みの日は混む</td></tr>
</tbody>
</table>
<table>
<caption>
<strong>お寿司をどこで食べるか？その長所と短所</strong>
<details>
<summary>このテーブルの説明</summary>
<p>以下のテーブルでは、２番目のカラムに寿司店のタイプが入れられています。その左側にそのようなタイプのお店でお寿司を食べる場合の長所が、右側に短所が入れられています。</p>
</details>
</caption>
<thead>
<tr><th>長所</th><th>どこで食べるか</th><th>短所</th></tr>
</thead>
<tbody>
<tr><td>ネタにこだわり、技術が素晴らしい</td><th>銀座の高級店</th><td>値段が時価で不安、予約が必要</td></tr>
<tr><td>値段が良心的、気軽に手に取れる</td><th>回転寿司</th><td>ネタが解凍もの、休みの日は混む</td></tr>
</tbody>
</table>
↓↓↓
ブラウザ上の表示
| 長所 | どこで食べるか | 短所 |
|---|---|---|
| ネタにこだわり、技術が素晴らしい | 銀座の高級店 | 値段が時価で不安、予約が必要 |
| 値段が良心的、気軽に手に取れる | 回転寿司 | ネタが解凍もの、休みの日は混む |
上記のテーブルは、読み上げソフトなどではやや理解しにくい構造となっているため、 <details>～</details>でテーブルの説明を添えてみました。 上記のテーブルを、説明が無くても分かりやすくなるように構造を変更したものが、以下の使用例です。
HTMLソース
<table>
<caption>
<strong>お寿司をどこで食べるか？その長所と短所</strong>
</caption>
<thead>
<tr><th>どこで食べるか</th><th>長所</th><th>短所</th></tr>
</thead>
<tbody>
<tr><th>銀座の高級店</th><td>ネタにこだわり、技術が素晴らしい</td><td>値段が時価で不安、予約が必要</td></tr>
<tr><th>回転寿司</th><td>値段が良心的、気軽に手に取れる</td><td>ネタが解凍もの、休みの日は混む</td></tr>
</tbody>
</table>
<table>
<caption>
<strong>お寿司をどこで食べるか？その長所と短所</strong>
</caption>
<thead>
<tr><th>どこで食べるか</th><th>長所</th><th>短所</th></tr>
</thead>
<tbody>
<tr><th>銀座の高級店</th><td>ネタにこだわり、技術が素晴らしい</td><td>値段が時価で不安、予約が必要</td></tr>
<tr><th>回転寿司</th><td>値段が良心的、気軽に手に取れる</td><td>ネタが解凍もの、休みの日は混む</td></tr>
</tbody>
</table>
↓↓↓
ブラウザ上の表示
| どこで食べるか | 長所 | 短所 |
|---|---|---|
| 銀座の高級店 | ネタにこだわり、技術が素晴らしい | 値段が時価で不安、予約が必要 |
| 回転寿司 | 値段が良心的、気軽に手に取れる | ネタが解凍もの、休みの日は混む |
