4.9.1 table 要素

カテゴリー

フロー・コンテンツ

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

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

コンテンツ・モデル：

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

コンテンツ属性：

グローバル属性

border

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 border;
};

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

テーブルには、その子孫によって指定される行、カラム、セルがあります。行とカラムはグリッドを形成します。テーブルのセルは、オーバーラップせずに、そのグリッドを完全に覆わなければいけません。

ウェブ制作者は、複雑なテーブルの解釈の方法を説明する情報を提供することが推奨されます。そのような情報を提供する方法に関するガイドラインは後述します。

テーブルをレイアウト目的で使うべきではありません。歴史的に、多くのウェブ制作者が、ページ・レイアウトを制御する方法として、HTML にテーブルを入れていました。これは、ドキュメントから表形式データを抽出することを困難にしてしまいます。特に、スクリーン・リーダーといったアクセシビリティ・ツールのユーザーは、レイアウト目的で使われたテーブルがあると、ページを渡り歩くことがが非常に困難になります。もし、テーブルをレイアウト目的で使うのであれば、role="presentation" という属性を使わなければいけません。これによって、ユーザーエージェントは、支援テクノロジーに対して適切にテーブルを表すことができるようになります。また、ドキュメントから表形式データを抽出しようとするツールに、ウェブ制作者の意図を適切に伝えることができるようになります。

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

border 属性は table 要素に指定することができます。その table 要素はレイアウト目的で使われていないことを明示的に表すことができます。指定するなら、その属性値は、空文字列か値 "1" のいずれかでなければいけません。この属性は、そのテーブルのセルの周囲にボーダーを引くという指示として、特定のユーザーエージェントによって使われます。

ウェブ制作者と実装者は、ユーザーがテーブルを渡り歩きやすくするために、後述のテーブル・レイアウト・テクニックのいくつかを使うことを考慮することが推奨されます。

table . caption [ = value ]

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

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

caption = table . createCaption()

該当のテーブルが確実に caption 要素を持つ状態にしてから、それを返します。

table . deleteCaption()

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

table . tHead [ = value ]

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

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

thead = table . createTHead()

該当のテーブルが確実に thead 要素を持つ状態にしてから、それを返します。

table . deleteTHead()

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

table . tFoot [ = value ]

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

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

tfoot = table . createTFoot()

該当のテーブルが確実に tfoot 要素を持つ状態にしてから、それを返します。

table . deleteTFoot()

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

table . tBodies

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

tbody = table . createTBody()

tbody 要素を生成し、それを該当のテーブル挿入してから、それを返します。

table . rows

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

tr = table . insertRow(index)

tr 要素を生成します。必要に応じて tbody も生成します。そして、それらを引数に指定された位置に該当のテーブルに挿入してから、生成した tr を返します。

位置は、該当のテーブルの行に対して相対的になります。インデックス -1 なら、該当のテーブルの最後に挿入することになります。

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

table . deleteRow(index)

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

位置は、該当のテーブルの行に対して相対的になります。インデックス -1 なら、該当のテーブルの最後の行を削除することになります。

指定位置が -1 より小さい、または、最後の行のインデックスより大きいなら、INDEX_SIZE_ERR 例外を投げます。

<section>
 <style scoped>
  table { border-collapse: collapse; border: solid thick; }
  colgroup, tbody { border: solid medium; }
  td { border: solid thin; height: 1.4em; width: 1.4em; text-align: center; padding: 0; }
 </style>
 <h1>Today's Sudoku</h1>
 <table>
  <colgroup><col><col><col>
  <colgroup><col><col><col>
  <colgroup><col><col><col>
  <tbody>
   <tr> <td> 1 <td>   <td> 3 <td> 6 <td>   <td> 4 <td> 7 <td>   <td> 9
   <tr> <td>   <td> 2 <td>   <td>   <td> 9 <td>   <td>   <td> 1 <td>
   <tr> <td> 7 <td>   <td>   <td>   <td>   <td>   <td>   <td>   <td> 6
  <tbody>
   <tr> <td> 2 <td>   <td> 4 <td>   <td> 3 <td>   <td> 9 <td>   <td> 8
   <tr> <td>   <td>   <td>   <td>   <td>   <td>   <td>   <td>   <td>
   <tr> <td> 5 <td>   <td>   <td> 9 <td>   <td> 7 <td>   <td>   <td> 1
  <tbody>
   <tr> <td> 6 <td>   <td>   <td>   <td> 5 <td>   <td>   <td>   <td> 2
   <tr> <td>   <td>   <td>   <td>   <td> 7 <td>   <td>   <td>   <td>
   <tr> <td> 9 <td>   <td>   <td> 8 <td>   <td> 2 <td>   <td>   <td> 5
 </table>
</section>

4.9.1.1 テーブルを表現するためのテクニック

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

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

例えば、次のテーブルは：

... そのテーブルがレイアウトされた理由を説明する文章があれば分かりやすくなるでしょう。例えば、次のような文章です。"2 番目のカラムに特徴が入れられています。その左側のカラムにはマイナス面が、右側にはプラス面が入れられています。"。

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

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

<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>プラス面とマイナス面を持ち合わせた特徴 </caption>
 <thead>
  <tr>
   <th> 特徴
   <th> マイナス面
   <th> プラス面
 <tbody>
  <tr>
   <th> 気分
   <td> 悲しい
   <td> 幸せ
  <tr>
   <th> 成績
   <td> 不合格
   <td> 合格
</table>

4.9.1.2 テーブル・レイアウトのテクニック

良いテーブル・レイアウトの要諦は、より読みやすく使いやすくすることです。

ビジュアル・メディアでは、カラムと行にボーダーを与え、行の背景を交互に変えることは、複雑なテーブルをより読みやすくする上では、非常に効果的です。

膨大な数値のコンテンツを伴うテーブルに対しては、等幅フォントを使うと、ユーザーはパターンが見やすくなるでしょう。ユーザーエージェントがボーダーをレンダリングしない状況においては、なおさらです。（残念なことに、歴史的な理由で、一般にデフォルトは、テーブルにボーダーをレンダリングしません。）

スピーチ・メディアにおいては、テーブルのセルは、そのセルのコンテンツが読まれる前に、対応するヘッダーが読み上げられることで、区別できます。ユーザーは、テーブルをグリッド単位で渡り歩くことも可能です。ソース順にテーブルのすべてのコンテンツをつなげられるわけではありません。

ウェブ制作者は、これらの効果を実現するために CSS を使うことが推奨されます。

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