HTML

[Exposed=Window]
interface HTMLTableElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute HTMLTableCaptionElement? caption;
  HTMLTableCaptionElement createCaption();
  [CEReactions] undefined deleteCaption();

  [CEReactions] attribute HTMLTableSectionElement? tHead;
  HTMLTableSectionElement createTHead();
  [CEReactions] undefined deleteTHead();

  [CEReactions] attribute HTMLTableSectionElement? tFoot;
  HTMLTableSectionElement createTFoot();
  [CEReactions] undefined deleteTFoot();

  [SameObject] readonly attribute HTMLCollection tBodies;
  HTMLTableSectionElement createTBody();

  [SameObject] readonly attribute HTMLCollection rows;
  HTMLTableRowElement insertRow(optional long index = -1);
  [CEReactions] undefined deleteRow(long index);

  // also has obsolete members
};

table要素はテーブル形式で、複数の次元を持つデータを表す。

table要素は、テーブルモデルに参加する。テーブルは、行、列、およびその子孫によって与えられるセルを持つ。行と列はグリッドを形成する。テーブルのセルは完全に重複することなく、グリッドをカバーしなければならない。

この適合性要件が満たされるかどうかを決定するための正確な規則は、テーブルモデルの説明に記載される。

著者は、複雑なテーブルをどのように解釈するかを記述する情報を提供するよう推奨される。そのような情報を提供する方法についての手引きは後述のとおりである。

テーブルは、レイアウトの補助として使用されてはならない。歴史的に、一部のウェブ著者は、自身のページのレイアウトを制御する方法としてHTMLのテーブルを誤用している。そのような文書から表形式のデータの抽出を試みるツールは極めて混乱する結果を得ることになるため、この使用法は不適合である。具体的に、スクリーンリーダーのようなアクセシビリティツールのユーザーは、テーブルがレイアウトに使用されるテーブルをもつページをナビゲートするのに非常に困難であることを見つける可能性が高い。

レイアウトに対してHTMLテーブルを使用する代わりに、CSSグリッドレイアウト、CSSフレキシブルボックスレイアウト（"flexbox"）、CSSマルチカラムレイアウト、CSSポジショニング、CSSテーブルモデルなど、さまざまな方法がある。[CSS]

テーブルは、理解しかつナビゲートするために複雑になることがある。ユーザーエージェントが（不適合な）レイアウトテーブルとしてテーブルを分類していない限り、ユーザーの手助けをするために、ユーザーエージェントは、テーブルのセルを互いに明確に示すべきである。

著者および実装者は、ユーザーに対してテーブルをより簡単に移動するために、下記のテーブルデザインテクニックの使用を検討することを推奨する。

ユーザーエージェント、特に任意のコンテンツ上でテーブルの分析を行うものは、どのテーブルが実際にデータを含み、どのテーブルが単にレイアウトのために使用されているかを決定するためのヒューリスティックを見つけることを勧める。この仕様は、正確なヒューリスティックを定義しないが、以下が可能な指標として提案される：

Feature	Indication
値`presentation`をもつ`role`属性の使用	おそらくレイアウトテーブル
不適合値0をもつ不適合`border`属性の使用	おそらくレイアウトテーブル
値0をもつ不適合`cellspacing`および`cellpadding`の使用	おそらくレイアウトテーブル
`caption`、`thead`または`th`要素の使用	おそらく非レイアウトテーブル
`headers`および`scope`属性の使用	おそらく非レイアウトテーブル
0以外の値をもつ不適合`border`属性の使用	おそらく非レイアウトテーブル
CSSを使用して設定された明示的な可視ボーダー	おそらく非レイアウトテーブル
`summary`属性の使用	よい指標ではない（歴史的にレイアウトと非レイアウトテーブルの両方は、この属性を与えられている）

上記の提案が正しくないことが非常にありうる。Implementers are urged to provide feedback elaborating on their experiences with trying to create a layout table detection heuristic.

table要素が（不適合）summary属性を持ち、かつユーザーエージェントがレイアウトテーブルとしてテーブルに分類されていない場合、ユーザーエージェントは、ユーザーにその属性のコンテンツを報告してもよい。

table.caption [ = value ] HTMLTableElement/caption Support in all current engines. Firefox1+Safari3+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer5.5+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

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

caption要素を置き換えるために、設定が可能である。

caption = table.createCaption() HTMLTableElement/createCaption Support in all current engines. Firefox1+Safari3+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer5.5+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

表がcaption要素を持つことを保証し、それを返す。

table.deleteCaption() HTMLTableElement/deleteCaption Support in all current engines. Firefox1+Safari3+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer5.5+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

表がcaption要素を持たないことを保証する。

table.tHead [ = value ] HTMLTableElement/tHead Support in all current engines. Firefox1+Safari3+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer5.5+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

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

thead要素を置き換えるために、設定が可能である。新しい値がthead要素でない場合、"HierarchyRequestError" DOMExceptionを投げる。

thead = table.createTHead() HTMLTableElement/createTHead Support in all current engines. Firefox1+Safari3+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer5.5+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

表がthead要素を持つことを保証し、それを返す。

table.deleteTHead() HTMLTableElement/deleteTHead Support in all current engines. Firefox1+Safari3+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer5.5+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

表がthead要素を持たないことを保証する。

table.tFoot [ = value ] HTMLTableElement/tFoot Support in all current engines. Firefox1+Safari3+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer5.5+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

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

tfoot要素を置き換えるために、設定が可能である。新しい値がtfoot要素でない場合、"HierarchyRequestError" DOMExceptionを投げる。

tfoot = table.createTFoot() HTMLTableElement/createTFoot Support in all current engines. Firefox1+Safari3+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer5.5+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

表がtfoot要素を持つことを保証し、それを返す。

table.deleteTFoot() HTMLTableElement/deleteTFoot Support in all current engines. Firefox1+Safari3+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer5.5+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

表がtfoot要素を持たないことを保証する。

table.tBodies HTMLTableElement/tBodies Support in all current engines. Firefox1+Safari3+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer5.5+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

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

tbody = table.createTBody() HTMLTableElement/createTBody Support in all current engines. Firefox25+Safari6+Chrome20+ Opera?Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

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

table.rows HTMLTableElement/rows Support in all current engines. Firefox1+Safari3+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer5.5+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

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

tr = table.insertRow([ index ]) HTMLTableElement/insertRow Support in all current engines. Firefox1+Safari4+Chrome1+ Opera10+Edge79+ Edge (Legacy)12+Internet Explorer5.5+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android10.1+

必要であれば、tbody要素とともに、tr要素を作成し、引数で指定された位置にあるテーブルへそれらを挿入して、trを返す。

位置は、テーブルの行を基準にする。引数が省略されている場合、デフォルトでインデックス-1は、テーブルの末尾に挿入することと同じである。

指定された位置が-1未満または行数より大きい場合、"IndexSizeError" DOMExceptionを投げる。

table.deleteRow(index) HTMLTableElement/deleteRow Support in all current engines. Firefox1+Safari3+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer5.5+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

テーブルで指定された位置とともにtr要素を削除する。

位置は、テーブルの行を基準にする。インデックス-1は、テーブルの最後の行を削除するのと同じである。

指定された位置が-1未満または最終行のインデックスよりも大きい、または行が存在しない場合、"IndexSizeError" DOMExceptionを投げる。

