HTML `<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 の要素で、データを含む表のセルを定義するもので、<tr> 要素の子要素として使用できます。

試してみましょう

<table>
  <caption>
    Alien football stars
  </caption>
  <thead>
    <tr>
      <th scope="col">Player</th>
      <th scope="col">Gloobles</th>
      <th scope="col">Za'taak</th>
    </tr>
  </thead>
  <tbody>
    <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>
  </tbody>
</table>

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

th[scope="col"] {
  background-color: #505050;
  color: white;
}

th[scope="row"] {
  background-color: #d6ecd4;
}

td {
  text-align: center;
}

tr:nth-of-type(even) {
  background-color: #eeeeee;
}

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 属性に記述してください。なお、この属性は非推奨となっています。できれば、内容をデータセル内に含むようにし、CSS を使用してあふれたテキストを視覚的に切り取るようにしてください。
align: データセルの水平方向の配置を指定します。指定可能な列挙値は、left、center、right、justify、char です。対応している場合、char 値を指定すると、テキストコンテンツは char 属性で定義された文字と、charoff 属性で定義されたオフセットに基づいて配置されます。この属性は非推奨となっているため、代わりに CSS の text-align プロパティを使用してください。
axis: この属性は、空白文字で区切られた文字列のリストを持ちます。各文字列は、このヘッダーを適用するセルグループの id です。
bgcolor: この属性は、列の各セルの背景色を定義します。値は 6 桁の 16 進数による RGB コードで、先頭に '#' が付きます。定義済みの色キーワードの一つを使うこともできます。その他の CSS <color> 値は対応していません。この属性は非推奨となっているため、代わりに CSS の background-color プロパティを使用してください。
char: 何の効果もありません。元々は、コンテンツをデータセルの文字に対して配置することを指定するためのものでした。典型的な値に、数値や金額を揃えようとするときのピリオド (.) があります。 align 属性が char に設定されていない場合、この属性は無視されます。
charoff: 何の効果もありません。本来は、char 属性で指定された配置文字から、データセルのコンテンツをオフセットする文字数を指定するためのものでした。
height: 推奨されるデータセルの高さを定義します。代わりに CSS の height プロパティを使用してください。
scope: ヘッダー（<th>で定義された要素）が関連するセルを指定します。利用可能な値は row、col、rowgroup、colgroup のいずれかです。この属性は、<th> 要素に対してのみ使用し、その要素がヘッダーとなる行または列を定義してください。なお、<td> 要素に対しては、この属性は非推奨となっています。
valign: データセルの垂直方向の配置を指定します。指定可能な値は baseline、bottom、middle、および top です。この属性は非推奨となっているため、代わりに CSS の vertical-align プロパティを使用してください。
width: セルの推奨される幅を定義します。代わりに CSS の width プロパティを使用してください。

使用上のメモ

<td> は、<tr> 要素内でのみ使用できます。
colspan および rowspan 属性を使用してデータセルを複数の列や行にまたがって配置する場合、これらの属性が定義されていないセル（デフォルト値は 1）は、次の図に示すように、テーブル構造内の 1x1 セル分の余白に自動的に配置されます。

メモ: これらの属性は、セルを重ね合わせるために使用することはできません。

例

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

基本データセル

この例では、<td>要素やその他の表関連要素を用いて、発音記号に関するデータを記載した基本的な表を紹介しています。

HTML

表の数行（<tr> 要素）には、見出しセル（<th> 要素）とデータセル（<td> 要素）の両方が含まれています。各行の最初の子要素��ある <th> 要素は、表の最初の列を形成し、それぞれの <th> 要素はその行内のデータセルに対する行ヘッダーを提供します。対応する各 <td> 要素には、それぞれの列ヘッダーおよび行ヘッダーセルに合わせて配置されたデータが含まれています。

メモ: 通常、列の情報を理解しやすくするために、列見出しを含む表のヘッダーグループを実装します。<thead> および <tbody> 要素を使用することで、見出し行とデータ行をそれぞれ表のヘッダー部分と本体部分にグループ化します。この例では、データセルに焦点を当て、例を簡潔にするために、これらを実装していません。

html

<table>
  <tr>
    <th scope="row">A</th>
    <td>Alfa</td>
    <td>AL fah</td>
  </tr>
  <tr>
    <th scope="row">B</th>
    <td>Bravo</td>
    <td>BRAH voh</td>
  </tr>
  <tr>
    <th scope="row">C</th>
    <td>Charlie</td>
    <td>CHAR lee</td>
  </tr>
  <tr>
    <th scope="row">D</th>
    <td>Delta</td>
    <td>DELL tah</td>
  </tr>
</table>

CSS

表とそのセルのスタイル設定には、基本的な CSS が使用されています。CSS の属性セレクタと :nth-of-type 擬似クラスを使用して、セルの見た目を交互に変えることで、表内の情報をより理解しやすく、識別しやすくしています。

css

td,
th {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

tr:nth-of-type(odd) td {
  background-color: #eeeeee;
}

tr th[scope="row"] {
  background-color: #d6ecd4;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

結果

列と行をまたがる

この例では、前の例の基本表に "ABC" というセルを追加することで、機能を拡張・強化しています。

HTML

追加のデータセル（<td> 要素）を、1 行目（<tr>要素）の中に挿入しています。これにより、表に 4 列目が作成されます。

rowspan 属性を使用することで、"ABC" というセルは表の最初の 3 行にまたがっています。続く行の最後のデータセルは、それぞれ 2 列にまたがっています。これは colspan 属性を使用して行われ、テーブル構造内で正しく配置されています。なお、これを示すために、テーブルに追加の行（<tr> 要素）が追加されている点にご注意ください。

html

<table>
  <tr>
    <th scope="row">A</th>
    <td>Alfa</td>
    <td>AL fah</td>
    <td rowspan="3">ABC</td>
  </tr>
  <tr>
    <th scope="row">B</th>
    <td>Bravo</td>
    <td>BRAH voh</td>
  </tr>
  <tr>
    <th scope="row">C</th>
    <td>Charlie</td>
    <td>CHAR lee</td>
  </tr>
  <tr>
    <th scope="row">D</th>
    <td>Delta</td>
    <td colspan="2">DELL tah</td>
  </tr>
  <tr>
    <th scope="row">E</th>
    <td>Echo</td>
    <td colspan="2">ECK oh</td>
  </tr>
</table>

CSS

CSS では、:first-of-type および :last-of-type 擬似クラスを使用して、追加された "ABC" データセルを選択し、スタイルを設定します。

css

tr:first-of-type td:last-of-type {
  width: 60px;
  background-color: #505050;
  color: white;
  font-weight: bold;
  text-align: center;
}

td,
th {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

tr:nth-of-type(odd) td {
  background-color: #eeeeee;
}

tr th[scope="row"] {
  background-color: #d6ecd4;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

結果

データセルと見出しセルの関連付け

データセル（<td> 要素）と見出しセル（<th> 要素）との間のより複雑な関係については、<th> 要素に scope 属性に指定するだけでは、支援技術、特にスクリーンリーダーにとって不十分な場合があります。

HTML

前の例のアクセシビリティを向上させ、例えばスクリーンリーダーが各データセルに関連付けられた見出しを音声で読み上げられるようにするには、headers 属性を id 属性とともに導入することで実現できます。"ABC" というデータセルに関連付けられたそれぞれの行の見出しセル（<th> 要素）、すなわち文字 "A"、"B"、"C" には、id 属性によって一意の識別子が指定されます。そして、"ABC" のデータセル（<td> 要素）は、headers 属性に対して、これらの id 値を空白区切りのリストとして指定します。

メモ: id 属性には、より具体的で有用な値を使用することをお勧めします。文書内のそれぞれの id は、その文書内で一意である必要があります。この例では、headers 属性の概念に焦点を当てているため、id の値��単一の文字になっています。

html

<table>
  <tr>
    <th id="a" scope="row">A</th>
    <td>Alfa</td>
    <td>AL fah</td>
    <td headers="a b c" rowspan="3">ABC</td>
  </tr>
  <tr>
    <th id="b" scope="row">B</th>
    <td>Bravo</td>
    <td>BRAH voh</td>
  </tr>
  <tr>
    <th id="c" scope="row">C</th>
    <td>Charlie</td>
    <td>CHAR lee</td>
  </tr>
  <tr>
    <th scope="row">D</th>
    <td>Delta</td>
    <td colspan="2">DELL tah</td>
  </tr>
  <tr>
    <th scope="row">E</th>
    <td>Echo</td>
    <td colspan="2">ECK oh</td>
  </tr>
</table>

結果

表示結果は前回の例の表と変わりませんが、それぞれのデータセル (<td>) は、その行見出しセル (<th>) と明示的に関連付けられるようになりました。

技術的概要

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

仕様書

Specification
HTML # the-td-element

ブラウザーの互換性

Help improve MDN

Learn how to contribute

This page was last modified on 2026年4月30日 by MDN contributors.

View this page on GitHub • Report a problem with this content

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

HTML

CSS

結果

HTML

CSS

結果

HTML

結果

Help improve MDN

HTML `<td>` 表データセル要素