HTML / 要素

td要素の使い方

td要素は、表の中で値や説明などのデータを入れるセルです。どの行・列のデータなのかが伝わるよう、表の見出しにはthを使います。

先に結論

見出しではないデータにtdを使います。見出しを作るときはthを使い、見た目だけで区別しないようにします。

ふつうの表では、列や行に付けたthが、そのセルの内容を説明します。画面読み上げでの伝わり方は、ブラウザーや支援技術によって変わります。

小さな例

<table>
  <caption>くだものの価格</caption>
  <thead>
    <tr><th scope="col">くだもの</th><th scope="col">価格</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">りんご</th><td>120円</td></tr>
    <tr><th scope="row">みかん</th><td>80円</td></tr>
  </tbody>
</table>

くだものの価格
くだもの	価格
りんご	120円
みかん	80円

「120円」は「りんご」の行と「価格」の列にあるデータです。tdだけで見出しとの関係が決まるのではなく、表全体の行・列やthと合わせて意味が伝わります。

tdはtrの中に置く

tdはtr（表の1行を作る要素）の子として置きます。セルの中には、文字だけでなくリンクやリストなども入れられます。終了タグを省略できる場合もありますが、はじめは開始タグと終了タグを両方書くと、セルの範囲を見分けやすくなります。

1つのセルを複数の行・列に広げる

colspanはセルを横方向に、rowspanは縦方向に広げる属性です。たとえば、同じ案内が2列にまたがるときに使います。セルを重ねて配置することはできません。

<tr>
  <th scope="row">営業時間</th>
  <td colspan="2">平日 9:00〜18:00</td>
</tr>

rowspan="0"は、そのセルから同じ行グループの最後まで広げる特別な指定です。通常の表では必要な場合だけ使い、表の構造がわかりやすいかも確認しましょう。

複雑な表では見出しとの関係を書く

1つのデータに複数の見出しが関係する場合は、見出しのthにそれぞれ異なるidを付け、データセルのheadersに関係するIDを空白で区切って書けます。IDは同じ表の見出しを指す必要があります。

<th id="product" scope="row">りんご</th>
<th id="price" scope="col">価格</th>
<td headers="product price">120円</td>

この指定はIDの付け間違いに注意が必要です。まず見出しを整理し、表を簡単にできないか考えましょう。単純な表なら、適切なthとscopeで足りることがあります。

よくある間違い

すべてのセルをtdにする。行や列の見出しにはthを使います。
見出しではない値をthにする。値や説明にはtdを使います。
CSSで文字を太くしただけで、見出しの意味も伝わると思う。見た目の装飾はHTMLの意味を変えません。
セルを結合しすぎて、どの値がどの見出しに関係するか分かりにくくする。