To create a table element given a table element tableElement and a string localName, return the result of creating an element given tableElement's node document, localName, and the HTML namespace.

The caption getter steps are to return the first caption element child of this, if any; otherwise null.

The caption setter steps are:

Remove the first caption element child of this, if any.
If the given value is not null, then insert it as the first node of this.

The createCaption() method steps are:

If this has a caption element child, then return the first such element.
Let caption be the result of creating a table element given this and "caption".
Insert caption as the first node of this.
Return caption.

The deleteCaption() method steps are to remove the first caption element child of this, if any.

The tHead getter steps are to return the first thead element child of this, if any; otherwise null.

The tHead setter steps are:

If the given value is neither null nor a thead element, then throw a "HierarchyRequestError" DOMException.
Remove the first thead element child of this, if any.
If the given value is not null, then insert it immediately before the first element child of this that is neither a caption element nor a colgroup element, if any; otherwise insert it at the end of this.

The createTHead() method steps are:

If this has a thead element child, then return the first such element.
Let thead be the result of creating a table element given this and "thead".
Insert thead immediately before the first element child of this that is neither a caption element nor a colgroup element, if any; otherwise insert thead at the end of this.
Return thead.

The deleteTHead() method steps are to remove the first thead element child of this, if any.

The tFoot getter steps are to return the first tfoot element child of this, if any; otherwise null.

The tFoot setter steps are:

If the given value is neither null nor a tfoot element, then throw a "HierarchyRequestError" DOMException.
Remove the first tfoot element child of this, if any.
If the given value is not null, then insert it at the end of this.

The createTFoot() method steps are:

If this has a tfoot element child, then return the first such element.
Let tfoot be the result of creating a table element given this and "tfoot".
Insert tfoot at the end of this.
Return tfoot.

The deleteTFoot() method steps are to remove the first tfoot element child of this, if any.

The tBodies getter steps are to return an HTMLCollection rooted at this, whose filter matches only tbody elements that are children of this.

The createTBody() method steps are:

Let tbody be the result of creating a table element given this and "tbody".
Insert tbody immediately after the last tbody element child of this, if any; otherwise insert tbody at the end of this.
Return tbody.

The rows getter steps are to return an HTMLCollection rooted at this, whose filter matches only tr elements that are either children of this, or children of thead, tbody, or tfoot elements that are themselves children of this. The elements in the collection must be ordered such that those elements whose parent is a thead are included first, in tree order, followed by those elements whose parent is either this or a tbody element, again in tree order, followed finally by those elements whose parent is a tfoot element, still in tree order.

The insertRow(index) method steps are:

If index is less than −1 or greater than the number of elements in the rows collection, then throw an "IndexSizeError" DOMException.
Let tr be the result of creating a table element given this and "tr".
If the rows collection has zero elements in it, and this has no tbody elements in it:
1. Let tbody be the result of creating a table element given this and "tbody".
2. Append tr to tbody.
3. Append tbody to this.
Otherwise, if the rows collection has zero elements in it, then append tr to the last tbody element in this.
Otherwise, if index is −1 or equal to the number of items in the rows collection, then append tr to the parent of the last tr element in the rows collection.
Otherwise, insert tr immediately before the indexth tr element in the rows collection, in the same parent.
Return tr.

The deleteRow(index) method steps are:

If index is less than −1 or greater than or equal to the number of elements in the rows collection, then throw an "IndexSizeError" DOMException.
If index is −1, then remove the last element in the rows collection from its parent, or do nothing if the rows collection is empty.
Otherwise, remove the indexth element in the rows collection from its parent.

これは、数独パズルをマークアップするために使用されているテーブルの例である。そのようなテーブルで必要のない、ヘッダーの欠如を観察する。

<style>
 #sudoku { border-collapse: collapse; border: solid thick; }
 #sudoku colgroup, table#sudoku tbody { border: solid medium; }
 #sudoku td { border: solid thin; height: 1.4em; width: 1.4em; text-align: center; padding: 0; }
</style>
<h1>Today's Sudoku</h1>
<table id="sudoku">
 <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>

4.9.1.1 表を記述するためのテクニック

1行目のヘッダーと1列目のヘッダーをもつセルの1つ以上のグリッドからなるテーブルに対して、および一般に読者がコンテンツを理解する難しさがあるかもしれない場所で任意のテーブルに対して、著者はテーブルを導入する説明情報を含めるべきである。この情報はすべてのユーザーに対して有用であるが、たとえばスクリーンリーダーのユーザーなど、テーブルを見ることができないユーザーに対して特に有用である。

そのような説明情報は、テーブルの目的を紹介し、その基本的なセル構造を要約し、傾向やパターンを強調し、および一般にどのようにテーブルを使用するかをユーザーに教えるべきである。

たとえば、次の表において：

Characteristics with positive and negative sides
Negative	Characteristic	Positive
Sad	Mood	Happy
Failing	Grade	Passing

"左側の列の否定的な側面および右側の列に肯定的な側面とともに、特性は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>

必要に応じて著者はまた、他の技術または上記の技術の組み合わせを使用してもよい。

もちろん、最良の選択肢は、テーブルがレイアウトされる理由を説明する記述を書くことよりもむしろ、一切の説明を必要としないようにテーブルを調整することである。

上記の例で使用されるテーブルの場合、ヘッダーが上と左側に来るように、テーブルの単純な再配置は、headers属性の使用の要求を削除するだけでなく、説明の要求を削除する。

<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>

4.9.1.2 テーブルデザインのためのテクニック

良いテーブルデザインは、テーブルがより読みやすく、使いやすくするための鍵となる。

視覚メディアにおいて、列と行の境界を提供して行の背景を交互にすることは、複雑なテーブルをより読みやすくするために非常に効果的である。

大量のコンテンツを持つテーブルに対して、特に、ユーザーエージェントがボーダーをレンダリングしない状況において等幅フォントを使用することは、ユーザーにパターンに気づくのを助けることができる。（残念ながら、歴史的な理由により、テーブルのボーダーをレンダリングしないことは、共通のデフォルトである。）

音声メディアにおいて、テーブルのセルは、セルの内容を読む前に対応するヘッダーを報告することによって、およびソースの順序でテーブルの内容全体をシリアライズするのではなく、むしろグリッド方式でテーブルをナビゲートできるようにすることで区別できる。

著者は、これらの効果を達成するためにCSSを使用するよう推奨される。

ユーザーエージェントは、ページがCSSを使用せずかつテーブルがレイアウトテーブルに分類されないときはいつでも、このテクニックを使用してテーブルをレンダリングすることが勧められる。

4.9.2 `caption`要素

Element/caption

Support in all current engines.

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (Legacy)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLTableCaptionElement

Support in all current engines.

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (Legacy)12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

カテゴリー：

なし。

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

table要素の最初の子として。

コンテンツモデル：

フローコンテンツ、ただしtable要素の子孫を除く。

text/htmlにおけるタグ省略：

caption要素の直後がASCII空白文字またはコメントでない場合、caption要素の終了タグは省略することができる。

[Exposed=Window]
interface HTMLTableCaptionElement : HTMLElement {
  [HTMLConstructor] constructor();

  // also has obsolete members
};

要素が親を持ち、かつ、それがtable要素である場合、caption要素は、その親であるtableのタイトルを表す。

caption要素は、テーブルモデルに参加する。

