1. 4.9 テーブルデータ
      1. 4.9.1 table要素
        1. 4.9.1.1 表を記述するためのテクニック
        2. 4.9.1.2 テーブルデザインのためのテクニック
      2. 4.9.2 caption要素
      3. 4.9.3 colgroup要素
      4. 4.9.4 col要素
      5. 4.9.5 tbody要素
      6. 4.9.6 thead要素
      7. 4.9.7 tfoot要素
      8. 4.9.8 tr要素
      9. 4.9.9 td要素
      10. 4.9.10 th要素
      11. 4.9.11 tdth要素の共通属性
      12. 4.9.12

4.9 テーブルデータ

4.9.1 table要素

Element/table

Support in all current engines.

Firefox1+SafariYesChrome1+
OperaYesEdge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android4+Safari iOSYesChrome Android18+WebView Android1+Samsung Internet1.0+Opera AndroidYes
カテゴリー
フローコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
この順序で:任意でcaption要素、0個以上のcolgroup要素、任意でthead要素、0個以上のtbody要素または1個以上のtr要素のいずれか、任意でtfoot要素、任意で1つ以上のスクリプトサポート要素と混合される。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLTableElementを使用する。

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

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

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

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

主にCSS位置決めとCSSテーブルモデルを用いて、レイアウトに対してHTMLのテーブルの代わりに使用できる、さまざまな代替手段がある。[CSS]

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


table . caption [ = value ]

HTMLTableElement/caption

Support in all current engines.

FirefoxYesSafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet ExplorerYes
Firefox AndroidYesSafari iOSYesChrome Android?WebView AndroidYesSamsung Internet?Opera AndroidYes

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

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

caption = table . createCaption()

HTMLTableElement/createCaption

Support in all current engines.

FirefoxYesSafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet ExplorerYes
Firefox AndroidYesSafari iOSYesChrome Android?WebView AndroidYesSamsung Internet?Opera AndroidYes

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

table . deleteCaption()

HTMLTableElement/deleteCaption

Support in all current engines.

FirefoxYesSafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet ExplorerYes
Firefox AndroidYesSafari iOSYesChrome Android?WebView AndroidYesSamsung Internet?Opera AndroidYes

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

table . tHead [ = value ]

HTMLTableElement/tHead

Support in all current engines.

Firefox1+SafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet ExplorerYes
Firefox Android4+Safari iOSYesChrome Android?WebView AndroidYesSamsung Internet?Opera AndroidYes

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

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

thead = table . createTHead()

HTMLTableElement/createTHead

Support in all current engines.

FirefoxYesSafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet ExplorerYes
Firefox AndroidYesSafari iOSYesChrome Android?WebView AndroidYesSamsung Internet?Opera AndroidYes

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

table . deleteTHead()

HTMLTableElement/deleteTHead

Support in all current engines.

FirefoxYesSafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet ExplorerYes
Firefox AndroidYesSafari iOSYesChrome Android?WebView AndroidYesSamsung Internet?Opera AndroidYes

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

table . tFoot [ = value ]

HTMLTableElement/tFoot

Support in all current engines.

Firefox1+SafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet ExplorerYes
Firefox Android4+Safari iOSYesChrome Android?WebView AndroidYesSamsung Internet?Opera AndroidYes

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

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

tfoot = table . createTFoot()

HTMLTableElement/createTFoot

Support in all current engines.

FirefoxYesSafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet ExplorerYes
Firefox AndroidYesSafari iOSYesChrome Android?WebView AndroidYesSamsung Internet?Opera AndroidYes

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

table . deleteTFoot()

HTMLTableElement/deleteTFoot

Support in all current engines.

FirefoxYesSafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet ExplorerYes
Firefox AndroidYesSafari iOSYesChrome Android?WebView AndroidYesSamsung Internet?Opera AndroidYes

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

table . tBodies

HTMLTableElement/tBodies

Support in all current engines.

FirefoxYesSafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet ExplorerYes
Firefox AndroidYesSafari iOSYesChrome Android?WebView AndroidYesSamsung Internet?Opera AndroidYes

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

tbody = table . createTBody()

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

