table要素

Updated / Published

table要素は表（テーブル）を定義するブロックレベル要素です。一覧表、数表、年表などのように表の形にまとめて提供する必要がある情報の場合に使います。原則、レイアウト（ウェブページのデザイン・装飾）目的に使ってはいけません。HTML は構造化を行う言語であり、一覧表、数表、年表などの情報を参照するにあたって表を組む必要があって、そこではじめて「表」という構造を指定するために使われるべきです。

table要素内は、表題を示す caption要素、列・列グループを定義する col要素 と colgroup要素、行グループのヘッダを示す thead要素, 行グループのフッタを示す tfoot要素, 行グループの本体を示す tbody要素の順番で内包されます。さらに、行グループの thead要素, tbody要素, tfoot要素には行を定義する tr要素を並べます。tr要素内には、表の内容となるセルを示す td要素、またはセルの中で見出しとなるセルを示す th要素を並べます。ただし、HTML4.01 では tbody要素の開始タグと終了タグを省略可能で、XHTML では tbody要素の代わりに tr要素を記述できるため、table要素の直下に tr要素を直接記述することができます。

また、表の情報の流れはどうしても複雑になってしまう傾向にあるため、特に音声出力環境に配慮して表全体が表現している情報の要約を示す summary属性を指定することが推奨されています。その他にも、音声出力環境に対する機能（属性）が数多く定義されています。

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
要素型
ブロックレベル要素
開始タグ
必須
終了タグ
必須
非推奨
-
内容モデル

align属性

バージョン
  • HTML4.01(T,F)
  • XHTML1.0(T,F)
指定要素
table
必須
-
非推奨
  • 非推奨
  • HTML4.01 strict 廃止
  • XHTML1.0 strict 廃止
  • XHTML1.1 廃止
属性値
  • left
  • center
  • right

表の配置とその後に続くテキストの揃え方を指定します。値には次の3つのキーワードを指定できます。キーワードは半角アルファベットの大文字・小文字が区別されません（case-insensitive）。

left
表は左に配置、その右にテキスト（複数行）が回り込む
center
表を中央揃えに表示する
right
表は右に配置、その左にテキスト（複数行）が回り込む

align属性は非推奨属性のため、CSS の floatプロパティで左右の配置とその後に続くテキストの揃え方を、marginプロパティ（ "table { margin-right : auto ; margin-left : auto ; }"）で中央揃えをそれぞれ代替することが推奨されています（CSS によるブロックレベル要素の左右中央揃え参照）。また、回り込んだテキストを途中で解除したい場合は br要素に clear属性を指定すれば良いのですが、clear属性も非推奨属性のため、表の後に続く要素に clearプロパティを指定するか、回り込みが指定されている要素の親要素にclearfixを用いるようにしましょう。

HTML5ではalign属性は廃止されました。

background属性

バージョン
ブラウザの独自機能
指定要素
table
必須
-
非推奨
-
属性値
URI

表の背景となる画像ファイルの所在を URI で指定します。ブラウザの独自機能ですが、主要ブラウザはずべて対応しています。しかし、HTML の仕様には正式に定義されてないため、CSS の background-imageプロパティで代替することをおすすめします。

bgcolor属性

バージョン
  • HTML4.01(T,F)
  • XHTML1.0(T,F)
指定要素
table
必須
-
非推奨
  • 非推奨
  • HTML4.01 strict 廃止
  • XHTML1.0 strict 廃止
  • XHTML1.1 廃止
属性値

表の背景色を16進数RGB値、またはカラーネームで指定します。bgcolor属性は非推奨属性のため、CSS のbackground-colorプロパティで代替することが推奨されています。

HTML5ではalign属性は廃止されました。

border属性

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
指定要素
table
必須
-
非推奨
-
属性値
整数（pixels）

表の各セルの外枠の罫線（境界線）の太さを指定します。値に "0" を指定することで、罫線は表示されなくなります。表の外枠を表示させる部分を指定する frame属性と、表の内枠（各セルの罫線）を表示させる部分を指定する rules属性の個別指定がない場合はそれぞれ以下のように連動します。

