HTML5タグ虎の巻

tdタグ

tdは、表のセルを定義するタグです。

tableの行を定義するtrタグの子要素として使用します。

解説

tdタグは tr タグの子要素として使用し、タイトル以外のセルを作る時に使用します。
タイトルを表すセルは th を、それ以外のセルは td を使用するという使い分けをします。

コンテンツ・モデル

カテゴリー
(自カテゴリ)
セクショニング・ルート
コンテキスト
(親カテゴリ)
trタグ
コンテンツ・モデル
(子カテゴリ)
フロー・コンテンツ

属性

tdタグには以下の属性が指定できます。

【属性】
属性説明
colspanセルを横に結合したい場合、結合するセルの数を指定
(例)colspan="2"
rowspanセルを縦に結合したい場合、結合するセルの数を指定
(例)rowspan="2"
headers関連する見出しセルを指定する
(例)headers="h1"
※見出しのidを指定します。
【主要グローバル属性】
属性説明
classクラスを指定する
(例)class="hoge"
idIDを指定する
(例)id="foo"
styleスタイルを指定する
(例)style="color:red;"
titleツールチップを指定する
(例)title="補足情報です"
tabindexTabキーによる移動の順番を指定する
 正数:指定した数値の順にフォーカス移動される
 負数:フォーカスは可能だが、タブ移動時はフォーカス対象とならない
(例)tabindex="10"

その他のグローバル属性値については、グローバル属性をご覧ください。

サンプル

tdタグでセルを定義したサンプル

<table>
  <caption>【在庫一覧】</caption>
  <tr><th>商品</th><th>単価</th><th>個数</th><th>金額</th></tr>
  <tr><td>みかん</td><td>50</td><td>30</td><td>1,500</td></tr>
  <tr><td>りんご</td><td>100</td><td>20</td><td>2,000</td></tr>
  <tr><td>ぶどう</td><td>300</td><td>5</td><td>2,400</td></tr>
</table>
【在庫一覧】
商品単価個数金額
みかん50301,500
りんご100202,000
ぶどう30052,400

セルを縦に結合したサンプル(rowspan)

<table>
  <caption>【在庫一覧】</caption>
  <tr><th>地域</th><th>都道府県</th><th>名物</th></tr>
  <tr><td rowspan="4">東北</td><td>青森県</td><td>りんご</td></tr>
  <tr><td>岩手県</td><td>冷麺</td></tr>
  <tr><td>宮城県</td><td>牛タン</td></tr>
  <tr><td>秋田県</td><td>きりたんぽ</td></tr>
  <tr><td rowspan="3">関東</td><td>千葉県</td><td>落花生</td></tr>
  <tr><td>栃木県</td><td>餃子</td></tr>
  <tr><td>神奈川県</td><td>しゅうまい</td></tr>
  <tr><td rowspan="2">東海</td><td>愛知県</td><td>きしめん</td></tr>
  <tr><td>静岡県</td><td>お茶</td></tr>
</table>
【都道府県別名物】
地域都道府県名物
東北青森県りんご
岩手県冷麺
宮城県牛タン
秋田県きりたんぽ
関東千葉県落花生
栃木県餃子
神奈川県しゅうまい
東海愛知県きしめん
静岡県お茶

rowspanを使うとセルを縦方向に結合できます。

セルを横に結合したサンプル(colspan)

<table>
  <caption>【在庫一覧】</caption>
  <tr><th>商品</th><th>在庫数</th><th>備考</th></tr>
  <tr><td>パイナップル</td><td>30</td><td>甘いです!</td></tr>
  <tr><td>レモン</td><td>85</td><td>酸っぱいです</td></tr>
  <tr><td>バナナ</td><td colspan="2">在庫切れ</td></tr>
  <tr><td>マンゴー</td><td>12</td><td>限定入荷!</td></tr>
  <tr><td>さくらんぼ</td><td colspan="2">在庫切れ</td></tr>
</table>
【在庫一覧】
商品在庫数備考
パイナップル30甘いです!
レモン85酸っぱいです
バナナ在庫切れ
マンゴー12限定入荷!
さくらんぼ在庫切れ

colspanを使うとセルを縦方向に結合できます。

備考

  • tdは「table data cell」の略です。
  • 見た目を変更したい場合は、スタイルシート(CSS)をご使用ください。

関連項目

  • table:表を作成する
  • tr:表の行を定義する
  • th:表のヘッダセルを定義する
  • td:表のセルを定義する
  • tbody:テーブルのメイン領域を表す
  • thead:テーブルのヘッダー行領域を表す
  • tfoot:テーブルのフッター行領域を表す
  • caption:表をのタイトルを指定する
  • colgroup:表の列をグループ化する
  • col:表の列を表す