HTML Living Standard/td

td 要素

<td> 要素は、表（<table>）内の「データセル」を定義するために使用されます。データセルは、表の行や列の中で実際のデータを格納する部分を示します。

基本構造

<td> 要素は、<tr>（行）要素内で使用されます。以下のような構造が一般的です：

<table>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
    <td>データ3</td>
  </tr>
</table>

使用例

以下は、<td> 要素を使った簡単な表の例です：

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>Table Data Example</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <table border="1">
      <thead>
        <tr>
          <th>商品名</th>
          <th>価格</th>
          <th>在庫状況</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>ノートパソコン</td>
          <td>100,000円</td>
          <td>在庫あり</td>
        </tr>
        <tr>
          <td>スマートフォン</td>
          <td>80,000円</td>
          <td>在庫なし</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

属性

<td> 要素は、デフォルトではセルにデータを表示しますが、さまざまな属性を使用して動作をカスタマイズできます。

グローバル属性

<td> 要素は、HTML のグローバル属性をサポートします：

class: CSS クラスを指定します。
id: 一意の識別子を指定します。
style: インラインスタイルを指定します。

特別な属性

colspan
- セルが横方向に結合する列数を指定します。
- デフォルト値は 1 です。
例：
```
<td colspan="2">結合されたセル</td>
```
rowspan
- セルが縦方向に結合する行数を指定します。
- デフォルト値は 1 です。
例：
```
<td rowspan="2">結合されたセル</td>
```
headers
- このセルが関連するヘッダーセルの ID を指定します（アクセシビリティ向上のため）。
例：
```
<td headers="header-id">データ</td>
```

スタイリングの例

CSS を使ってデータセルをスタイリングする例を示します：

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>Styled Table Data</title>
    <meta charset="UTF-8">
    <style>
      td {
        padding: 10px;
        text-align: center;
        border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>データ1</td>
        <td>データ2</td>
        <td>データ3</td>
      </tr>
    </table>
  </body>
</html>

アクセシビリティ

アクセシビリティを向上させるために、以下のポイントに注意してください：

headers 属性を使用：
データセルを適切なヘッダーセルに関連付けます。
```
<td headers="price">100,000円</td>
```
適切な構造を保つ：
表を論理的な構造に保つことで、スクリーンリーダーが表を正確に読み取れるようにします。

練習問題

練習1: 3行3列の表を作成し、各セルに異なるデータを入力してください。
練習2: colspan と rowspan を使用して、セルを結合する表を作成してください。
練習3: CSS を使って、セルの背景色と文字揃えを変更してみましょう。