border="0"の時
frame属性の値は "void", rules属性の値は "none" を補って解釈する
border="1"以上の時
frame属性の値は "border", rules属性の値は "all" を補って解釈する

視覚環境の UAでは border属性の値に "1" 以上の指定がない限り、表の外枠は表示されません。

HTML5ではborder属性は当初廃止予定でしたが、古いUAでborder属性の指定がない場合に、罫線がない区別し難い表の表示になるので後方互換性を確保するためと、HTML5準拠のUAではborder属性が指定されている場合はレイアウト（ウェブページのデザイン・装飾）目的に使われていない表であることを判断材料にできます。

cellpadding属性

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
指定要素
table
必須
-
非推奨
-
属性値
  • 整数（pixels）
  • パーセンテージ値（%）

表内の各セルに表示される罫線とセルの内容との間に設ける余白の間隔を指定します。ピクセル数解釈の整数で指定した場合は指定値そのものを、パーセンテージによる割合指定の場合は限りなく指定された値に近い余白を確保します。cellpadding属性は非推奨ではありませんが、各セルとなっている th要素, td要素をセレクタに CSS の paddingプロパティで同様の表現に代替できます。

HTML5ではcellpadding属性は廃止されました。

cellspacing属性

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
指定要素
table
必須
-
非推奨
-
属性値
  • 整数（pixels）
  • パーセンテージ値（%）

表のセルを区切る罫線の間隔を指定します。つまり、表全体と各セル同士の間隔を指定します。border属性の指定がない、もしくは border属性の値が "0" の場合は表の各セルの罫線（内罫線）は表示されません。表の各セルの罫線を表示させる場合は cellspacing属性と border属性を組み合わせて指定します。cellspacing属性の値には表の各セルの罫線のサイズをピクセル数解釈の整数で指定します。cellspacing属性の指定がない場合、多くの視覚環境の UA は "2" が初期値として設定されています。cellpadding属性は非推奨ではありませんが、CSS の border-spacingプロパティで同様の表現に代替できます。

HTML5ではcellspacing属性は廃止されました。

frame属性

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
指定要素
table
必須
-
非推奨
-
属性値
  • void
  • above
  • below
  • lhs
  • rhs
  • hsides
  • vsides
  • box
  • border

表の外枠の罫線のうちで表示させる部分を指定します。初期値は "void" で、指定がない場合は罫線を表示しません。ただし、border属性の値が "1" 以上の時は、自動的に frame="border" を補って解釈します。指定できる値には次の9つのキーワードがあります。キーワードは半角アルファベットの大文字・小文字が区別されません（case-insensitive）。

void
枠線を表示しない（初期値）
above
上端の枠線のみ表示
below
下端の枠線のみ表示
lhs
左端の枠線のみ表示
rhs
右端の枠線のみ表示
hsides
上端と下端の枠線のみ表示
vsides
左端と右端の枠線のみ表示
box
上下左右全て（周囲）の枠線を表示
border
上下左右全て（周囲）の枠線を表示

frame属性は非推奨ではありませんが、CSS の border-widthプロパティ, border-styleプロパティで同様の表現に代替できます。

HTML5ではframe属性は廃止されました。

height属性

バージョン
ブラウザの独自機能
指定要素
table
必須
-
非推奨
-
属性値
  • 整数（pixels）
  • パーセンテージ値（%）

ブラウザの独自機能ですが、主要ブラウザはずべて対応しています。表全体の高さを指定します。HTML の仕様には正式に定義されていないため、CSS の heightプロパティで代替することをお奨めします。

rules属性

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
指定要素
table
必須
-
非推奨
-
属性値
  • none
  • groups
  • rows
  • cols
  • all

表の各セルの罫線（内罫線）の表示方法を指定します。初期値は "none" で、指定がない場合は罫線を表示しません。ただし、border属性の値が "1" 以上の時は、自動的に rules="all" を補って解釈します。指定できる値には次の5つのキーワードがあります。キーワードは半角アルファベットの大文字・小文字が区別されません（case-insensitive）。

