4.9.1 table 要素

Status: Last call for comments. ISSUE-92 (cleanuptable) blocks progress to Last Call

カテゴリー

フロー・コンテンツ

この要素を使うことができるコンテキスト：

フロー・コンテンツが期待される場所

コンテンツ・モデル：

この順番で：オプションで 1 つの caption 要素、続いて、0 個以上の colgroup 要素、続いて、オプションで 1 つの thead 要素、続いて、オプションで 1 つの tfoot 要素、続いて、0 個以上の tbody 要素または 1 個以上の tr 要素、続いて、オプションで 1 つの tfoot 要素（しかし、tfoot 要素は、合計で1個つまでしか入れてはいけません。）

コンテンツ属性：

グローバル属性

summary (本文参照のこと)

DOMインタフェース：

interface HTMLTableElement : HTMLElement {
           attribute HTMLTableCaptionElement caption;
  HTMLElement createCaption();
  void deleteCaption();
           attribute HTMLTableSectionElement tHead;
  HTMLElement createTHead();
  void deleteTHead();
           attribute HTMLTableSectionElement tFoot;
  HTMLElement createTFoot();
  void deleteTFoot();
  readonly attribute HTMLCollection tBodies;
  HTMLElement createTBody();
  readonly attribute HTMLCollection rows;
  HTMLElement insertRow(in optional long index);
  void deleteRow(in long index);
           attribute DOMString summary;
};

table 要素は、テーブルの形式で 1 個以上の次元をもったデータを表します。

テーブルをレイアウト目的で使ってはいけません。歴史的に、ページレイアウトを制御する方法として、HTML 内にテーブルを誤用するウェブ制作者がいました。この利用方法は非準拠です。ドキュメントからテーブル・データを展開しようとするツールが、非常に紛らわしい結果を取得してしまうからです。特に、スクリーン・リーダーのようなアクセシビリティ・ツールのユーザーは、レイアウト目的のテーブルがあるページのナビゲートに多大な困難を伴うことになるでしょう。

レイアウトに HTML のテーブルを使う代わりの方法はいくつもあります。まず CSS の位置指定や CSS の表組みを使ってください。

テーブルは、その子孫に行とカラムを持ちます。テーブル・モデルの説明で解説されているように、テーブルには、空の行や空のカラムがあってはいけません。

最初の行や最初のカラムではないセルが見出しとなるようなテーブルや、リーダーがコンテンツの理解に困難を伴うテーブルに対して、ウェブ制作者は、そのテーブルの説明情報を入れるべきです。この情報は、すべてのユーザーにとって有益なだけでなく、スクリーン・リーダーのユーザーのように、そのテーブルを見ることができないユーザーにとっては、とりわけ有益なものになります。

説明情報は、そのテーブルの目的を紹介し、基本的なセルの構造をまとめ、傾向やパターンをはっきりさせ、そのテーブルをどうやって使うのかをユーザーに教えるものとするべきです。

この情報を入れる方法はいくつかあります：

テーブルの前後の文章の中

<p>In the following table, characteristics are given in the second
column, with the negative side in the left column and the positive
side in the right column.</p>
<table>
 <caption>Characteristics with positive and negative sides</caption>
 <thead>
  <tr>
   <th id="n"> Negative
   <th> Characteristic
   <th> Positive
 <tbody>
  <tr>
   <td headers="n r1"> Sad
   <th id="r1"> Mood
   <td> Happy
  <tr>
   <td headers="n r2"> Failing
   <th id="r2"> Grade
   <td> Passing
</table>

テーブルの caption の中

<table>
 <caption>
  <strong>Characteristics with positive and negative sides.</strong>
  <p>Characteristics are given in the second column, with the
  negative side in the left column and the positive side in the right
  column.</p>
 </caption>
 <thead>
  <tr>
   <th id="n"> Negative
   <th> Characteristic
   <th> Positive
 <tbody>
  <tr>
   <td headers="n r1"> Sad
   <th id="r1"> Mood
   <td> Happy
  <tr>
   <td headers="n r2"> Failing
   <th id="r2"> Grade
   <td> Passing
</table>

テーブルの caption の中に入れた details 要素の中

<table>
 <caption>
  <strong>Characteristics with positive and negative sides.</strong>
  <details>
   <summary>Help</summary>
   <p>Characteristics are given in the second column, with the
   negative side in the left column and the positive side in the right
   column.</p>
  </details>
 </caption>
 <thead>
  <tr>
   <th id="n"> Negative
   <th> Characteristic
   <th> Positive
 <tbody>
  <tr>
   <td headers="n r1"> Sad
   <th id="r1"> Mood
   <td> Happy
  <tr>
   <td headers="n r2"> Failing
   <th id="r2"> Grade
   <td> Passing
</table>

同じ figure の中で、テーブルのとなり

