reflux flow > HTML/XHTMLリファレンス > HTML/XHTML table要素

table要素

このページの目次
  1. 概要
  2. 要素の内容
  3. 属性
  4. 説明
  5. 関連要素
公開日
2007-05-25
最終更新日
2008-09-15T16:17:18+09:00

概要

table要素は、テーブル（表）を表すブロックレベル要素です。

要素の内容

HTML 4.01

以下の順番で要素を配置します。

  1. caption要素を一つ（無くても良い）
  2. col要素かcolgroup要素のどちらかを必要な数だけ（無くても良い）
  3. thead要素を一つ（無くても良い）
  4. tfoot要素を一つ（無くても良い）
  5. tbody要素を1つ以上

tbody要素を必ず一つ以上記述する必要があります。ただし、tbody要素の開始タグと終了タグは省略可能なので、見かけ上、table要素の子要素としてtr要素を記述できます（飽くまで「見かけ上」です。タグが省略されているだけで、実際にはtbody要素が存在し、tr要素はそのtbody要素の子要素になります）。

XHTML 1.0

以下の順番で要素を配置します。

  1. caption要素を一つ（無くても良い）
  2. col要素かcolgroup要素のどちらかを必要な数だけ（無くても良い）
  3. thead要素を一つ（無くても良い）
  4. tfoot要素を一つ（無くても良い）
  5. tbody要素かtr要素のどちらかを1つ以上

XHTMLではtr要素をtable要素の子要素にできるようになっています。

XHTML 1.1

以下の順番で要素を配置します。

  1. caption要素を一つ（無くても良い）
  2. col要素かcolgroup要素のどちらかを必要な数だけ（無くても良い）
  3. 「thead要素を一つ（無くても良い）、tfoot要素を一つ（無くても良い）、tbody要素を1つ以上」、または「tr要素を1つ以上」のどちらか

XHTML 1.1では、table要素の子要素としてthead要素やtfoot要素とtr要素を混在させることはできません。つまり、thead要素やtfoot要素を用いる場合は、tbody要素を用いる必要があります。

属性

固有属性

非推奨とされている属性はHTML4.01 Transitional/Frameset、XHTML1.0 Transitional/Framesetのみで利用できます。

属性名 属性値 説明
summary Text 表の内容や構造に関する要約を記述することができます。
width Length 表の幅を指定できます。指定しなかった場合、ブラウザ側が決定します。
border Pixels 表の枠線の太さを指定できます。詳細についてはHTML 4.01の仕様書を参照してください。
frame void | above | below | hsides | lhs | rhs | vsides | box | border 表の外枠を表示するかどうかを指定できます。詳細についてはHTML 4.01の仕様書を参照してください。
rules none | groups | rows | cols | all 表のセルを区切る罫線を表示するかどうかを指定できます。詳細についてはHTML 4.01の仕様書を参照してください。
cellspacing Length 表のセル同士の間隔を指定できます。
cellpadding Length 表のセルの枠とセルの内容との間隔を指定できます。
align left | center | right 非推奨属性。表の表示位置を指定できます。
bgcolor Color 非推奨属性。表の背景色を指定できます。
datapagesize CDATA HTMLのみ。将来のために予約されている属性です。利用することはできません。

汎用属性

id, class, title, lang（xml:lang）, dir, style, xmlns（XHTML1.1のみ）

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

説明

基本

HTML/XHTMLでは、表全体をtable要素、表の行をtr要素、表のセルをth要素またはtd要素で表現します。

<!-- 表の例 -->
<table>
  <tr><th>ファイル名</th><th>サイズ</th><th>更新日時</th></tr>
  <tr><td>a.html</td><td>7.28KB</td><td>2005年2月12日</td></tr>
  <tr><td>b.html</td><td>6.72KB</td><td>2004年9月30日</td></tr>
</table>

caption要素

表にタイトルを付けるときはcaption要素を用います。詳細についてはcaption要素の項を参照してください。

summary属性

表の内容や構造に関する説明文をsummary属性で記述することが推奨されています。

行のグループ化

thead要素、tfoot要素、tbody要素によって、行をグループ化することができます。詳細についてはtbody要素の項を参照してください。

列のグループ化

colgroup要素とcol要素によって、列のグループ化を行うことができます。詳細についてはcolgroup要素の項を参照してください。

テーブルレイアウト

table要素をレイアウトのために用いる手法をテーブルレイアウトと呼びます。table要素はテーブル（表）を表す要素であり、レイアウト目的でtable要素を用いることは推奨されていません。このことはHTML 4.01の仕様書にも明記されています。

非視覚系メディアでのレンダリングに際して問題を起こすことがあるため、単に文書内容を整形する目的だけで表を用いるべきでない。さらに、見た目のために表が用いられると、その表が大きなディスプレイのあるシステムで作られた場合、表を見るために水平スクロールを強いられることがある。こうした問題を最小限に押さえるため、著者は文書の整形には表ではなくスタイルシートを用いるべきである。

古いブラウザとの互換性などの問題で、テーブルレイアウトを採用する場合は、Techniques for WCAG 2.0に従って以下のことに注意すると良いでしょう（以下のリストは2007年5月17日付けの草案の項目）。

F46は、レイアウト目的のtable要素では、th要素やcaption要素、空でないsummary属性を用いるべきではないとしています。レイアウト目的のtable要素では、summary="layout table"のような値のあるsummary属性を用いるべきではなく、summary属性を指定するならばsummary=""にすべきだと書かれています。

F49は、表が線形化されても意味が通るようにすべきであるとしています。グラフィカルでないブラウザ、例えば音声ブラウザでは、表の内容はソースに書かれた順に読み上げられます。そのような場合でも意味が通るようにすべきであると書かれています。

関連要素

連絡先: r e f l u x f l o w [あっとまーく] g m a i l . c o m