Widely available すべての主要ブラウザで対応済み。安心して使用可能。

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
1
12
1
1
18
1
DOM API

HTMLTableCaptionElement インターフェイスは(通常の HTMLElement インターフェイス経由で継承によって利用できるものに加えて)表のキャプション要素を操作する特別なプロパティを提供します。

1
12
1
3
18
1

HTMLTableCellElement インターフェイスは、(継承によって利用できる通常の HTMLElement インターフェイスに加えて)表のセル(見出しセル th またはデータセル td)のレイアウトを操作したり行を表したりするための特別なプロパティとメソッドを提供します。

1
12
1
3
18
1

HTMLTableCellElement インターフェイスの abbr プロパティは、セルに関連する略語を示す。セルがヘッダーセルthを表していない場合、それは無視される。

1
12
1
3
18
1

HTMLTableCellElementインターフェイスのcellIndex読み取り専用プロパティは、その行(tr)内のセルの位置を表す。最初のセルのインデックスは 0 です。

1
12
1
3
18
1

HTMLTableCellElementインターフェイスの colSpanプロパティは、このセルがまたがらなければならない列の数を表します。これは colspan属性を反映します。

1
12
1
3
18
1

HTMLTableCellElement インターフェースの headers プロパティには、この特定のセルのヘッダーである th 要素の ID のリストが含まれる。

1
12
1
3
18
1

HTMLTableCellElementインターフェイスのrowSpanプロパティは、このセルがまたがらなければならない行の数を表す。これはrowspan属性を反映します。

1
12
1
3
18
1

HTMLTableCellElement インターフェースの scope プロパティは、th セルのスコープを示す。

1
12
1
3
18
1

HTMLTableColElement インターフェイスは、表の単一またはグループの列要素を操作するプロパティを提供します。

1
12
1
3
18
1

HTMLTableColElementインターフェイスの spanプロパティは、このcolまたはcolgroupがまたがらなければならない列の数を表します。これは span 属性を反映します。

1
12
1
3
18
1

HTMLTableElement インターフェイスは、(継承元でもある通常の HTMLElement オブジェクトのインターフェイスのほかに) HTML 文書内の表のレイアウトと表現を操作するための特別なプロパティやメソッドを提供します。

1
12
1
3
18
1

HTMLTableElement.caption プロパティは表のキャプションを表します。この表に関連付けられた caption 要素がない場合は、このプロパティは null になります。

1
12
1
3
18
1

HTMLTableElement.createCaption() メソッドは、この table に関連付けられた caption 要素を返します。 この表に 要素がない場合が、このメソッドは生成して返します。

1
12
1
3
18
1

createTBody() は HTMLTableElement オブジェクトのメソッドで、この table に関連付けられた新しい tbody 要素を返します。

20
12
25
6
25
6

createTFoot() は HTMLTableElement オブジェクトのメソッドで、この table に関連付けられた tfoot 要素を返します。表内にフッターが存在しない場合、このメソッドはそれを作成して返します。

1
12
1
3
18
1

createTHead() は HTMLTableElement オブジェクトのメソッドで、この table に関連付けられた thead 要素を返します。表内にヘッダーが存在しない場合、このメソッドはそれを作成して返します。

1
12
1
3
18
1

HTMLTableElement.deleteCaption() メソッドは、 caption 要素をこの table から削除します。この表に関連付けられた 要素がない場合は、このメソッドは何もしません。

1
12
1
3
18
1

HTMLTableElement.deleteRow() メソッドは、特定の行 (tr) をこの table から削除します。

1
12
1
3
18
1

HTMLTableElement.deleteTFoot() は、 tfoot 要素をこの table から取り除きます。

1
12
1
3
18
1

HTMLTableElement.deleteTHead() は、 thead 要素をこの table から取り除きます。

1
12
1
3
18
1

HTMLTableElement.insertRow() メソッドは、新しい行を表す (tr) をこの table に挿入し、その新しい行への参照を返します。

1
12
1
4
18
3

HTMLTableElement の rows プロパティは読み取り専用で、表のすべての行を表す生きた HTMLCollection を返し、すべての thead, tfoot, tbody 要素に含まれる行を示します。