figure要素の中で、figcaption以外のコンテンツがtable要素がのみである場合、figcaptionを選択してcaption要素を省略すべきである。

キャプションは、テーブルに対するコンテキストを導入でき、大幅に理解しやすくする。

たとえば、次のテーブルを考えてみる：

	1	2	3	4	5	6
1	2	3	4	5	6	7
2	3	4	5	6	7	8
3	4	5	6	7	8	9
4	5	6	7	8	9	10
5	6	7	8	9	10	11
6	7	8	9	10	11	12

理論的に考えれば、このテーブルは明確でない。しかし、キャプションで（本文での参照のために）テーブルの番号を与え、その使用方法を説明することで、さらに理解できるようになる：

<caption>
<p>Table 1.
<p>This table shows the total score obtained from rolling two
six-sided dice. The first row represents the value of the first die,
the first column the value of the second die. The total is given in
the cell that corresponds to the values of the two dice.
</caption>

以下は、より多くのコンテキストをユーザーに提供する：

Table 1.
This table shows the total score obtained from rolling two six-sided dice. The first row represents the value of the first die, the first column the value of the second die. The total is given in the cell that corresponds to the values of the two dice.
	1	2	3	4	5	6
1	2	3	4	5	6	7
2	3	4	5	6	7	8
3	4	5	6	7	8	9
4	5	6	7	8	9	10
5	6	7	8	9	10	11
6	7	8	9	10	11	12

4.9.3 `colgroup`要素

Element/colgroup

Support in all current engines.

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (Legacy)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLTableColElement

Support in all current engines.

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (Legacy)12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

カテゴリー：

なし。

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

table要素の子として、任意のcaption要素の後かつ任意のthead、tbody、tfoot、およびtr要素の前。

コンテンツモデル：

span属性が存在する場合：Nothing。

span属性が存在しない場合：0個以上のcol要素およびtemplate要素。

text/htmlにおけるタグ省略：

colgroup要素内の最初の文がcol要素である場合、かつ終了タグが省略されている別のcolgroup要素の直前に存在しない場合、colgroup要素の開始タグは省略することができる。（要素が空である場合、省略できない。）

colgroup要素の直後がASCII空白文字またはコメントでない場合、colgroup要素の終了タグは省略することができる。

span — 要素がまたがる列の数

属性spanを伴ってデフォルト。

[Exposed=Window]
interface HTMLTableColElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, Reflect, ReflectDefault=1, ReflectRange=(1, 1000)] attribute unsigned long span;

  // also has obsolete members
};

この要素がtable要素の親を持つ場合、colgroup要素は、親であるtableで1つ以上の列のグループを表す。

colgroup要素が一切col要素を含まない場合、要素は、値が0より大きくかつ1000以下の妥当な負でない整数でなければならない、指定されたspanコンテンツ属性を持ってもよい。

colgroup要素および要素のspanは、テーブルモデルに参加する。

4.9.4 `col`要素

Element/col

Support in all current engines.

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (Legacy)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

カテゴリー：: なし。
この要素を使用できるコンテキスト：: span属性を持たないcolgroup要素の子として。
コンテンツモデル：: Nothing。
text/htmlにおけるタグ省略：: 終了タグなし。
コンテンツ属性：: グローバル属性; span — 要素がまたがる列の数
アクセシビリティの考慮：: 著者向け。; 実装者向け。
サニタイゼーション：: 属性spanを伴ってデフォルト。
DOMインターフェイス：: HTMLTableColElement、colgroup要素の場合と同様。

col要素が親を持ち、それがtable要素が親であるcolgroup要素自体である場合は、col要素は、そのcolgroupによって表される列グループ内の1つ以上の列を表す。

要素は、値が0より大きくかつ1000以下の妥当な負でない整数でなければならない、指定されたspanコンテンツ属性を持ってもよい。

col要素および要素のspanは、テーブルモデルに参加する。

4.9.5 `tbody`要素

Element/tbody

Support in all current engines.

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge (Legacy)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLTableSectionElement

Support in all current engines.

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (Legacy)12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

カテゴリー：

なし。

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

table要素の子として、任意のcaption、colgroup、およびthead要素の後、ただしtable要素の子であるtrが一切存在しない場合のみに限る。

コンテンツモデル：

0個以上のtr要素およびスクリプトサポート要素。

text/htmlにおけるタグ省略：

tbody要素内の最初の文がtr要素である場合、かつこの要素が終了タグが省略されているtbody、thead、またはtfoot要素の直前に存在しない場合、tbody要素の開始タグは省略することができる。（要素が空である場合、省略できない。）

tbody要素が別のtbodyまたはtfoot要素の直後に存在する場合、または親要素に追加のコンテンツが存在しない場合、tbody要素の終了タグは省略することができる。

[Exposed=Window]
interface HTMLTableSectionElement : HTMLElement {
  [HTMLConstructor] constructor();

  [SameObject] readonly attribute HTMLCollection rows;
  HTMLTableRowElement insertRow(optional long index = -1);
  [CEReactions] undefined deleteRow(long index);

  // also has obsolete members
};

HTMLTableSectionElementインターフェイスは、thead要素とtfoot要素にも使用される。

tbody要素がtableである親を持つ場合、tbody要素は、親table要素に対しデータの本体を構成する行のブロックを表す。

tbody要素は、テーブルモデルに参加する。

tbody.rows

テーブルセクションのtr要素のHTMLCollectionを返す。

tr = tbody.insertRow([ index ])

tr要素を作成し、引数で指定された場所でテーブルセクションにこれを挿入し、trを返す。

位置は、テーブルの行を基準にする。引数が省略されている場合、デフォルトでインデックス-1は、テーブルセクションの末尾に挿入することと同じである。

指定された位置が-1未満または行数より大きい場合、"IndexSizeError" DOMExceptionを投げる。

tbody.deleteRow(index)

テーブルセクションで指定された位置とともにtr要素を削除する。

位置は、テーブルの行を基準にする。インデックス-1は、テーブルの最後の行を削除するのと同じである。

指定された位置が-1未満または最終行のインデックスよりも大きい、または行が存在しない場合、"IndexSizeError" DOMExceptionを投げる。

The rows attribute must return an HTMLCollection rooted at this element, whose filter matches only tr elements that are children of this element.

The insertRow(index) method must act as follows:

If index is less than −1 or greater than the number of elements in the rows collection, throw an "IndexSizeError" DOMException.
Let table row be the result of creating an element given this element's node document, "tr", and the HTML namespace.
If index is −1 or equal to the number of items in the rows collection, then append table row to this element.
Otherwise, insert table row as a child of this element, immediately before the indexth tr element in the rows collection.
Return table row.

The deleteRow(index) method must, when invoked, act as follows:

If index is less than −1 or greater than or equal to the number of elements in the rows collection, then throw an "IndexSizeError" DOMException.
If index is −1, then remove the last element in the rows collection from this element, or do nothing if the rows collection is empty.
Otherwise, remove the indexth element in the rows collection from this element.

4.9.6 `thead`要素

Element/thead

Support in all current engines.

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge (Legacy)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

