HTML <td>

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>）の間にはフローコンテンツを含めることができる。具体的には次の要素である。

• テキスト
• <a>
• <abbr>
• <address>
• <aside>
• <audio>
• <b>
• <bdo>
• <bdi>
• <blockquote>
• <br>
• <button>
• <canvas>
• <cite>
• <code>
• <data>
• <datalist>
• <del>
• <details>
• <dfn>
• <div>
• <dl>
• <em>
• <embed>
• <fieldset>
• <figure>
• <footer>
• <form>
• <h1>
• <header>
• <hgroup>
• <hr>
• <i>
• <iframe>
• <img>
• <input>
• <ins>
• <kbd>
• <label>
• <main>
• <map>
• <mark>
• <math>
• <menu>
• <meter>
• <nav>
• <noscript>
• <object>
• <ol>
• <output>
• <p>
• <picture>
• <pre>
• <progress>
• <q>
• <ruby>
• <s>
• <samp>
• <script>
• <section>
• <select>
• <small>
• <span>
• <strong>
• <sub>
• <sup>
• <svg>
• <table>
• <template>
• <textarea>
• <time>
• <ul>
• <var>
• <video>
• <wbr>

タグの省略

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	ゆうちょ銀行

関連記事

• <caption>
• <col>
• <colgroup>
• <table>
• <tbody>
• <tfoot>
• <th>

参考文献

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