td 要素表組みのセルを表す
td 要素は表組みにおけるセルを表します。colspan 属性や rowspan 属性を指定することで、複数列、または複数行をまたぐセルを作成する事が可能で、複雑な表組みも表すことができます。
また、そのセルの見出しとなるセル （th 要素） がどこかを指定するため、headers 属性を使用することもできます。この値に、見出しセルに与えた id 属性値を指定することで、見出しセルと関連付けることができます。
td 要素の仕様
- カテゴリ
-
- なし
- コンテンツモデル
- この要素を使用できる文脈
tr 要素の子要素として
- この要素で使用できる属性
詳細説明
td 要素に指定できる属性は下記の通りです。
| 属性 | 概要 |
|---|---|
| colspan 属性 | 複数列をまたぐセルにおいて、そのセルがまたぐ列数を指定します。値は正の整数のみ指定可能です。 |
| rowspan 属性 | 複数行をまたぐセルにおいて、そのセルがまたぐ行数を指定します。値は 「0」、または正の整数を指定可能です。「0」 を指定した場合、そのセルが属する行グループの最後の行までまたぎます。 |
| headers 属性 | 見出しセルとセルを関連付けます。見出しセルに与えた id 属性値を headers 属性に指定します。値は半角スペースで区切って複数指定可能なため、複数の見出しセルと関連付けることが可能です。 |
td 要素のサンプルソース
<table> <thead> <tr> <th id="header01">属性</th> <th id="header02">概要</th> </tr> </thead> <tbody> <tr> <td headers="header01">name 属性</td> <td headers="header02">データが送信される際のクエリ名を指定します。</td> </tr> <tr> <td headers="header01">multiple 属性</td> <td headers="header02">複数の選択肢を選択を可能にします。</td> </tr> <tr> <td headers="header01" rowspan="2">type 属性</td> <td headers="header02">値が 「text」 の時…</td> <td headers="header02">値が 「submit」 の時…</td> </tr> </tbody> </table>
主要ブラウザの対応
| IE11 | ○ |
|---|---|
| Edge（EdgeHTML） | ○ |
| Edge（Chromium） | ○ |
| Chrome | ○ |
| Firefox | ○ |
| Safari | ○ |
| iOS Safari | ○ |
| Android Chrome | ○ |