カテゴリー：: なし。
この要素を使用できるコンテキスト：: table要素の子として、任意のcaptionおよびcolgroup要素の後、および任意のtbody、tfoot、およびtr要素の前、ただしtableの子であるthead要素以外である場合のみに限る。
コンテンツモデル：: 0個以上のtr要素およびスクリプトサポート要素。
text/htmlにおけるタグ省略：: thead要素がtbodyまたはtfoot要素の直後に存在する場合、thead要素の終了タグは省略することができる。
コンテンツ属性：: グローバル属性
アクセシビリティの考慮：: 著者向け。; 実装者向け。
サニタイゼーション：: デフォルト。
DOMインターフェイス：: tbody要素に対して定義されるものとして、HTMLTableSectionElementを使用する。

thead要素は、 thead要素が親を持ち、かつそれがtableある場合、親table要素の列ラベル（ヘッダー）および補助的な非ヘッダーセルで構成される行のブロックを表す。

thead要素は、テーブルモデルに参加する。

この例は、thead要素が使われる様子を示す。thead要素におけるthとtdの両方の使い方に注意する。1行目はヘッダーであり、2行目は表に記入する方法の説明である。

<table>
 <caption> School auction sign-up sheet </caption>
 <thead>
  <tr>
   <th><label for=e1>Name</label>
   <th><label for=e2>Product</label>
   <th><label for=e3>Picture</label>
   <th><label for=e4>Price</label>
  <tr>
   <td>Your name here
   <td>What are you selling?
   <td>Link to a picture
   <td>Your reserve price
 <tbody>
  <tr>
   <td>Ms Danus
   <td>Doughnuts
   <td><img src="https://example.com/mydoughnuts.png" title="Doughnuts from Ms Danus">
   <td>$45
  <tr>
   <td><input id=e1 type=text name=who required form=f>
   <td><input id=e2 type=text name=what required form=f>
   <td><input id=e3 type=url name=pic form=f>
   <td><input id=e4 type=number step=0.01 min=0 value=0 required form=f>
</table>
<form id=f action="/auction.cgi">
 <input type=button name=add value="Submit">
</form>

4.9.7 `tfoot`要素

Element/tfoot

Support in all current engines.

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge (Legacy)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

カテゴリー：: なし。
この要素を使用できるコンテキスト：: table要素の子として、任意のcaption、colgroup、thead、tbodyおよびtr要素の後、ただしtableの子であるtfoot要素以外である場合のみに限る。
コンテンツモデル：: 0個以上のtr要素およびスクリプトサポート要素。
text/htmlにおけるタグ省略：: 親要素に追加のコンテンツが存在しない場合、tfoot要素の終了タグは省略することができる。
コンテンツ属性：: グローバル属性
アクセシビリティの考慮：: 著者向け。; 実装者向け。
サニタイゼーション：: デフォルト。
DOMインターフェイス：: tbody要素に対して定義されるものとして、HTMLTableSectionElementを使用する。

tfoot要素がtableである親を持つ場合、tfoot要素は、親table要素に対し列の合計（フッター）を構成する行のブロックを表す。

tfoot要素は、テーブルモデルに参加する。

4.9.8 `tr`要素

Element/tr

Support in all current engines.

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge (Legacy)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLTableRowElement

Support in all current engines.

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (Legacy)12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

カテゴリー：

なし。

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

thead要素の子として。

tbody要素の子として。

tfoot要素の子として。

table要素の子として、任意のcaption、colgroup、およびthead要素の後、ただしtable要素の子であるtbodyが一切存在しない場合に限る。

コンテンツモデル：

0個以上のtd、th、およびスクリプトサポート要素。

text/htmlにおけるタグ省略：

tr要素が別のtr要素の直後に存在する場合、または親要素に追加のコンテンツが存在しない場合、tr要素の終了タグは省略することができる。

[Exposed=Window]
interface HTMLTableRowElement : HTMLElement {
  [HTMLConstructor] constructor();

  readonly attribute long rowIndex;
  readonly attribute long sectionRowIndex;
  [SameObject] readonly attribute HTMLCollection cells;
  HTMLTableCellElement insertCell(optional long index = -1);
  [CEReactions] undefined deleteCell(long index);

  // also has obsolete members
};

tr要素は、テーブルでセルの行を表す。

tr要素は、テーブルモデルに参加する。

tr.rowIndex HTMLTableRowElement/rowIndex Support in all current engines. Firefox1+Safari3+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer5.5+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

テーブルのrowsリストで行の位置を返す。

要素がテーブル内でない場合、-1を返す。

tr.sectionRowIndex

テーブルセクションのrowsリストで行の位置を返す。

要素がテーブルセクション内でない場合、-1を返す。

tr.cells

行のtdおよびth要素のHTMLCollectionを返す。

cell = tr.insertCell([ index ]) HTMLTableRowElement/insertCell Support in all current engines. Firefox1+Safari3+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer5.5+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

td要素を作成し、引数で指定された場所でテーブル行にこれを挿入し、tdを返す。

位置は、行のセルを基準にする。引数が省略されている場合、デフォルトでインデックス-1は、行の末尾に挿入することと同じである。

指定された位置が-1未満またはセル数より大きい場合、"IndexSizeError" DOMExceptionを投げる。

tr.deleteCell(index)

行で指定された位置とともにtrまたはth要素を削除する。

位置は、行のセルを基準にする。インデックス-1は、行の最後のセルを削除するのと同じである。

指定された位置が-1未満または最終セルのインデックスよりも大きい、またはセルが存在しない場合、"IndexSizeError" DOMExceptionを投げる。

The rowIndex attribute must, if this element has a parent table element, or a parent tbody, thead, or tfoot element and a grandparent table element, return the index of this tr element in that table element's rows collection. If there is no such table element, then the attribute must return −1.

The sectionRowIndex attribute must, if this element has a parent table, tbody, thead, or tfoot element, return the index of the tr element in the parent element's rows collection (for tables, that's HTMLTableElement's rows collection; for table sections, that's HTMLTableSectionElement's rows collection). If there is no such parent element, then the attribute must return −1.

The cells attribute must return an HTMLCollection rooted at this tr element, whose filter matches only td and th elements that are children of the tr element.

The insertCell(index) method must act as follows:

If index is less than −1 or greater than the number of elements in the cells collection, then throw an "IndexSizeError" DOMException.
Let table cell be the result of creating an element given this tr element's node document, "td", and the HTML namespace.
If index is equal to −1 or equal to the number of items in cells collection, then append table cell to this tr element.
Otherwise, insert table cell as a child of this tr element, immediately before the indexth td or th element in the cells collection.
Return table cell.

The deleteCell(index) method must act as follows:

If index is less than −1 or greater than or equal to the number of elements in the cells collection, then throw an "IndexSizeError" DOMException.
If index is −1, then remove the last element in the cells collection from its parent, or do nothing if the cells collection is empty.
Otherwise, remove the indexth element in the cells collection from its parent.

4.9.9 `td`要素

Element/td

Support in all current engines.

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge (Legacy)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLTableCellElement

Support in all current engines.

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (Legacy)12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

カテゴリー：

なし。

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

tr要素の子として。

コンテンツモデル：

フローコンテンツ。

text/htmlにおけるタグ省略：

td要素が別のtdまたはth要素の直後に存在する場合、または親要素に追加のコンテンツが存在しない場合、td要素の終了タグは省略することができる。

コンテンツ属性：

グローバル属性

colspan — セルがまたがる列の数

rowspan — セルがまたがる行の数

headers — 該当セルに対するヘッダーセル

属性colspan、headers、rowspanを伴ってデフォルト。

DOMインターフェイス：