table . rows

HTMLTableElement/rows

Support in all current engines.

FirefoxYesSafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet ExplorerYes
Firefox AndroidYesSafari iOSYesChrome Android?WebView AndroidYesSamsung Internet?Opera AndroidYes

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

tr = table . insertRow( [ index ] )

HTMLTableElement/insertRow

Support in all current engines.

Firefox3+Safari4+Chrome4+
Opera10+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android4+Safari iOS3.2+Chrome Android18+WebView Android37+Samsung Internet1.0+Opera Android10.1+

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

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

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

table . deleteRow(index)

HTMLTableElement/deleteRow

Support in all current engines.

FirefoxYesSafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet ExplorerYes
Firefox AndroidYesSafari iOSYesChrome Android?WebView AndroidYesSamsung Internet?Opera AndroidYes

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

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

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

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

<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
NegativeCharacteristicPositive
SadMoodHappy
FailingGradePassing

"左側の列の否定的な側面および右側の列に肯定的な側面とともに、特性は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>
テーブルのcaptiondetails要素で
<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>
テーブルの横に、figurefigcaption
<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を使用するよう推奨される。

4.9.2 caption要素

Element/caption

Support in all current engines.

Firefox1+SafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet ExplorerYes
Firefox Android4+Safari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes
カテゴリー
なし。
この要素を使用できるコンテキスト
table要素の最初の子として。
コンテンツモデル
フローコンテンツ、ただしtable要素の子孫を除く。
text/htmlにおけるタグ省略
caption要素の直前がASCII空白文字またはコメントでない場合、caption要素の終了タグは省略することができる。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLTableCaptionElementを使用する。

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

table要素がfigcaption以外のfigure要素でコンテンツのみである場合、caption要素はfigcaptionを選んで省略されるべきである。

理解するのがより容易になるような、キャプションはテーブルに対するコンテキストを導入できる。

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

123456
1234567
2345678
3456789
45678910
567891011
6789101112

理論的に考えれば、このテーブルは明確でない。しかし、キャプションは(主文で参照のために)表の数字を与え、その使用方法を説明することは、より理にかなう:

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

123456
1234567
2345678
3456789
45678910
567891011
6789101112

4.9.3 colgroup要素

Element/colgroup

Support in all current engines.

Firefox1+SafariYesChrome1+
OperaYesEdge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android4+Safari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes
カテゴリー
なし。
この要素を使用できるコンテキスト
table要素の子として、任意のcaption要素の後かつ任意のtheadtbodytfoot、およびtr要素の前。
コンテンツモデル
span属性が存在する場合:Nothing
span属性が存在しない場合:0個以上のcol要素およびtemplate要素。
text/htmlにおけるタグ省略
colgroup要素内の最初の文がcol要素である場合、かつ終了タグが省略されている別のcolgroup要素の直前に存在しない場合、colgroup要素の開始タグは省略することができる。(要素が空である場合、省略できない。)
colgroup要素の直前がASCII空白文字またはコメントでない場合、colgroup要素の終了タグは省略することができる。
コンテンツ属性
グローバル属性
span — 要素がまたがる列の数
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLTableColElementを使用する。

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

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

4.9.4 col要素

Element/col

Support in all current engines.

Firefox1+SafariYesChrome1+
OperaYesEdge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android4+Safari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes
カテゴリー
なし。
この要素を使用できるコンテキスト
span属性を持たないcolgroup要素の子として。
コンテンツモデル
Nothing
text/htmlにおけるタグ省略
終了タグなし。
コンテンツ属性
グローバル属性
span — 要素がまたがる列の数
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLTableColElementcolgroup要素の場合と同様。

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

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

4.9.5 tbody要素

Element/tbody

Support in all current engines.