1
12
1
3
18
1

HTMLTableElement.tBodies は読み取り専用のプロパティで、生きた HTMLCollection で table の本体を返します。

1
12
1
3
18
1

HTMLTableElement.tFoot プロパティは、 table にある tfoot 要素を表します。そのような要素がない場合は、この値は null になります。

1
12
1
3
18
1

HTMLTableElement.tHead は table の thead 要素を表します。そのような要素がない場合は、この値は null になります。

1
12
1
3
18
1

HTMLTableRowElement インターフェイスは、(継承によって利用できる通常の HTMLElement インターフェイスに加えて)HTML の表の行のレイアウトを操作したり行を表したりするための特別なプロパティとメソッドを提供します。

1
12
1
3
18
1

HTMLTableRowElement インターフェイスの cells read-only プロパティは、行のセルを含むライブの HTMLCollection を返す。HTMLCollectionは生きており、セルが追加されたり削除されたりすると自動的に更新される。

1
12
1
3
18
1

HTMLTableRowElement インターフェイスの deleteCell() メソッドは、指定した tr から特定の行セルを削除します。

1
12
1
3
18
1

HTMLTableRowElement.insertCell() メソッドは、新しいセル (td) を表の行 (tr) に挿入し、そのセルの参照を返します。

1
12
1
3
18
1
insertCell (index parameter negative one)

index` パラメータには `-1` を指定できる。

1
12
20
3
18
1
insertCell (index parameter optional)

index` パラメータはオプションです。

1
12
20
3
18
1

HTMLTableRowElement.rowIndex は読み取り専用プロパティで、表 (table) 全体に対する行の相対的な位置を表します。

1
12
1
3
18
1

HTMLTableRowElementインターフェイスのsectionRowIndex読み込み専用プロパティは、現在のセクション(thead、tbody、tfoot)内の行の位置を表す。

1
12
1
3
18
1

HTMLTableSectionElement インターフェイスは、(継承元でもある通常の HTMLElement オブジェクトのインターフェイスのほかに) HTML の表におけるヘッダー、フッター、本体などのセクションのレイアウトと表現を操作するための特別なプロパティやメソッドを提供します。

1
12
1
3
18
1

HTMLTableSectionElement インターフェイスの deleteRow() メソッドは、指定したセクションから特定の行 (tr) を削除します。

1
12
1
3
18
1

HTMLTableSectionElement インターフェイスの insertRow() メソッドは、指定したテーブル・セクショニング要素 (thead, tfoot あるいは tbody) に新しい行 (tr) を挿入し、その新しい行への参照を返します。

1
12
1
3
18
1

HTMLTableSectionElement インターフェイスの rows 読み取り専用プロパティは、セクション内の行を含むライブの HTMLCollection を返します。HTMLCollectionはライブで、行が追加されたり削除されたりすると自動的に更新されます。

1
12
1
3
18
1
その他

border-collapse は CSS のプロパティで、表 (table) の中のセルが境界を共有するか分離するかを設定します。

1
12
1
1.1
18
1
CSS プロパティ
collapse
1
79
1
1.1
18
1
separate
1
79
1
1.1
18
1
その他

border-spacing は CSS のプロパティで、table における隣り合うセルの境界同士の間隔を定めます。このプロパティは border-collapse が separate のときのみ適用されます。

1
12
1
1
18
1

caption-side は CSS のプロパティで、表の caption の中身を指定された側に配置します。この値は表の writing-mode に対する相対値です。

1
12
1
1
18
1
CSS プロパティ
bottom
1
79
1
1
18
1
bottom-outside
非標準
1
Preview
top
1
79
1
1
18
1
top-outside
非標準
1
Preview
writing-mode relative values

