HTML <td> element

HTMLの<td>タグを使うと、表(テーブル)にセル(table data)を挿入することができます。このページではtd要素の使い方をご紹介ます。

書式

<td>
  <!-- flow content -->
</td>

HTMLでは終了タグを省略できます。XHTMLでは省略できません。 開始タグと終了タグの間にはブロック要素またはインライン要素が任意回数表れます。 TR要素タイプの内容モデルで、<tr> と </tr> の間に1回以上現れます。

属性

次に示す属性を td 要素に指定できる。

class
CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。
colspan
横方向に連結するセルの数を指定する。
<table>
  <tbody>
    <tr>
      <td style="border: 1px solid gray">first</td>
      <td style="border: 1px solid gray">second</td>
    </tr>
    <tr>
      <td colspan="2" style="border: 1px solid gray">third</td>
    </tr>
  </tbody>
</table>
first second
third
headers
このセルのヘッダセル
id
要素の識別子を指定する。
ondblclick
table 要素をダブルクリックしたとき実行する JavaScript を指定する。
rowspan
縦方向に連結するセルの数を指定する。
<table>
  <tbody>
    <tr>
      <td style="border: 1px solid gray">first</td>
      <td rowspan="2" style="border: 1px solid gray">second</td>
    </tr>
    <tr>
      <td style="border: 1px solid gray">third</td>
    </tr>
  </tbody>
</table>
first second
third
style
CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

コンテンツモデル

td 要素の開始タグ(<td>)と終了タグ(</td>)の間にはフローコンテンツを含めることができる。具体的には次の要素である。

タグの省略

td要素の終了タグは、td要素の直後にtdまたはth要素が続く場合、または親要素にそれ以上内容がない場合に省略することができる。

<tr>
  <td>first
  <td>second
  <td>third
</tr>

CSS

border
境界線の太さ、種類、色を指定するCSSプロパティ
<table>
  <caption>金融機関コード</caption>
  <thead>
    <tr>
      <th>コード</th>
      <th>金融機関</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="border: 1px solid black;">0001</td>
      <td style="border: 1px solid black;">みずほ銀行</td>
    </tr>
    <tr>
      <td style="border: 1px solid black;">9900</td>
      <td style="border: 1px solid black;">ゆうちょ銀行</td>
    </tr>
  </tbody>
</table>

上記のHTMLはウェブブラウザで下記のように表示される。

金融機関コード
コード 金融機関
0001 みずほ銀行
9900 ゆうちょ銀行
border-bottom
下の境界線の太さ、種類、色を指定するCSSプロパティ
金融機関コード
コード 金融機関
0001 みずほ銀行
9900 ゆうちょ銀行
border-left
左の境界線の太さ、種類、色を指定するCSSプロパティ
金融機関コード
コード 金融機関
0001 みずほ銀行
9900 ゆうちょ銀行
border-right
右の境界線の太さ、種類、色を指定するCSSプロパティ
金融機関コード
コード 金融機関
0001 みずほ銀行
9900 ゆうちょ銀行
border-top
上の境界線の太さ、種類、色を指定するCSSプロパティ
金融機関コード
コード 金融機関
0001 みずほ銀行
9900 ゆうちょ銀行

関連記事

参考文献

Web Hypertext Application Technology Working Group (2022) "Tabular data" HTML Living Standard