HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<td>
テーブルデータセル（Table Data Cell）要素。表内の個々のデータセルを定義します。
info
概要
<td> 要素（テーブルデータセル要素）は、HTMLのテーブル構造において、<tr>（テーブル行）要素内に配置され、**表の一般的なデータセル**を表します。
表の見出しセルには <th> 要素を使用します。
play_circle
デモ (静的表示)
HTML (Source)
<table style="border: 1px solid #ccc; border-collapse: collapse;">
<tr>
<td style="border: 1px solid #ccc; padding: 8px;">データ 1-1</td>
<td style="border: 1px solid #ccc; padding: 8px;">データ 1-2</td>
</tr>
<tr>
<td style="border: 1px solid #ccc; padding: 8px;">データ 2-1</td>
<td style="border: 1px solid #ccc; padding: 8px;">データ 2-2</td>
</tr>
</table>
Preview (Result)
| データ 1-1 | データ 1-2 |
| データ 2-1 | データ 2-2 |
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| colspan | セルが横方向にまたがる列数（結合する列数）を指定します。デフォルトは 1 です。 |
| rowspan | セルが縦方向にまたがる行数（結合する行数）を指定します。デフォルトは 1 です。値 0 は、セルが行グループ全体（<tbody>など）の最後までまたがることを意味します。
|
| headers | セルに関連付けられた <th> 要素の id を、スペース区切りで指定します。複雑なテーブルでのアクセシビリティ向上に役立ちます。 |
| scope (非推奨) | <th> 要素のための属性です。<td> 要素での使用はHTML5で非推奨になりました。 |
code
実用例
1. 列を結合する (colspan)
<table>
<tr>
<th>名前</th>
<th colspan="2">連絡先</th> <!-- 2列結合 -->
</tr>
<tr>
<td>山田</td>
<td>メール</td>
<td>電話</td>
</tr>
</table>
2. 行を結合する (rowspan)
<table>
<tr>
<th>カテゴリ</th>
<th>商品名</th>
</tr>
<tr>
<td rowspan="2">果物</td> <!-- 2行結合 -->
<td>りんご</td>
</tr>
<tr>
<td>バナナ</td> <!-- 結合セルがあるため、この行のtdは1つ少ない -->
</tr>
</table>
3. colspanとrowspanの組み合わせ
<table>
<tr>
<td colspan="2" rowspan="2">大型セル</td>
<td>小セル 1</td>
</tr>
<tr>
<td>小セル 2</td>
</tr>
</table>
lightbulb
知っておくべき重要事項
info
セルの役割の区別
表のデータ内容には
表のデータ内容には
<td>、行または列の見出し（ヘッダー）には必ず <th> を使用してください。これにより、表の構造が明確になり、ブラウザやスクリーンリーダーがコンテンツを正しく解釈できるようになります。
accessibility_new
複雑なテーブルとheaders属性
複数のヘッダーが関連する複雑なテーブルの場合、
複数のヘッダーが関連する複雑なテーブルの場合、
<td> の **headers 属性**を使用して、関連する <th> 要素の id と明示的に関連付けることで、アクセシビリティが大幅に向上します。