Firefox1+SafariYesChrome1+
OperaYesEdge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android4+Safari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes
カテゴリー
なし。
この要素を使用できるコンテキスト
table要素の子として、任意のcaptioncolgroup、およびthead要素の後、ただしtable要素の子であるtrが一切存在しない場合のみに限る。
コンテンツモデル
0個以上のtr要素およびスクリプトサポート要素。
text/htmlにおけるタグ省略
tbody要素内の最初の文がtr要素である場合、かつこの要素が終了タグが省略されているtbodythead、またはtfoot要素の直前に存在しない場合、tbody要素の開始タグは省略することができる。(要素が空である場合、省略できない。)
tbody要素が別のtbodyまたはtfoot要素の直前に存在する場合、または親要素に追加のコンテンツが存在しない場合、tbody要素の終了タグは省略することができる。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス

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

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

tbody . rows

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

tr = tbody . insertRow( [ index ] )

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

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

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

tbody . deleteRow(index)

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

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

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

4.9.6 thead要素

Element/thead

Support in all current engines.

Firefox1+SafariYesChrome1+
OperaYesEdge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android4+Safari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes
カテゴリー
なし。
この要素を使用できるコンテキスト
table要素の子として、任意のcaptionおよびcolgroup要素の後、および任意のtbodytfoot、およびtr要素の前、ただしtableの子であるthead要素以外である場合のみに限る。
コンテンツモデル
0個以上のtr要素およびスクリプトサポート要素。
text/htmlにおけるタグ省略
thead要素がtbodyまたはtfoot要素の直前に存在する場合、thead要素の終了タグは省略することができる。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
tbody要素に対して定義されるものとして、HTMLTableSectionElement

thead要素がtableである親を持つ場合、thead要素は、親table要素に対し列ラベル(ヘッダー)を構成するブロック表す

この例は、thead要素が使われる様子を示す。thead要素におけるthtdの両方の使い方に注意する。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+SafariYesChrome1+
OperaYesEdge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android4+Safari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes
カテゴリー
なし。
この要素を使用できるコンテキスト
table要素の子として、任意のcaptioncolgrouptheadtbodyおよびtr要素の後、ただしtableの子であるtfoot要素以外である場合のみに限る。
コンテンツモデル
0個以上のtr要素およびスクリプトサポート要素。
text/htmlにおけるタグ省略
親要素に追加のコンテンツが存在しない場合、tfoot要素の終了タグは省略することができる。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
tbody要素に対して定義されるものとして、HTMLTableSectionElement

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

4.9.8 tr要素

Element/tr

Support in all current engines.

Firefox1+SafariYesChrome1+
OperaYesEdge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android4+Safari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes
カテゴリー
なし。
この要素を使用できるコンテキスト
thead要素の子として。
tbody要素の子として。
tfoot要素の子として。
table要素の子として、任意のcaptioncolgroup、およびthead要素の後、ただしtable要素の子であるtbodyが一切存在しない場合に限る。
コンテンツモデル
0個以上のtdth、およびスクリプトサポート要素。
text/htmlにおけるタグ省略
tr要素が別のtr要素の直前に存在する場合、または親要素に追加のコンテンツが存在しない場合、tr要素の終了タグは省略することができる。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLTableRowElementを使用する。

tr要素は、テーブルセル表す

tr . rowIndex

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

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

tr . sectionRowIndex

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

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

tr . cells

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

cell = tr . insertCell( [ index ] )

HTMLTableRowElement/insertCell

Support in all current engines.

Firefox1+SafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet ExplorerYes
Firefox Android4+Safari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes

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

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

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

tr . deleteCell(index)

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

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

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

4.9.9 td要素

Element/td

Support in all current engines.

Firefox1+SafariYesChrome1+
OperaYesEdge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android4+Safari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes
カテゴリー
セクショニングルート
この要素を使用できるコンテキスト
tr要素の子として。
コンテンツモデル
フローコンテンツ
text/htmlにおけるタグ省略
td要素が別のtdまたはth要素の直前に存在する場合、または親要素に追加のコンテンツが存在しない場合、td要素の終了タグは省略することができる。
コンテンツ属性
グローバル属性
colspan — セルがまたがる列の数
rowspan — セルがまたがる行の数
headers — 該当セルに対するヘッダーセル
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス

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

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

