Go to information

table要素

  1. table要素
  2. align属性
  3. background属性
  4. bgcolor属性
  5. border属性
  6. cellpadding属性
  7. cellspacing属性
  8. frame属性
  9. height属性
  10. rules属性
  11. summary属性
  12. width属性
  13. その他の属性
  14. サンプル

table要素

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属性を指定することが強く推奨されています。その他にも、特に音声出力環境に対する機能(属性)が数多く定義されてます。

バージョン
要素型
ブロック要素
開始タグ
必須
終了タグ
必須
非推奨
-
内包可能

align属性

バージョン
指定要素
table
必須
-
非推奨
属性値

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

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

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

background属性

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

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

bgcolor属性

バージョン
指定要素
table
必須
-
非推奨
属性値

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

border属性

バージョン
指定要素
table
必須
-
非推奨
-
属性値
整数(pixels)

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

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

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

cellpadding属性

バージョン
指定要素
table
必須
-
非推奨
-
属性値

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

cellspacing属性

バージョン
指定要素
table
必須
-
非推奨
-
属性値

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

frame属性

バージョン
指定要素
table
必須
-
非推奨
-
属性値

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

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

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

height属性

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

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

rules属性

バージョン
指定要素
table
必須
-
非推奨
-
属性値

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

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

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

summary属性

バージョン
指定要素
table
必須
-
非推奨
-
属性値
テキスト

音声出力・点字出力などの非視覚環境に対して、表全体が表現している情報や表の構造を簡潔に説明するテキストを指定します。音声出力環境の中には、表の内容より先にこの summary属性の値を読み上げるものがあります。最初に表がどのような内容を扱っているのかを示しておくことで、ユーザーの理解を容易にすることが期待できます。このため summary属性は必須属性ではありませんが積極的に指定することが強く推奨されています。

width属性

バージョン
指定要素
table
必須
-
非推奨
-
属性値

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

その他の属性

共通属性
イベント属性

table要素のサンプル

フッタ部分の行グループの tfoot要素は本体を表す tbody要素よりも先に記述します。また、table要素の summary属性では、その表が表現している情報を簡潔に記述します。音声出力環境においては、表を読み上げる場合、左上から右下に1セルずつ読み上げるため、行や列の関係がわかりにくくなり、情報と読み上げ内容が一致せず正しく把握することができない・しづらいことがあるので表の使用には注意してください。

記述例
<table border="1"
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>
表示例
現在位置
  1. W3G
  2. XHTML
  3. HTML辞典
  4. table要素
ナビゲーション
ステータス情報
作者
上田 遼
公開
2005-10-01T01:34:03+09:00
更新
2008-12-29T04:27:11+09:00
URI
http://w3g.jp/xhtml/dic/table
検索