<td>: 表データセル要素

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

* Some parts of this feature may have varying levels of support.

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

試してみましょう

<table>  <caption>    Alien football stars  </caption>  <tr>    <th scope="col">Player</th>    <th scope="col">Gloobles</th>    <th scope="col">Za'taak</th>  </tr>  <tr>    <th scope="row">TR-7</th>    <td>7</td>    <td>4,569</td>  </tr>  <tr>    <th scope="row">Khiresh Odo</th>    <td>7</td>    <td>7,223</td>  </tr>  <tr>    <th scope="row">Mia Oolong</th>    <td>9</td>    <td>6,219</td>  </tr></table>

th,td {  border: 1px solid rgb(160 160 160);  padding: 8px 10px;}th[scope="col"] {  background-color: #505050;  color: #fff;}th[scope="row"] {  background-color: #d6ecd4;}td {  text-align: center;}tr:nth-of-type(even) {  background-color: #eee;}table {  border-collapse: collapse;  border: 2px solid rgb(140 140 140);  font-family: sans-serif;  font-size: 0.8rem;  letter-spacing: 1px;}caption {  caption-side: bottom;  padding: 10px;}

属性

この要素にはグローバル属性があります。

colspan: この属性はセルをいくつの列に広げるかを示す、負でない整数を持ちます。既定値は1 です。1000 を超える値は正しくないとみなされ、既定値 (1) が設定されるでしょう。
headers: この属性は、空白文字で区切られた文字列のリストを持ちます。各々の文字列は、この要素に当てはめる<th> 要素のid 属性と対応します。
rowspan: この属性はセルをいくつの行に広げるかを示す、負でない整数を持ちます。既定値は1 です。0 を設定した場合は、セルが属する表セクション (<thead>,<tbody>,<tfoot>) の終端 (暗黙的に定義されるものであっても) まで拡張します。65534 より大きな値は、65534 に切り詰めます。

非推奨の属性

abbr非推奨;

この属性は、セルの内容の簡潔な説明を持ちます。読み上げソフトなど一部のユーザーエージェントは、内容自体の前にこの説明を提供することがあります。

メモ:この属性は最新の標準で廃止されているため、使用しないでください。あるいは、省略した説明をセル内に置き、長い内容をtitle 属性に置くこともできます。

align非推奨;

この列挙属性は各セルの中身について、水平方向の配置方法を制御します。以下の値を指定可能です。

left: 中身をセルの左側に揃えます。
center: 中身をセル内で中央揃えにします。
right: 中身をセルの右側に揃えます。
justify (テキストのみ): 中身がセル内で両端揃えになるように、テキストコンテンツに空白を挿入します。
char (テキストのみ): テキストコンテンツを特定の文字に対して、最小のオフセットで揃えます。特定の文字はchar 属性およびcharoff 属性で定義します。

この属性を設定しない場合は、値がleft であるとみなされます。

メモ:

left,center,right,justify の値と同様の効果を得るには、 CSS のtext-align プロパティを使用してください。
同様の効果を得るには、text-align プロパティの値char を使用できます。

axis非推奨;

この属性は、空白文字で区切られた文字列のリストを持ちます。各文字列は、このヘッダーを適用するセルグループのid です。

bgcolor非推奨;

この属性は、列の各セルの背景色を定義します。値は6 桁の 16 進数による RGB コードで、先頭に '#' が付きます。定義済みの色キーワードの一つを使うこともできます。

同様の効果を与えるには、 CSS のbackground-color プロパティを使用してください。

char非推奨;

この属性は、列内のセルで揃える文字を設定します。典型的な値に、数値や金額を揃えようとするときのピリオド (.) があります。align 属性がchar に設定されていない場合、この属性は無視されます。

charoff非推奨;

この属性は、char 属性で指定した揃え文字から列のデータをオフセットする文字数を示します。

height非推奨;

この属性はセルの高さの推奨値を定義するために使用されます。代わりの CSS のheight プロパティを使用してください。

scope非推奨;

これは列挙型の属性で、この (<th> で定義されている) 見出し要素が関連するセルを定義します。この属性は<th> 要素のみに、行と列のどちらの見出しであるかを定義するために使用してください。

valign非推奨;

この属性は、表本体の各行のセルにおける垂直方向のテキスト配置方法を指定します。以下の値が指定可能です。

baseline: テキストを可能な限りセルの下端に近づけますが、下端ではなく文字のベースラインに揃えます。文字がサイズ全体に渡る場合は、bottom と同じ効果になります。
bottom: テキストを可能な限りセルの下端に近づけて配置します。
middle: テキストをセル内の中央に置きます。
top: テキストを可能な限りセルの上端に近づけて配置します。

同様の効果を実現するには、代わりに CSS のvertical-align プロパティを使用してください。

width非推奨;

この属性は、セルの推奨する幅を定義します。代わりに CSS のwidth プロパティを使用してください。

例

<td> 要素の例については、<table> を参照してください。

技術的概要

コンテンツカテゴリー	区分化ルート
許可されている内容	フローコンテンツ
タグの省略	開始タグは必須。直後に`<th>` 要素または`<td>` 要素がある場合、または親要素内で以降のデータがない場合は終了タグが省略可能。
許可されている親要素	`<tr>` 要素
暗黙の ARIA ロール	`cell`（`<table>` 要素の子孫である場合）
許可されている ARIA ロール	すべて
DOM インターフェイス	`HTMLTableCellElement`