none
枠線を表示しない（初期値）
groups
列グループ・行グループの間の枠線のみ表示
rows
行の間の枠線のみ表示
cols
列の間の枠線のみ表示
all
すべて表示

rules属性は非推奨ではありませんが、tbody要素, thead要素, tfoot要素, col要素, colgroup要素をセレクタに CSS の border-widthプロパティ, border-styleプロパティで同様の表現に代替できます。

HTML5ではrules属性は廃止されました。

summary属性

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
指定要素
table
必須
-
非推奨
-
属性値
テキスト

音声出力環境に対して、表全体が表現している情報や表の構造を簡潔に説明するテキストを指定します。音声出力環境において、表の内容より先に summary属性の値を読み上げてもらうことを意図しており、最初に表がどのような内容を扱っているのかを示すことで、ユーザの理解を促すことが期待できます。

しかしながら、summary属性を多くの制作者が積極的に活用できていないことから、HTML5 では、summary属性の代わりにアクセシビリティを高める代替策がいくつか提示され、summary属性はHTML5仕様に採用されませんでした。summary属性はHTML5の仕様には採用されていませんが、summary属性の記述があってもHTML5仕様においては文法違反と見なされることはなく、引き続き summary属性を使用する事が認められています。しかし、さらに先の仕様であるHTML5.1以降においては完全に廃止となる予定です。

width属性

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
指定要素
table
必須
-
非推奨
-
属性値
  • 整数（pixels）
  • パーセンテージ値（%）

表全体の横幅を指定します。指定がない場合は、UA が自動的に決定します（自動レイアウトアルゴリズムと呼ばれる）。width属性は非推奨ではありませんが、CSS の widthプロパティで指定することが推奨されています。

HTML5ではwidth属性は廃止されました。

その他の属性

共通属性
イベント属性

table要素のサンプル

フッタ部分の行グループの tfoot要素は本体を表す tbody要素よりも先に記述します。また、table要素の summary属性では、その表が表現している情報を簡潔に記述します。

<p>次の表から明治時代の閣僚が旧薩長出身者中心の藩閥内閣であったことがわかる。</p>
<table summary="この表は、明治時代の閣僚が旧薩長出身者中心の藩閥内閣であったことを示す">
<caption>明治時代の内閣総理大臣</caption>
<thead><tr><th>総理大臣</th><th>成立年月</th><th>出身・政党</th></tr></thead>
<tfoot><tr><th>総理大臣</th><th>成立年月</th><th>出身・政党</th></tr></tfoot>
<tbody>
<tr><td>伊藤博文（第1次）</td><td>1885年12月</td><td>長州</td></tr>
<tr><td>黒田清隆</td><td>1888年4月</td><td>薩摩</td></tr>
<tr><td>山県有朋（第1次）</td><td>1889年12月</td><td>長州</td></tr>
<tr><td>松方正義（第1次）</td><td>1891年5月</td><td>薩摩</td></tr>
<tr><td>伊藤博文（第2次）</td><td>1892年8月</td><td>長州</td></tr>
<tr><td>松方正義（第2次）</td><td>1896年9月</td><td>薩摩</td></tr>
<tr><td>伊藤博文（第3次）</td><td>1898年1月</td><td>長州</td></tr>
<tr><td>大隈重信（第1次）</td><td>1898年6月</td><td>肥前・憲政党</td></tr>
<tr><td>山県有朋（第2次）</td><td>1898年11月</td><td>長州</td></tr>
<tr><td>伊藤博文（第4次）</td><td>1900年10月</td><td>長州・政友会</td></tr>
<tr><td>桂　太郎（第1次）</td><td>1901年6月</td><td>長州</td></tr>
<tr><td>西園寺公望（第1次）</td><td>1906年1月</td><td>公家・政友会</td></tr>
<tr><td>桂　太郎（第2次）</td><td>1908年7月</td><td>長州</td></tr>
<tr><td>西園寺公望（第2次）</td><td>1911年8月</td><td>公家・政友会</td></tr>
</tbody>
</table>