tdタグ 👉 表のデータセル

HTMLの<td>ティーディータグは、表(テーブル)のデータセルを表します。

✍️セル:表の1つ1つのマス目のこと
✍️「td」は、Table Data(テーブルデータ)の略です

<table>
  <tr>
    <th>果物</th> <th></th>
  </tr>
  <tr>
    <td>いちご</td> <td>甘い</td>
  </tr>
  <tr>
    <td>レモン</td> <td>酸っぱい</td>
  </tr>
</table>

グレーのセルが<td>

👆「いちご」「甘い」「レモン」「酸っぱい」という1つ1つの情報にデータセル(<td>)が使われています。なお、テーブルの見出しとなっている「果物」と「味」には見出しセル(<th>)が使われます。

✍️このページでは<td>タグの使い方にしぼって解説します。HTMLのテーブル(<table>)の基本的な使い方は、下記ページをご覧ください。

データセル(td)の使い方

td内に画像などを入れてもOK

テーブルのセルには、<img><p><ul><ol><div><span><code>など、さまざまな要素を入れることができます。

<table>
  <tr>
    <th>作品1</th>
    <td><img src="/demo/images/square.png" alt="壁紙1" width="150" height="150"></td>
  </tr>
  <tr>
    <th>作品2</th>
    <td><span class="fin">公開中</span></td>
  </tr>
</table>

👆このように、セル内に画像を入れたり、<span>を使ってテキストを装飾したりなど、さまざまな表現ができます。

tdのabbr属性は廃止

HTML5からは「略語」を表すabbr属性を<td>タグで使用することはできなくなりました。ただし、見出しセル(<th>)では使用できます。
データセル内で「略語」を表したいときは、HTMLタグ<abbr>を使用しましょう。