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属性を指定することが強く推奨されています。その他にも、特に音声出力環境に対する機能(属性)が数多く定義されてます。
表の配置とその後に続くテキストの揃え方を指定します。値には次の3つのキーワードを指定できます。キーワードは半角アルファベットの大文字・小文字が区別されません(case-insensitive)。
align属性は非推奨属性のため、CSS の floatプロパティで左右の配置とその後に続くテキストの揃え方を、marginプロパティ( "table { margin-right : auto ; margin-left : auto ; }")で中央揃えをそれぞれ代替することが推奨されています(CSS によるブロック要素の左右中央揃え参照)。また、回り込んだテキストを途中で解除したい場合は br要素に clear属性を指定すれば良いのですが、clear属性も非推奨属性のため、表の後に続くブロック要素に clearプロパティを指定すると良いでしょう。
表の背景となる画像ファイルの所在を URI で指定します。ブラウザの独自機能ですが、主要ウェブブラウザはずべて対応しています。しかし、HTML の仕様には正式に定義されてないため、CSS の background-imageプロパティで代替することをお奨めします。
表の背景色を16進数RGB値、またはカラーネームで指定します。bgcolor属性は非推奨属性のため、CSS のbackground-colorプロパティで代替することが推奨されています。
表の各セルの外枠の罫線(境界線)の太さを指定します。値に "0" を指定することで、罫線は表示されなくなります。表の外枠を表示させる部分を指定する frame属性と、表の内枠(各セルの罫線)を表示させる部分を指定する rules属性の個別指定がない場合はそれぞれ以下のように連動します。
border属性の値が "0" の時frame属性の値は "void", rules属性の値は "none" を補って解釈するborder属性の値が "1" 以上の時frame属性の値は "border", rules属性の値は "all" を補って解釈する視覚環境の UAでは border属性の値に "1" 以上の指定がない限り、表の外枠は表示されません。
表内の各セルに表示される罫線とセルの内容との間に設ける余白の間隔を指定します。ピクセル数解釈の整数で指定した場合は指定値そのものを、パーセンテージによる割合指定の場合は限りなく指定された値に近い余白を確保します。cellpadding属性は非推奨ではありませんが、各セルとなっている th要素, td要素をセレクタに CSS の paddingプロパティで同様の表現に代替できます。
表のセルを区切る罫線の間隔を指定します。つまり、表全体と各セル同士の間隔を指定します。border属性の指定がない、もしくは border属性の値が "0" の場合は表の各セルの罫線(内罫線)は表示されません。表の各セルの罫線を表示させる場合は cellspacing属性と border属性を組み合わせて指定します。cellspacing属性の値には表の各セルの罫線のサイズをピクセル数解釈の整数で指定します。cellspacing属性の指定がない場合、多くの視覚環境の UA は "2" が初期値として設定されています。cellpadding属性は非推奨ではありませんが、CSS の border-spacingプロパティで同様の表現に代替できます。
表の外枠の罫線のうちで表示させる部分を指定します。初期値は "void" で、指定がない場合は罫線を表示しません。ただし、border属性の値が "1" 以上の時は、自動的に frame="border" を補って解釈します。Safari では frame属性は無効です。指定できる値には次の9つのキーワードがあります。キーワードは半角アルファベットの大文字・小文字が区別されません(case-insensitive)。
frame属性は非推奨ではありませんが、CSS の border-widthプロパティ, border-styleプロパティで同様の表現に代替できます。
ブラウザの独自機能ですが、主要ウェブブラウザはずべて対応しています。表全体の高さを指定します。HTML の仕様には正式に定義されていないため、CSS の heightプロパティで代替することをお奨めします。
表の各セルの罫線(内罫線)の表示方法を指定します。初期値は "none" で、指定がない場合は罫線を表示しません。ただし、border属性の値が "1" 以上の時は、自動的に rules="all" を補って解釈します。Safari では rules属性は無効です。指定できる値には次の5つのキーワードがあります。キーワードは半角アルファベットの大文字・小文字が区別されません(case-insensitive)。
rules属性は非推奨ではありませんが、tbody要素, thead要素, tfoot要素, col要素, colgroup要素をセレクタに CSS の border-widthプロパティ, border-styleプロパティで同様の表現に代替できます。
音声出力・点字出力などの非視覚環境に対して、表全体が表現している情報や表の構造を簡潔に説明するテキストを指定します。音声出力環境の中には、表の内容より先にこの summary属性の値を読み上げるものがあります。最初に表がどのような内容を扱っているのかを示しておくことで、ユーザーの理解を容易にすることが期待できます。このため summary属性は必須属性ではありませんが積極的に指定することが強く推奨されています。
表全体の横幅を指定します。指定がない場合は、UA が自動的に決定します(自動レイアウトアルゴリズムと呼ばれる)。width属性は非推奨ではありませんが、CSS の widthプロパティで指定することが推奨されています。
フッタ部分の行グループの 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>
http://w3g.jp/xhtml/dic/table直近の制作実績等:大阪人間科学大学 New! / 大阪薫英女子短期大学 New! / セキスイハイム みんなのお国じまん New!