Edition for Web Developers — Last Updated 17 December 2024
table
要素Support in all current engines.
caption
要素、0個以上のcolgroup
要素、任意でthead
要素、0個以上のtbody
要素または1個以上のtr
要素のいずれか、任意でtfoot
要素、任意で1つ以上のスクリプトサポート要素と混合される。HTMLTableElement
を使用する。table
要素はテーブル形式で、複数の次元を持つデータを表す。
テーブルは、行、列、およびその子孫によって与えられるセルを持つ。行と列はグリッドを形成する。テーブルのセルは完全に重複することなく、グリッドをカバーしなければならない。
著者は、複雑なテーブルをどのように解釈するかを記述する情報を提供するよう推奨される。そのような情報を提供する方法についての手引きは後述のとおりである。
テーブルは、レイアウトの補助として使用されてはならない。歴史的に、一部のウェブ著者は、自身のページのレイアウトを制御する方法としてHTMLのテーブルを誤用している。そのような文書から表形式のデータの抽出を試みるツールは極めて混乱する結果を得ることになるため、この使用法は不適合である。具体的に、スクリーンリーダーのようなアクセシビリティツールのユーザーは、テーブルがレイアウトに使用されるテーブルをもつページをナビゲートするのに非常に困難であることを見つける可能性が高い。
レイアウトに対してHTMLテーブルを使用する代わりに、CSSグリッドレイアウト、CSSフレキシブルボックスレイアウト("flexbox")、CSSマルチカラムレイアウト、CSSポジショニング、CSSテーブルモデルなど、さまざまな方法がある。[CSS]
著者は、ユーザーに対してテーブルをより簡単に移動するために、下記のテーブルデザインテクニックの使用を検討することを推奨する。
table.
[ = value ]テーブルのcaption
要素を返す。
caption
要素を置き換えるために、設定が可能である。
caption = table.
()表がcaption
要素を持つことを保証し、それを返す。
table.
()表がcaption
要素を持たないことを保証する。
table.tHead [ = value ]
テーブルのthead
要素を返す。
thead
要素を置き換えるために、設定が可能である。新しい値がthead
要素でない場合、"HierarchyRequestError
" DOMException
を投げる。
thead = table.createTHead()
表がthead
要素を持つことを保証し、それを返す。
table.deleteTHead()
表がthead
要素を持たないことを保証する。
table.tFoot [ = value ]
テーブルのtfoot
要素を返す。
tfoot
要素を置き換えるために、設定が可能である。新しい値がtfoot
要素でない場合、"HierarchyRequestError
" DOMException
を投げる。
tfoot = table.createTFoot()
表がtfoot
要素を持つことを保証し、それを返す。
table.deleteTFoot()
表がtfoot
要素を持たないことを保証する。
table.tBodies
テーブルのtbody
要素のHTMLCollection
を返す。
tbody = table.createTBody()
tbody
要素を作成してテーブルに挿入し、それを返す。
table.rows
テーブルのtr
要素のHTMLCollection
を返す。
tr = table.insertRow([ index ])
必要であれば、tbody
要素とともに、tr
要素を作成し、引数で指定された位置にあるテーブルへそれらを挿入して、tr
を返す。
位置は、テーブルの行を基準にする。引数が省略されている場合、デフォルトでインデックス-1は、テーブルの末尾に挿入することと同じである。
指定された位置が-1未満または行数より大きい場合、"IndexSizeError
" DOMException
を投げる。
table.deleteRow(index)
テーブルで指定された位置とともに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.4 em ; width : 1.4 em ; 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 >
1行目のヘッダーと1列目のヘッダーをもつセルの1つ以上のグリッドからなるテーブルに対して、および一般に読者がコンテンツを理解する難しさがあるかもしれない場所で任意のテーブルに対して、著者はテーブルを導入する説明情報を含めるべきである。この情報はすべてのユーザーに対して有用であるが、たとえばスクリーンリーダーのユーザーなど、テーブルを見ることができないユーザーに対して特に有用である。
そのような説明情報は、テーブルの目的を紹介し、その基本的なセル構造を要約し、傾向やパターンを強調し、および一般にどのようにテーブルを使用するかをユーザーに教えるべきである。
たとえば、次の表において:
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 >
良いテーブルデザインは、テーブルがより読みやすく、使いやすくするための鍵となる。
視覚メディアにおいて、列と行の境界を提供して行の背景を交互にすることは、複雑なテーブルをより読みやすくするために非常に効果的である。
大量のコンテンツを持つテーブルに対して、特に、ユーザーエージェントがボーダーをレンダリングしない状況において等幅フォントを使用することは、ユーザーにパターンに気づくのを助けることができる。(残念ながら、歴史的な理由により、テーブルのボーダーをレンダリングしないことは、共通のデフォルトである。)
音声メディアにおいて、テーブルのセルは、セルの内容を読む前に対応するヘッダーを報告することによって、およびソースの順序でテーブルの内容全体をシリアライズするのではなく、むしろグリッド方式でテーブルをナビゲートできるようにすることで区別できる。
著者は、これらの効果を達成するためにCSSを使用するよう推奨される。
caption
要素Support in all current engines.
table
要素の最初の子として。table
要素の子孫を除く。caption
要素の直後がASCII空白文字またはコメントでない場合、caption
要素の終了タグは省略することができる。HTMLTableCaptionElement
を使用する。要素が親を持ち、かつ、それがtable
要素である場合、caption
要素は、その親であるtable
のタイトルを表す。
table
要素がfigure
要素の中でfigcaption
以外には唯一のコンテンツである場合、caption
要素はfigcaption
を選択して省略されるべきである。
キャプションは、テーブルに対するコンテキストを導入でき、大幅に理解しやすくする。
たとえば、次のテーブルを考えてみる:
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 >
以下は、より多くのコンテキストをユーザーに提供する:
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 |
colgroup
要素Support in all current engines.
table
要素の子として、任意のcaption
要素の後かつ任意のthead
、tbody
、tfoot
、およびtr
要素の前。span
属性が存在する場合:Nothing。span
属性が存在しない場合:0個以上のcol
要素およびtemplate
要素。colgroup
要素内の最初の文がcol
要素である場合、かつ終了タグが省略されている別のcolgroup
要素の直前に存在しない場合、colgroup
要素の開始タグは省略することができる。(要素が空である場合、省略できない。)colgroup
要素の直後がASCII空白文字またはコメントでない場合、colgroup
要素の終了タグは省略することができる。span
— 要素がまたがる列の数HTMLTableColElement
を使用する。この要素がtable
要素の親を持つ場合、colgroup
要素は、親であるtable
で1つ以上の列のグループを表す。
colgroup
要素が一切col
要素を含まない場合、要素は、値が0より大きくかつ1000以下の妥当な負でない整数でなければならない、指定されたspan
コンテンツ属性を持ってもよい。
col
要素Support in all current engines.
span
属性を持たないcolgroup
要素の子として。span
— 要素がまたがる列の数HTMLTableColElement
、colgroup
要素の場合と同様。col
要素が親を持ち、それがtable
要素が親であるcolgroup
要素自体である場合は、col
要素は、そのcolgroup
によって表される列グループ内の1つ以上の列を表す。
要素は、値が0より大きくかつ1000以下の妥当な負でない整数でなければならない、指定されたspan
コンテンツ属性を持ってもよい。
tbody
要素Support in all current engines.
table
要素の子として、任意のcaption
、colgroup
、およびthead
要素の後、ただしtable
要素の子であるtr
が一切存在しない場合のみに限る。tr
要素およびスクリプトサポート要素。tbody
要素内の最初の文がtr
要素である場合、かつこの要素が終了タグが省略されているtbody
、thead
、またはtfoot
要素の直前に存在しない場合、tbody
要素の開始タグは省略することができる。(要素が空である場合、省略できない。)tbody
要素が別のtbody
またはtfoot
要素の直後に存在する場合、または親要素に追加のコンテンツが存在しない場合、tbody
要素の終了タグは省略することができる。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
を投げる。
thead
要素Support in all current engines.
table
要素の子として、任意のcaption
およびcolgroup
要素の後、および任意のtbody
、tfoot
、およびtr
要素の前、ただしtable
の子であるthead
要素以外である場合のみに限る。tr
要素およびスクリプトサポート要素。thead
要素がtbody
またはtfoot
要素の直後に存在する場合、thead
要素の終了タグは省略することができる。tbody
要素に対して定義されるものとして、HTMLTableSectionElement
。 thead
要素 は、 thead
要素が親を持ち、かつそれがtable
ある場合、親table
要素の列ラベル(ヘッダー)および補助的な非ヘッダーセルで構成される行のブロックを表す。
この例は、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 >
tfoot
要素Support in all current engines.
table
要素の子として、任意のcaption
、colgroup
、thead
、tbody
およびtr
要素の後、ただしtable
の子であるtfoot
要素以外である場合のみに限る。tr
要素およびスクリプトサポート要素。tfoot
要素の終了タグは省略することができる。tbody
要素に対して定義されるものとして、HTMLTableSectionElement
。tfoot
要素がtable
である親を持つ場合、tfoot
要素は、親table
要素に対し列の合計(フッター)を構成する行のブロックを表す。
tr
要素Support in all current engines.
thead
要素の子として。tbody
要素の子として。tfoot
要素の子として。table
要素の子として、任意のcaption
、colgroup
、およびthead
要素の後、ただしtable
要素の子であるtbody
が一切存在しない場合に限る。td
、th
、およびスクリプトサポート要素。tr
要素が別のtr
要素の直後に存在する場合、または親要素に追加のコンテンツが存在しない場合、tr
要素の終了タグは省略することができる。HTMLTableRowElement
を使用する。tr.rowIndex
テーブルのrows
リストで行の位置を返す。
要素がテーブル内でない場合、-1を返す。
tr.sectionRowIndex
テーブルセクションのrows
リストで行の位置を返す。
要素がテーブルセクション内でない場合、-1を返す。
tr.cells
行のtd
およびth
要素のHTMLCollection
を返す。
cell = tr.insertCell([ index ])
td
要素を作成し、引数で指定された場所でテーブル行にこれを挿入し、td
を返す。
位置は、行のセルを基準にする。引数が省略されている場合、デフォルトでインデックス-1は、行の末尾に挿入することと同じである。
指定された位置が-1未満またはセル数より大きい場合、"IndexSizeError
" DOMException
を投げる。
tr.deleteCell(index)
位置は、行のセルを基準にする。インデックス-1は、行の最後のセルを削除するのと同じである。
指定された位置が-1未満または最終セルのインデックスよりも大きい、またはセルが存在しない場合、"IndexSizeError
" DOMException
を投げる。
td
要素Support in all current engines.
tr
要素の子として。td
要素が別のtd
またはth
要素の直後に存在する場合、または親要素に追加のコンテンツが存在しない場合、td
要素の終了タグは省略することができる。colspan
— セルがまたがる列の数rowspan
— セルがまたがる行の数headers
— 該当セルに対するヘッダーセルHTMLTableCellElement
を使用する。HTMLTableCellElement
インターフェイスはまた、th
要素によっても使用される。
この例において、編集可能なセルのグリッド(基本的にシンプルなスプレッドシート)からなるウェブアプリケーションの断片を見てみる。セルの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 >
th
要素Support in all current engines.
tr
要素の子として。header
、footer
、セクショニングコンテンツ、またはヘディングコンテンツの子孫を除く。th
要素が別のtd
またはth
要素の直後に存在する場合、または親要素に追加のコンテンツが存在しない場合、th
要素の終了タグは省略することができる。colspan
— セルがまたがる列の数rowspan
— セルがまたがる行の数headers
— 該当セルに対するヘッダーセルscope
— ヘッダーセルがどのセルに適用するかを指定するabbr
— 他のコンテキスト内のセルを参照するときにヘッダーセルに使用する代替ラベルtd
要素に対して定義されるものとして、HTMLTableCellElement
を使用する。th
要素は、指定されたscope
コンテンツ属性を持ってもよい。
scope
属性は、次のキーワードと状態を持つ列挙属性である:
キーワード | 状態 | 概要 |
---|---|---|
row | row | ヘッダーセルは、同じ行の後続セルの一部に適用される。 |
col | column | ヘッダーセルは、同じ列の後続セルの一部に適用される。 |
rowgroup | row group | ヘッダーセルは、行グループの残りのすべてのセルに適用される。 |
colgroup | column group | ヘッダーセルは、列グループの残りのすべてのセルに適用される。 |
この属性の欠損値のデフォルトと不正値のデフォルトは両方ともauto状態である。(この状態では、ヘッダーセルはコンテキストに基づいて選択された一連のセルに適用される。)
th
要素のscope
属性は、row group状態であってはならず、要素がrow groupに固定されない場合、column group状態になってはならない。
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 > 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
属性を持つヘッダーは、最初の列のセル以外の行グループ内のすべてのセルに適用される。
残りのヘッダーは右側のセルにのみ適用される。
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
要素は、それ自体が目標とならない。
cell.cellIndex
行のcells
リストでセルの位置を返す。より前のセルが複数の行または列をカバーするかもしれないので、これは必ずしもテーブルにおけるセルのx方向の位置に対応しない。
要素が行にない場合、-1を返す。
次は、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 mm 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 >
このテーブルは、次のようになる:
Grade. | Yield Point. | Ultimate tensile strength | Per cent elong. 50.8 mm or 2 in. | Per cent reduct. area. | |
---|---|---|---|---|---|
kg/mm2 | lb/in2 | ||||
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% |