[Exposed=Window]
interface HTMLTableCellElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, Reflect, ReflectDefault=1, ReflectRange=(1, 1000)] attribute unsigned long colSpan;
  [CEReactions, Reflect, ReflectDefault=1, ReflectRange=(0, 65534)] attribute unsigned long rowSpan;
  [CEReactions, Reflect] attribute DOMString headers;
  readonly attribute long cellIndex;

  [CEReactions] attribute DOMString scope; // only conforming for th elements
  [CEReactions, Reflect] attribute DOMString abbr;  // only conforming for th elements

  // also has obsolete members
};

HTMLTableCellElementインターフェイスはまた、th要素によっても使用される。

td要素は、テーブルでセルのデータを表す。

td要素および要素のcolspan、rowspan、およびheaders属性は、テーブルモデルに参加する。

特に非視覚環境または2Dグリッドが非現実的であるようなテーブルを表示する場合に、ユーザーエージェントは、セルのコンテンツをレンダリングするときにセルのユーザーコンテキストを与えてもよい。たとえば、テーブルモデル内の位置を与える、または（ヘッダーセルを割り当てるためのアルゴリズムによって決定されるような）セルのヘッダーセルを一覧表示するなど。セルのヘッダーセルが表示されてされている場合、もしあれば、ユーザーエージェントは、ヘッダーセル自身のコンテンツの代わりに、それらのヘッダーセルのabbr属性の値を使用してもよい。

この例において、編集可能なセルのグリッド（基本的にシンプルなスプレッドシート）からなるウェブアプリケーションの断片を見てみる。セルの1つは、その上のセルの合計を表示するように構成されている。3つは、td要素の代わりにth要素を使用する見出しとしてマークされている。スクリプトは、合計を維持するためにこれらの要素にイベントハンドラーを結びつける。

<table>
 <tr>
  <th><input value="Name">
  <th><input value="Paid ($)">
 <tr>
  <td><input value="Jeff">
  <td><input value="14">
 <tr>
  <td><input value="Britta">
  <td><input value="9">
 <tr>
  <td><input value="Abed">
  <td><input value="25">
 <tr>
  <td><input value="Shirley">
  <td><input value="2">
 <tr>
  <td><input value="Annie">
  <td><input value="5">
 <tr>
  <td><input value="Troy">
  <td><input value="5">
 <tr>
  <td><input value="Pierce">
  <td><input value="1000">
 <tr>
  <th><input value="Total">
  <td><output value="1060">
</table>

4.9.10 `th`要素

Element/th

Support in all current engines.

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge (Legacy)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

カテゴリー：: なし。
この要素を使用できるコンテキスト：: tr要素の子として。
コンテンツモデル：: フローコンテンツ、ただしheader、footer、セクショニングコンテンツ、またはヘディングコンテンツの子孫を除く。
text/htmlにおけるタグ省略：: th要素が別のtdまたはth要素の直後に存在する場合、または親要素に追加のコンテンツが存在しない場合、th要素の終了タグは省略することができる。
コンテンツ属性：: グローバル属性; colspan — セルがまたがる列の数; rowspan — セルがまたがる行の数; headers — 該当セルに対するヘッダーセル; scope — ヘッダーセルがどのセルに適用するかを指定する; abbr — 他のコンテキスト内のセルを参照するときにヘッダーセルに使用する代替ラベル
アクセシビリティの考慮：: 著者向け。; 実装者向け。
サニタイゼーション：: 属性abbr、colspan、headers、rowspan、scopeを伴ってデフォルト。
DOMインターフェイス：: td要素に対して定義されるものとして、HTMLTableCellElementを使用する。

th要素は、テーブルでヘッダーセルを表す。

th要素は、指定されたscopeコンテンツ属性を持ってもよい。

scope属性は、次のキーワードと状態を持つ列挙属性である：

キーワード	状態	概要
`row`	Row	ヘッダーセルは、同じ行の後続セルの一部に適用される。
`col`	Column	ヘッダーセルは、同じ列の後続セルの一部に適用される。
`rowgroup`	Row Group	ヘッダーセルは、行グループの残りのすべてのセルに適用される。
`colgroup`	Column Group	ヘッダーセルは、列グループの残りのすべてのセルに適用される。

この属性の欠損値のデフォルトと無効値のデフォルトは両方ともAuto状態である。（この状態では、ヘッダーセルはコンテキストに基づいて選択された一連のセルに適用される。）

th要素のscope属性は、その要素がrow groupに固定されていない場合はrow group状態であってはならず、その要素がcolumn groupに固定されない場合はrow group状態であってはならない。

th要素は、指定されたabbrコンテンツ属性を持ってもよい。その値は、（たとえばデータセルに適用するヘッダーセルを記述する場合など）他のコンテキスト内のセルを参照するときに使用されるヘッダーセルの代替ラベルでなければならない。通常これは、完全なヘッダーセルの略語であるが、拡大または単なる別の言い回しでも構わない。

th要素および要素のcolspan、rowspan、headersおよびscope属性は、テーブルモデルに参加する。

次の例は、scope属性のrowgroup値がヘッダーセルが適用するデータセルにどのように影響するかを示す。

ここで、テーブルを示すマークアップ断片は、次のとおり：

<table>
 <thead>
  <tr> <th> ID <th> Measurement <th> Average <th> Maximum
 <tbody>
  <tr> <td> <th scope=rowgroup> Cats <td> <td>
  <tr> <td> 93 <th> Legs <td> 3.5 <td> 4
  <tr> <td> 10 <th> Tails <td> 1 <td> 1
 <tbody>
  <tr> <td> <th scope=rowgroup> English speakers <td> <td>
  <tr> <td> 32 <th> Legs <td> 2.67 <td> 4
  <tr> <td> 35 <th> Tails <td> 0.33 <td> 1
</table>

これは、次の表をもたらす：

ID	Measurement	Average	Maximum
	Cats
93	Legs	3.5	4
10	Tails	1	1
	English speakers
32	Legs	2.67	4
35	Tails	0.33	1

最初の行のヘッダーはすべて、その列の行まで直接適用される。

行グループ状態のscope属性をもつヘッダーは、最初の列のセルを除く行グループ内のすべてのセルに適用される。

残りのヘッダーは右側のセルにのみ適用される。

4.9.11 `td`と`th`要素の共通属性

tdおよびth要素は、colspanコンテンツ属性を指定してもよい。その値は、0より大きくかつ1000以下の妥当な負でない整数を指定しなければならない。

tdおよびth要素には、rowspanコンテンツ属性を指定指定してもよい。その値は、65534以下の妥当な負でない整数でなければならない。この属性の場合、値0は、セルが行グループ内の残りのすべての行にまたがることを意味する。

これらの属性は、セルがまたがるようにそれぞれの列と行の数を与える。この属性は、テーブルモデルの記述で説明されるような、セルに重なるために使用されてはならない。

tdとth要素は、指定されたheadersコンテンツ属性を持ってもよい。headers属性が指定される場合、順不同の一意な空白区切りトークンの集合からなる文字列を含まなければならず、他のトークンと同一のものはなく、それぞれがtdまたはth要素と同じテーブルに参加しているth要素のIDの値を持たなければならず、それぞれが、（テーブルモデルによって定義されるように）tdまたはth要素と同じテーブルに参加しているth要素のIDの値を持たなければならない。

