table - テーブル(表)

※テーブル(表)をレイアウトを再現する目的で使用することは推奨されていません。
table要素の基本的な構造は、table要素の子要素としてtr要素で行を定義。
さらにその子要素としてth要素(ヘッダ)、td要素(データ)を定義します。

テーブル(表)のキャプションはcaption要素でで指定します。
また、テーブル(表)のヘッダ・フッタ・本体は、thead要素、tfoot要素、tbody要素で定義します。 これらの要素は省略することもできますが、指定しておけばテーブル構造がより明確になるでしょう。

summary属性では、表の目的や構造を分かりやすくするための説明・要約を指定する場合に使用します。
また、表の説明・要約をする場合には、必ずsummary属性を使用しなければならないということはありません。 summary属性の代わりに、テーブルの前や後に説明文の段落を添えても良いでしょうし、caption要素で伝えても問題ありません。 大切なことは、構造が複雑になりがちなテーブルの内容を、様々な環境のユーザーが理解しやすいように配慮することです。 最善の方法は、テーブル構造についての説明を記述するのではなく、説明が不要な分かりやすい構造のテーブルを作成することです。

table要素のブラウザ別サポート状況

- ie6 ie7 ie8 ie9 firefox4 chorme safari5 opera10
table

table要素のHTML4からHTML5への変更点

HTML5では、border属性、cellpadding属性、cellspacing属性、frame属性、rules属性、width属性は廃止されました。

コンテンツ属性

グローバル属性 すべての要素で共通に使える属性。HTML5で新たに定義された属性もあります。
summary 表の説明・要約を指定

「基本」のサンプル

HTMLコード

<table>
<tr>
<th>ヘッダセル</ht>
<th>ヘッダセル</ht>
</tr>
<tr>
<td>データセル</hd>
<td>データセル</hd>
</tr>
</table>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「基本」のサンプルプレビューを確認

「フルオプション」のサンプル

HTMLコード

<table summary="テーブルのフルオプション例">
<caption>テーブルのフルオプション例</caption>
<thead>
<tr>
<th>ヘッダセルA</th>
<th>ヘッダセルA</th>
<th>ヘッダセルA</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ヘッダセルB</th>
<td>データセルA</td>
<td>データセルA</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>ヘッダセルB</th>
<td>データセルB</td>
<td>データセルB</td>
</tr>
</tbody>
</table>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「フルオプション」のサンプルプレビューを確認

原文(英語):(http://www.w3.org/TR/2010/WD-html5-20100624/tabular-data.html#the-table-element)