<figure>
 <figcaption>Characteristics with positive and negative sides</figcaption>
 <p>Characteristics are given in the second column, with the
 negative side in the left column and the positive side in the right
 column.</p>
 <table>
  <thead>
   <tr>
    <th id="n"> Negative
    <th> Characteristic
    <th> Positive
  <tbody>
   <tr>
    <td headers="n r1"> Sad
    <th id="r1"> Mood
    <td> Happy
   <tr>
    <td headers="n r2"> Failing
    <th id="r2"> Grade
    <td> Passing
 </table>
</figure>

テーブルのとなりにある figure の figcaption の中

<figure>
 <figcaption>
  <strong>Characteristics with positive and negative sides</strong>
  <p>Characteristics are given in the second column, with the
  negative side in the left column and the positive side in the right
  column.</p>
 </figcaption>
 <table>
  <thead>
   <tr>
    <th id="n"> Negative
    <th> Characteristic
    <th> Positive
  <tbody>
   <tr>
    <td headers="n r1"> Sad
    <th id="r1"> Mood
    <td> Happy
   <tr>
    <td headers="n r2"> Failing
    <th id="r2"> Grade
    <td> Passing
 </table>
</figure>

ウェブ制作者は、必要に応じて、他のテクニックや、前述のテクニックの組み合わせも使うことができます。

もちろん、最善の選択肢は、テーブルのレイアウト方法を解説した説明文を書くのではなく、説明が必要とならないようなテーブルに調整することです。

<table>
 <caption>Characteristics with positive and negative sides</caption>
 <thead>
  <tr>
   <th> Characteristic
   <th> Negative
   <th> Positive
 <tbody>
  <tr>
   <th> Mood
   <td> Sad
   <td> Happy
  <tr>
   <th> Grade
   <td> Failing
   <td> Passing
</table>

以前の仕様では、table 要素の summary 属性は、スクリーン・リーダーのユーザーのために、複雑なテーブル向けに説明を提供するためのテクニックを想定したものでした。代わりに、前述のテクニックのひとつが使うべきです。

特に、ウェブ制作者は、テーブルの説明テキストが目の不自由な人に役立つかどうかを検討することが推奨されます。もしそのテキストが役に立たないのであれば、summary 属性を入れないほうが良いでしょう。同様に、その説明テキストが、目の不自由でない人、例えば、初めてそのテーブルを見る人を助けることができるのであれば、そのテキストは、そのテーブルの前か、caption の中に入れれば、より役に立つものとなるでしょう。例えば、テーブルのデータの結論を説明することは、誰にとっても役に立ちます。テーブルの読み方を説明することは、もしヘッダーだけでははっきりしないのであれば、誰にでも役に立ちます。テーブルの構造を説明することは、見ればすぐに分かるようなものであれば、誰にでも役に立つわけではないでしょう。しかし、アクセスビリティ・ツールを使ってテーブルを素早くナビゲートすることができるユーザーにも役に立つわけではないでしょう。

table . caption [ = value ]

テーブルの caption 要素を返します。

caption 要素を置き換えるために、この属性に値をセットすることができます。その新しい値が caption 要素でなければ、HIERARCHY_REQUEST_ERR 例外を投げます。

caption = table . createCaption()

テーブルが caption 要素を持つ状態にして、その caption 要素を返します。

table . deleteCaption()

テーブルが caption 要素を持たない状態にします。

table . tHead [ = value ]

テーブルの thead 要素を返します。

thead 要素を置き換えるために、値をセットすることができます。その新しい値が thead 要素でなければ、HIERARCHY_REQUEST_ERR 例外を投げます。

thead = table . createTHead()

テーブルが thead 要素を持つ状態にして、その thead 要素を返します。

table . deleteTHead()

テーブルが thead 要素を持たない状態にします。

table . tFoot [ = value ]

テーブルの tfoot 要素を返します。

tfoot 要素を置き換えるために、値をセットすることができます。新しい値が tfoot 要素でなければ、HIERARCHY_REQUEST_ERR 例外を投げます。

tfoot = table . createTFoot()

テーブルが tfoot 要素を持つ状態にして、その tfoot 要素を返します。

table . deleteTFoot()

テーブルが tfoot 要素を持たない状態にします。

table . tBodies

テーブルの tbody 要素の HTMLCollection を返します。

tbody = table . createTBody()

tbody 要素を生成し、テーブル内にそれを挿入します。そして、それを返します。

table . rows

テーブルの tr 要素の HTMLCollection を返します。

tr = table . insertRow(index)

tr 要素を生成します。必要に応じて tbody も生成します。そして、引数に指定された位置にその tr 要素を挿入します。

この位置はテーブルの中にある行に対応します。indexが -1 の場合は、表の最後に挿入されることになります。

指定の位置が -1 より小さかったり行数より大きかった場合は、INDEX_SIZE_ERR 例外を投げます。

table . deleteRow(index)

テーブルの中の指定位置にある tr 要素を削除します。

この位置は表の中にある行に対応します。index が -1 の場合は、表の最後の行が削除されることになります。

指定された位置が -1 より小さかったり最後の行の index より大きかった場合は、INDEX_SIZE_ERR 例外を投げます。

※ 原文：http://www.w3.org/TR/2010/WD-html5-20100624/tabular-data.html#the-table-element