IDをもつth要素のidは、値がそれらのトークンID idの1つとして含むheaders属性を持つ同じテーブルですべてのtdとth要素によるdirectly targetedといわれる。AがBに直接目標とされる、または要素Bによって要素C自体が目標とされ、かつ要素AがCによって直接目標とされるかのいずれかの場合、th要素Aはthまたはtd要素Bの目標にされるといわれる。

th要素は、それ自体が目標とならない。

colspan、rowspan、およびrowspan属性は、テーブルモデルに参加する。

cell.cellIndex

行のcellsリストでセルの位置を返す。より前のセルが複数の行または列をカバーするかもしれないので、これは必ずしもテーブルにおけるセルのx方向の位置に対応しない。

要素が行にない場合、-1を返す。

要素が親tr要素を持つ場合、cellIndex IDL属性は、親要素のcellsコレクションにおけるセルの要素のインデックスを返さなければならない。If there is no such parent element, then the attribute must return −1.

scope IDL属性は、既知の値に制限され、同じ名前のコンテンツ属性を反映しなければならない。

4.9.12 Processing model

さまざまなテーブル要素およびそのコンテンツ属性は、テーブルモデルを協力して定義する。

テーブルは、座標(x, y)をもつスロットの二次元グリッド上に整列されるセルからなる。グリッドは有限であり、空または1つ以上のいずれかのスロットを持つ。グリッドが1つ以上のスロットを持つ場合、x座標は常に0 ≤ x < x_widthの範囲にあり、y座標は常に0 ≤ y < y_heightの範囲にある。x_widthとy_heightのいずれかまたは両方が0である場合、テーブルは空である（何のスロットを持たない）。テーブルは、table要素に対応する。

A cell is a set of slots anchored at a slot (cell_x, cell_y), and with a particular width and height such that the cell covers all the slots with coordinates (x, y) where cell_x ≤ x < cell_x+width and cell_y ≤ y < cell_y+height. Cells can either be data cells or header cells. Data cells correspond to td elements, and header cells correspond to th elements. 両方の種類のセルは、0個以上の関連するヘッダーセルを持つことができる。

特定のエラーの場合、2つのセルが同一のスロットを占有することは可能である。

A row is a complete set of slots from x=0 to x=x_width-1, for a particular value of y. Rows usually correspond to tr elements, though a row group can have some implied rows at the end in some cases involving cells spanning multiple rows.

A column is a complete set of slots from y=0 to y=y_height-1, for a particular value of x. Columns can correspond to col elements. In the absence of col elements, columns are implied.

A row group is a set of rows anchored at a slot (0, group_y) with a particular height such that the row group covers all the slots with coordinates (x, y) where 0 ≤ x < x_width and group_y ≤ y < group_y+height. Row groups correspond to tbody, thead, and tfoot elements. 各行は、行グループに必須ではない。

列グループは、group_x ≤ x < group_x+widthおよび0 ≤ y < y_heightの条件で座標(x, y)をもつすべてのスロットを覆うような固有のwidthをもつスロット(group_x, 0)に固定される列の集合である。列グループは、colgroupに対応する。必ずしも各列は、列グループで必須でない。

行グループは、互いに重なることができない。同様に、列グループは、互いに重なることができない。

セルは、2つ以上の行グループに由来するスロットを占めることができない。しかし、セルが複数の列グループに存在することは可能である。1つのセルの一部を形成するすべてのスロットは、0または1個の行グループと0個以上の列グループの一部である。

セル、列、行、行グループ、列グループに加えて、テーブルは、関連するcaption要素を持つことができる。これは、テーブルに見出し、または凡例を提供する。

テーブルモデルエラーは、table要素およびその子孫によって表されるデータとのエラーである。文書は、テーブルモデルエラーを持ってはならない。

4.9.12.1 Forming a table

どの要素がテーブルにおいてどのスロットとtable要素とを関連付けられたかを決定するため、テーブル（x_widthおよびy_height）の次元を決定するため、および任意のテーブルモデルエラーがあるかどうかを決定するために、ユーザーエージェントは次のアルゴリズムを使用しなければならない：

Let x_width be 0.
Let y_height be 0.
pending tfoot elementsをtfoot要素リストにし、最初に空にする。
the tableをtable要素で表されるテーブルにする。x_widthおよびy_height変数は、the tableの寸法を与える。The table テーブルは、初めに空となる。
If the table element has no children elements, then return the table (which will be empty).
the tableとtable要素の最初のcaption要素の子を関連付ける。そのような子が存在しない場合、テーブルは関連するcaption要素を持たない。
current elementをtable要素の最初の要素の子とする。

そのような次の子がないときにこのアルゴリズムにおける手順がtableの次の子に前進するようにcurrent elementをいずれ要求する場合、このアルゴリズムの終わり近くに、ユーザーエージェントはendとラベル付けされた手順にジャンプしなければならない。
current elementが次の要素のいずれでもない間、tableの次の子にcurrent elementを進める：
- colgroup
- thead
- tbody
- tfoot
- tr
current elementがcolgroupである場合、次のサブ手順に従う：
1. Column groups：次の適切な場合に従ってcurrent elementを処理する：
  current elementが任意のcol要素の子を持つ場合
  次の手順に従う：
  1. x_startにx_widthの値を持たせる。
  2. current columnをcolgroup要素の最初のcol要素にする。
  3. Columns：current columnのcol要素がspan属性を持つ場合、非負整数を解析するための規則を使用して属性の値を解析する。
    
    解析値の結果がエラーまたは0でない場合、spanをその値にする。
    
    そうでなければ、col要素がspan属性を持たない、または属性値の解析の試みがエラーまたは0をもたらす場合、spanを1にする。
    
    If span is greater than 1000, let it be 1000 instead.
  4. spanでx_widthを増やす。
  5. the tableにおける最後のspan列をcurrent column col要素に対応させる。
  6. current columnがcolgroup要素の最後のcol要素の子でない場合、current columnをcolgroup要素の次のcol要素の子とし、columnsにラベル付けされた手順に戻る。
  7. Let all the last columns in the table from x=x_start to x=x_width-1 form a new column group, anchored at the slot (x_start, 0), with width x_width-x_start, corresponding to the colgroup element.
  current elementが任意のcol要素の子を持たない場合
  1. colgroup要素がspan属性を持つ場合、非負整数を解析するための規則を使用して属性値を解析する。
    
    解析値の結果がエラーまたは0でない場合、spanをその値にする。
    
    そうでなければ、colgroup要素がspan属性を持たない、または属性値の解析の試みがエラーまたは0をもたらす場合、spanを1にする。
    
    If span is greater than 1000, let it be 1000 instead.
  2. spanでx_widthを増やす。
  3. Let the last span columns in the table form a new column group, anchored at the slot (x_width-span, 0), with width span, corresponding to the colgroup element.
2. current elementをtableの次の子へ前進させる。
3. current elementが次の要素のいずれでもない間、tableの次の子にcurrent elementを進める：
  - colgroup
  - thead
  - tbody
  - tfoot
  - tr
4. current elementがcolgroup要素である場合、上記のcolumn groupsにラベル付けされた手順にジャンプする。
Let y_current be 0.
list of downward-growing cellsを空のリストにする。
Rows：current elementが次の要素のいずれでもない間、current elementをtableの次の子へ前進させる：
- thead
- tbody
- tfoot
- tr
current elementがtrである場合、列を処理するためのアルゴリズムを実行し、current elementをtableの次の子に前進させ、rowsにラベル付けされた手順を返す。
列グループを終了させるためのアルゴリズムを実行する。
current elementがtfootである場合、その要素にpending tfoot elementsのリストを追加し、current elementをtableの次の子に前進させ、rowsにラベル付けされた手順に戻る。
current elementはtheadまたはtbodyのいずれかである。

