<td>: TD 要素
最終更新：2026-10-13
<td>TD 要素
行と列が交わる位置のコンテンツを保持する、標準的なテーブルのデータセルです。
| カテゴリ | テーブル |
|---|---|
| コンテンツモデル | フローコンテンツ |
| 許可される親要素 | フローコンテンツを受け入れる要素 |
| 閉じタグ | 必要 </td> タグ |
| ステータス | 標準 |
📝 構文
<td>セルの内容</td>⚙️ 属性
この要素はグローバル属性に加え、以下の属性をサポートします：
| 属性 | 値 | 説明 |
|---|---|---|
colspan | Number of columns to span. | |
rowspan | Number of rows to span. | |
headers | IDs of related header cells (complex tables). |
▶ サンプル
下のコードを編集して、playground でリアルタイム結果を確認：
🌐 ブラウザサポート
| ブラウザ |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <td> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| すべての主要ブラウザでサポート | |||||
ヒント： td と th の違い：th は見出し、td はデータです。違いは意味上のものです。
❓ よくある質問
Qtd と th の違いは何ですか？
A
<td> はデータセル、<th> は表頭セルです（デフォルトで中央寄せ・太字になり、scope の意味も持ちます）。スクリーンリーダーは th を頼りに「第3列・Q2 行」のような行列の関連を作ります。すべて td の表は、補助技術にとって関連のない数字の集まりに見えます。Qtd の colspan と rowspan はどう使いますか？
A
colspan='3' は横に3列またぎ、rowspan='2' は縦に2行またぎます。両方の併用も可能です。結合した分だけ同じ行のセル数を減らす必要があります。縦横の結合を多用すると表の保守が難しくなるので、構造の分割で済むなら結合を濫用しないでください。Qtd の中にブロックレベル要素を置けますか？
A置けます。td は「透明なコンテナ」で、段落・リスト・入れ子のテーブルまで許されます。ただし入れ子のテーブルは可読性とアクセシビリティを落とすので、行や列を分けて済むなら入れ子にしないでください。td 内の長文は裸のテキストではなく
<p> で包むのがおすすめです。🏷️ 関連タグ
💡 関連ケース
今後さらにケーススタディを追加予定です。
📚 関連チュートリアル