この例において、編集可能なセルのグリッド(基本的にシンプルなスプレッドシート)からなるウェブアプリケーションの断片を見てみる。セルの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+SafariYesChrome1+
OperaYesEdge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android4+Safari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes
カテゴリー
なし。
この要素を使用できるコンテキスト
tr要素の子として。
コンテンツモデル
フローコンテンツ、ただしheaderfooterセクショニングコンテンツ、またはヘディングコンテンツの子孫を除く。
text/htmlにおけるタグ省略
th要素が別のtdまたはth要素の直前に存在する場合、または親要素に追加のコンテンツが存在しない場合、th要素の終了タグは省略することができる。
コンテンツ属性
グローバル属性
colspan — セルがまたがる列の数
rowspan — セルがまたがる行の数
headers — 該当セルに対するヘッダーセル
scope — ヘッダーセルがどのセルに適用するかを指定する
abbr — 他のコンテキスト内のセルを参照するときにヘッダーセルに使用する代替ラベル
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
td要素に対して定義されるものとして、HTMLTableCellElementを使用する。

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

th要素は、指定されたscopeコンテンツ属性を持ってもよい。scope属性は、明示的なキーワードを持つ4種類、5つの状態を持つ列挙属性である:

row状態に対応するrowキーワード
row状態は、ヘッダーセルが同じ行で後続のセルの一部に適用することを意味する。
column状態に対応するcolキーワード
column状態は、ヘッダーセルが同じ列で後続のセルの一部に適用することを意味する。
row group状態に対応するrowgroupキーワード
row group状態は、ヘッダーセルが行グループで残りのすべてのセルに適用されることを意味する。要素が行グループに固定されない場合、th要素のscope属性は、行グループ状態であってはならない。
column group状態に対応するcolgroupキーワード
column group状態は、ヘッダーセルが列グループで残りのすべてのセルに適用されることを意味する。column group要素は列グループに固定されない場合、th要素のscope属性は、列グループ状態でなければならない。
auto状態
auto状態は、ヘッダーセルがコンテキストに基づいて選択されたセルのセットに適用させる。

scope属性の欠損値のデフォルト不正値のデフォルトは両方ともauto状態である。

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

次の例は、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 scope=row> Legs <td> 3.5 <td> 4
  <tr> <td> 10 <th scope=row> Tails <td> 1 <td> 1
 <tbody>
  <tr> <td> <th scope=rowgroup> English speakers <td> <td>
  <tr> <td> 32 <th scope=row> Legs <td> 2.67 <td> 4
  <tr> <td> 35 <th scope=row> Tails <td> 0.33 <td> 1
</table>

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

IDMeasurementAverageMaximum
Cats
93Legs3.54
10Tails11
English speakers
32Legs2.674
35Tails0.331

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

明示的にscope属性を持つヘッダーは、最初の列のセル以外の行グループ内のすべてのセルに適用される。

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

4.9.11 tdth要素の共通属性

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

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

これらの属性は、セルがまたがるようにそれぞれの列と行の数を与える。これらの属性は、セルを重複して使用してはならない。


tdth要素は、指定されたheadersコンテンツ属性を持ってもよい。headers属性が指定される場合、順不同のスペースで区切られたトークンのセットからなる文字列を含まなければならず、他のトークンと同一のものはなく、それぞれがtdまたはth要素と同じテーブルに参加しているth要素のIDの値を持たなければならず、それぞれが、tdまたはth要素と同じテーブルに参加しているth要素のIDの値を持たなければならない。

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

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


cell . cellIndex

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

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

4.9.12

次は、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.8mm or 2 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 strengthPer cent elong. 50.8 mm or 2 in.Per cent reduct. area.
kg/mm2lb/in2
Hard0.45 ultimate56.280,0001520
Medium0.45 ultimate49.270,0001825
Soft0.45 ultimate42.260,0002230

次は、2008年度のApple社年次報告書の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>

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

200820072006
Net sales$ 32,479$ 24,006$ 19,315
Cost of sales21,33415,85213,717
Gross margin$ 11,145$ 8,154$ 5,598
Gross margin percentage34.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>

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

200820072006
Research and development$ 1,109$ 782$ 712
Percentage of net sales3.4%3.3%3.7%
Selling, general, and administrative$ 3,761$ 2,963$ 2,433
Percentage of net sales11.6%12.3%12.6%