列グループを処理するためのアルゴリズムを実行する。
current elementをtableの次の子へ前進させる。
rowsにラベル付けされる手順に戻る。
End: For each tfoot element in the list of pending tfoot elements, in tree order, run the algorithm for processing row groups.
スロットに固定されるセルを持たないスロットのみを含むthe tableにおいて行または列が存在する場合、これはテーブルモデルエラーである。
the tableを返す。

行グループを処理するためのアルゴリズム。これはthead、tbody、およびtfoot要素を処理するための上記の一連の手順の設定によって呼び出される：

y_startにy_heightの値を持たせる。
処理されている要素の子である各tr要素に対して、ツリー順に、行を処理するためのアルゴリズムを実行する。
If y_height > y_start, then let all the last rows in the table from y=y_start to y=y_height-1 form a new row group, anchored at the slot with coordinate (0, y_start), with height y_height-y_start, corresponding to the element being processed.
列グループを終了させるためのアルゴリズムを実行する。

列グループを終了させるためのアルゴリズム。これは行のブロックを開始および終了する場合に上記の一連の手順で呼び出される：

y_currentがy_heightより小さい間、次の手順に従う：
1. 下向きに成長するセルのためのアルゴリズムを実行する。
2. y_currentを1増やす。
list of downward-growing cellsを空にする。

行を処理するためのアルゴリズム。これはtr要素を処理するための上記の手順のセットで呼び出される：

y_heightがy_currentと等しい場合、y_heightを1増やす。（y_currentはy_heightより大きくない。）
x_currentを0にする。
下向きに成長するセルのためのアルゴリズムを実行する。
処理されているtr要素がtdまたはth要素の子を持たない場合、y_currentを1増やし、この一連の手順を中止し、上記のアルゴリズムに戻る。
current cellを処理されているtr要素における最初のtdまたはth要素の子にする。
Cells：x_currentがx_widthより小さくかつ座標(x_current, y_current)をもつスロットが割り当てられたセルをすでに持つ間、x_currentを1増やす。
x_currentがx_widthと等しい場合、x_widthを1増やす。（x_currentはx_widthより大きくない。）
current cellがcolspan属性を持つ場合、その属性の値を解析し、そしてcolspanを結果とする。

その値の解析に失敗した、または0を返される場合、または属性が不在の場合、colspanを1にする。

If colspan is greater than 1000, let it be 1000 instead.
current cellがrowspan属性を持つ場合、その属性の値を解析し、そしてrowspanを結果とする。

その値の解析に失敗した場合、または属性が不在の場合、代わりにrowspanを1にする。

If rowspan is greater than 65534, let it be 65534 instead.
Let cell grows downward be false.
If rowspan is zero, then set cell grows downward to true and set rowspan to 1.
If x_width < x_current+colspan, then let x_width be x_current+colspan.
If y_height < y_current+rowspan, then let y_height be y_current+rowspan.
Let the slots with coordinates (x, y) such that x_current ≤ x < x_current+colspan and y_current ≤ y < y_current+rowspan be covered by a new cell c, anchored at (x_current, y_current), which has width colspan and height rowspan, corresponding to the current cell element.

current cell要素がth要素である場合、この新しいセルcをヘッダーセルにする。そうでなければ、データセルにする。

どのヘッダーセルがcurrent cell要素に適用されるかを確立するために、次のセクションで説明されるヘッダーセルを割り当てるためのアルゴリズムを使用する。

呼び出されたすべてのスロットがすでにスロットを覆うセルを持っていた場合、これはテーブルモデルエラーである。子のスロットは現在2つのセルの重なりを持つ。
cell grows downwardがtrueである場合、タプル{c, x_current, colspan}をlist of downward-growing cellsに追加する。
x_currentをcolspan増やす。
current cellが処理されているtr要素における最後のtdまたはth要素の子である場合、y_currentを1増やし、この一連の手順を中止し、上記のアルゴリズムに戻る。
current cellを処理されているtr要素における次のtdまたはth要素の子にする。
cellsにラベル付けされた手順に戻る。

上記のアルゴリズムが下方に成長するセルのためのアルゴリズムを実行することをユーザーエージェントに要求する場合、もしあれば、list of downward-growing cellsにおける各{cell, cell_x, width}タプルに対して、ユーザーエージェントはセルcellを拡張しなければならず、その結果cell_x ≤ x < cell_x+widthの場合に座標(x, y_current)をもつスロットも覆う。

4.9.12.2 Forming relationships between data cells and header cells

各セルは0個以上のヘッダーセルを割り当てることができる。セルprincipal cellへのヘッダーセルを割り当てるためのアルゴリズムは次のとおりである。

header listを空のセルのリストにする。
(principal_x, principal_y)をprincipal cellが固定されるスロットの座標にする。
principal cellが指定されたheaders属性を持つ場合
1. Take the value of the principal cell's headers attribute and split it on ASCII whitespace, letting id list be the list of tokens obtained.
2. トークンに等しいIDをもつDocumentにおける最初の要素が同じテーブルにおけるセルであり、かつそのセルがprincipal cellでない場合、id listにおける各トークンに対して、header listのセルを加える。
principal cellが指定されたheaders属性を持たない場合
1. principal_widthをprincipal cellの幅にする。
2. principal_heightをprincipal cellの高さにする。
3. For each value of y from principal_y to principal_y+principal_height-1, run the internal algorithm for scanning and assigning header cells, with the principal cell, the header list, the initial coordinate (principal_x, y), and the increments Δx=−1 and Δy=0.
4. For each value of x from principal_x to principal_x+principal_width-1, run the internal algorithm for scanning and assigning header cells, with the principal cell, the header list, the initial coordinate (x, principal_y), and the increments Δx=0 and Δy=−1.
5. If the principal cell is anchored in a row group, then add all header cells that are row group headers and are anchored in the same row group with an x-coordinate less than or equal to principal_x+principal_width-1 and a y-coordinate less than or equal to principal_y+principal_height-1 to header list.
6. If the principal cell is anchored in a column group, then add all header cells that are column group headers and are anchored in the same column group with an x-coordinate less than or equal to principal_x+principal_width-1 and a y-coordinate less than or equal to principal_y+principal_height-1 to header list.
すべての空セルをheader listから除去する。
任意の複製物をheader listから除去する。
principal cellが存在する場合、header listからこれを除去する。
header listにおけるヘッダーをprincipal cellに割り当てる。

principal cell、header list、初期座標(initial_x, initial_y)、およびΔxとΔyの増分で与えられる、ヘッダーセルを操作して割り当てるための初期アルゴリズムは、次のとおり：

xをinitial_xと等しくする。
yをinitial_yと等しくする。
opaque headersを空のセルのリストにする。
principal cellがヘッダーセルである場合
in header blockをtrueにし、headers from current header blockをprincipal cellのみを含むセルのリストにする。
そうでなければ
in header blockをfalseにし、headers from current header blockを空のセルのリストにする。
Loop：xをΔx増加し、yをΔy増加する。