top`と`bottom`は`writing-mode`値からの相対値である。

42
その他

empty-cells は CSS のプロパティで、tableのセルが目に見えるコンテンツを持たない場合に、周囲の境界と背景を描画するかどうかを指定します。

1
12
1
1.2
18
1
CSS プロパティ
hide
1
12
1
1.2
18
1
show
1
12
1
1.2
18
1
その他

table-layout は CSS のプロパティで、table のセル、行、列のレイアウトに使用されるアルゴリズムを設定します。

14
12
1
1
18
3
CSS プロパティ
auto
14
12
1
1
18
3
fixed
14
12
1
1
18
3
HTML 属性
span
1
12
1
≤4
18
≤3.2
span
1
12
1
≤4
18
≤3.2
colspan
1
12
1
1
18
1
headers
1
12
1
1
18
1
rowspan
1
12
1
1
18
1
abbr
1
12
1
1
18
1
colspan
1
12
1
1
18
1
headers
1
12
1
1
18
1
rowspan
1
12
1
1
18
1
scope
1
12
1
1
18
1
その他

は HTML の要素で、表のキャプション(またはタイトル)を指定します。

1
12
1
≤4
18
≤3.2

は HTML の要素で、表内の列を定義して、すべての一般セルに共通の意味を定義するために使用します。この要素は通常、colgroup 要素内にみられます。

1
12
1
≤4
18
≤3.2

は HTML の要素で、表内の列のグループを定義します。

1
12
1
≤4
18
≤3.2

は HTML の要素で、表の一連の行(tr 要素)を内包し、その部分が表(table)の本体部分を構成することを表します。

1
12
1
1
18
1

は HTML の要素で、表でデータを包含するセルを定義します。これはモデルに関与します。

1
12
1
1
18
1
html.elements.td.rowspan.rowspan_zero

rowspan` 属性に値 `0` を指定する(行グループの末尾まで拡張する)。

65
79
≤55
65

は HTML の要素で、表の一連の列を総括する行のセットを定義します。

1
12
1
1
18
1

は HTML の要素で、表のセルのグループ用の見出しであるセルを定義します。このグループの正確な性質は、scope 属性と headers 属性で定義します。

1
12
1
1
18
1
html.elements.th.rowspan.rowspan_zero

rowspan` 属性に値 `0` を指定する(行グループの末尾まで拡張する)。

≤55

は HTML の要素で、表の列の見出しを定義する行のセットを定義します。

1
12
1
1
18
1

は HTML の要素で、表内でセルの行を定義します。行のセルには td (データセル)および th (見出しセル)要素をを混在させることができます。

1
12
1
1
18
1
1+対応 (バージョン) 未対応 注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実装メモ
  • Firefox 20 から、`index` パラメータはオプションになり、HTML の仕様に従ってデフォルトは -1 になりました。
注釈 1件
削除済み
  • このバージョンで機能が削除されました (87)
注釈 1件
削除済み
  • このバージョンで機能が削除されました (87)
注釈 1件
実装メモ
  • <thead>`要素に適用された背景は、ヘッダー全体ではなく、各テーブルセルに適用されます。他のブラウザの動作を模倣するには、`background-attachment` CSSプロパティを `fixed` に設定してください。
注釈 1件
実装メモ
  • <thead>`要素に適用された背景は、ヘッダー全体ではなく、各テーブルセルに適用されます。他のブラウザの動作を模倣するには、`background-attachment` CSSプロパティを `fixed` に設定してください。

基本構文

HTML
<table>
  <caption>Employee List</caption>
  <thead>
    <tr><th>Name</th><th>Department</th><th>Position</th></tr>
  </thead>
  <tbody>
    <tr><td>Taro Yamada</td><td>Development Department</td><td>Team Leader</td></tr>
    <tr><td>Hanako Sato</td><td>Sales Department</td><td>Manager</td></tr>
  </tbody>
</table>

ライブデモ

basic table

de-tatable build. with table / thead / tbody / tr / th / td

プレビュー全画面表示

Caption and Tfoot with

combine row display. with taitl, tfoot. with caption

プレビュー全画面表示

colspan / rowspan

sel. join in complex tablestructure create.

プレビュー全画面表示

実務での使いどころ

  • Tables の活用

    <table> は HTML の要素で、表形式のデータ、つまり、行と列の組み合わせによるセルに含まれたデータによる二次元の表で表現される情報です。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。