このアルゴリズムの各起動に対して、ΔxとΔyのいずれかは-1であり、もう一方は0となる。
If either x or y are less than 0, then abort this internal algorithm.
スロット(x, y)を覆うセルが存在しない場合、またはスロット(x, y)を覆うセルが複数存在する場合、loopにラベル付けされたサブ手順に戻る。
current cellをスロット(x, y)を覆うセルにする。
current cellがヘッダーセルである場合
1. in header blockをtrueに設定する。
2. current cellをheaders from current header blockに加える。
3. blockedをfalseにする。
4. Δxが0である場合
  current cellと同じx座標に、かつcurrent cellと同じ幅に固定されたopaque headersリストで任意のセルが存在する場合、blockedをtrueにする。
  
  current cellが列ヘッダーでない場合、blockedをtrueにする。
  
  Δyが0である場合
  current cellと同じy座標に、かつcurrent cellと同じ高さに固定されたopaque headersリストで任意のセルが存在する場合、blockedをtrueにする。
  
  current cellが行ヘッダーでない場合、blockedをtrueにする。
5. If blocked is false, then add the current cell to the header list.
If current cell is a data cell and in header block is true
in header blockをfalseに設定する。headers from current header blockにおけるすべてのセルをopaque headersリストに加え、headers from current header blockリストを空にする。
loopにラベル付けされた手順に戻る。

A header cell anchored at the slot with coordinate (x, y) with width width and height height is said to be a column header if any of the following are true:

the cell's scope attribute is in the Column state; or
the cell's scope attribute is in the Auto state, and there are no data cells in any of the cells covering slots with y-coordinates y .. y+height-1をもつスロットを覆う任意のセルでデータセルが存在しない。

A header cell anchored at the slot with coordinate (x, y) with width width and height height is said to be a row header if any of the following are true:

the cell's scope attribute is in the Row state; or
the cell's scope attribute is in the Auto state, the cell is not a column header, and there are no data cells in any of the cells covering slots with x-coordinates x .. x+width-1.

A header cell is said to be a column group header if its scope attribute is in the Column Group state.

A header cell is said to be a row group header if its scope attribute is in the Row Group state.

A cell is said to be an empty cell if it contains no elements and its child text content, if any, consists only of ASCII whitespace.

4.9.13 例

この節は非規範的である。

次は、Smithsonian physical tables, Volume 71のテーブル45の下部をマークアップする方法の1つを示す：

<table>
 <caption>Specification values: <b>Steel</b>, <b>Castings</b>,
 Ann. A.S.T.M. A27-16, Class B;* P max. 0.06; S max. 0.05.</caption>
 <thead>
  <tr>
   <th rowspan=2>Grade.</th>
   <th rowspan=2>Yield Point.</th>
   <th colspan=2>Ultimate tensile strength</th>
   <th rowspan=2>Per cent elong. 50.8&nbsp;mm or 2&nbsp;in.</th>
   <th rowspan=2>Per cent reduct. area.</th>
  </tr>
  <tr>
   <th>kg/mm<sup>2</sup></th>
   <th>lb/in<sup>2</sup></th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Hard</td>
   <td>0.45 ultimate</td>
   <td>56.2</td>
   <td>80,000</td>
   <td>15</td>
   <td>20</td>
  </tr>
  <tr>
   <td>Medium</td>
   <td>0.45 ultimate</td>
   <td>49.2</td>
   <td>70,000</td>
   <td>18</td>
   <td>25</td>
  </tr>
  <tr>
   <td>Soft</td>
   <td>0.45 ultimate</td>
   <td>42.2</td>
   <td>60,000</td>
   <td>22</td>
   <td>30</td>
  </tr>
 </tbody>
</table>

このテーブルは、次のようになる：

Specification values: **Steel**, **Castings**, Ann. A.S.T.M. A27-16, Class B;* P max. 0.06; S max. 0.05.
Grade.	Yield Point.	Ultimate tensile strength		Per cent elong. 50.8 mm or 2 in.	Per cent reduct. area.
Grade.	Yield Point.	kg/mm²	lb/in²	Per cent elong. 50.8 mm or 2 in.	Per cent reduct. area.
Hard	0.45 ultimate	56.2	80,000	15	20
Medium	0.45 ultimate	49.2	70,000	18	25
Soft	0.45 ultimate	42.2	60,000	22	30

次は、2008年度のApple社の10-K報告書の46ページで粗利益表をマークアップする方法の1つを示す：

<table>
 <thead>
  <tr>
   <th>
   <th>2008
   <th>2007
   <th>2006
 <tbody>
  <tr>
   <th>Net sales
   <td>$ 32,479
   <td>$ 24,006
   <td>$ 19,315
  <tr>
   <th>Cost of sales
   <td>  21,334
   <td>  15,852
   <td>  13,717
 <tbody>
  <tr>
   <th>Gross margin
   <td>$ 11,145
   <td>$  8,154
   <td>$  5,598
 <tfoot>
  <tr>
   <th>Gross margin percentage
   <td>34.3%
   <td>34.0%
   <td>29.0%
</table>

このテーブルは、次のようになる：

	2008	2007	2006
Net sales	$ 32,479	$ 24,006	$ 19,315
Cost of sales	21,334	15,852	13,717
Gross margin	$ 11,145	$ 8,154	$ 5,598
Gross margin percentage	34.3%	34.0%	29.0%

以下は、その文書の同じページに下から営業費用テーブルをマークアップする方法を示す：

<table>
 <colgroup> <col>
 <colgroup> <col> <col> <col>
 <thead>
  <tr> <th> <th>2008 <th>2007 <th>2006
 <tbody>
  <tr> <th scope=rowgroup> Research and development
       <td> $ 1,109 <td> $ 782 <td> $ 712
  <tr> <th scope=row> Percentage of net sales
       <td> 3.4% <td> 3.3% <td> 3.7%
 <tbody>
  <tr> <th scope=rowgroup> Selling, general, and administrative
       <td> $ 3,761 <td> $ 2,963 <td> $ 2,433
  <tr> <th scope=row> Percentage of net sales
       <td> 11.6% <td> 12.3% <td> 12.6%
</table>

このテーブルは、次のようになる：

	2008	2007	2006
Research and development	$ 1,109	$ 782	$ 712
Percentage of net sales	3.4%	3.3%	3.7%
Selling, general, and administrative	$ 3,761	$ 2,963	$ 2,433
Percentage of net sales	11.6%	12.3%	12.6%

4.9 テーブルデータ

4.9.1 table要素

4.9.1.1 表を記述するためのテクニック

4.9.1.2 テーブルデザインのためのテクニック

4.9.2 caption要素

4.9.3 colgroup要素

4.9.4 col要素

4.9.5 tbody要素

4.9.6 thead要素

4.9.7 tfoot要素

4.9.8 tr要素

4.9.9 td要素

4.9.10 th要素

4.9.11 tdとth要素の共通属性

4.9.12 Processing model

4.9.12.1 Forming a table

4.9.12.2 Forming relationships between data cells and header cells

4.9.13 例

4.9.1 `table`要素

4.9.2 `caption`要素

4.9.3 `colgroup`要素

4.9.4 `col`要素

4.9.5 `tbody`要素

4.9.6 `thead`要素

4.9.7 `tfoot`要素

4.9.8 `tr`要素

4.9.9 `td`要素

4.9.10 `th`要素

4.9.11 `td`と`th`要素の共通属性