td

提供: ASCII.jp HTMLリファレンス

ver.8~ ver.7~ ver.14~ ver.5.1~ ver.11.5~
意味 表のデータセル
読み方 ティーディー/テーブル・データ・セル

カテゴリー

セクショニング・ルート

親にできる要素/カテゴリー

tr要素の子要素として

子にできる要素/カテゴリー

フロー・コンテンツ

<td 属性="値">~</td>

属性 概要
colspan 整数値 セルが占める列数
rowspan 整数値 セルが占める行数
headers 整数値 セルに対応するth要素のID

グローバル属性

accesskey,class,contenteditable,contextmenu,dir,draggable,hidden,id,lang,spellcheck,style,tabindex,title

説明

 td要素は、表のデータのセルを表します。

 colspan属性では、そのセルが表の中で占める列数を指定します。例えば、「colspan="2"」とすると、そのセルは2列分のスペースを占め、右隣のセルと連結する形になります。

 rowspan属性では、そのセルが表の中で占める行数を指定します。例えば、「rowspan="2"」とすると、そのセルは2行分のスペースを占め、下隣のセルと連結する形になります。

 headers属性では、そのセルに対応する見出しのth要素について、その要素のIDを指定します。1つのtd要素が複数のth要素に対応する場合は、各th要素のIDをスペースで区切って指定します。

サンプル

(body要素の内部のみ掲載)

<table border="1">
<thead>
<tr><th id="number" rowspan="2">番号</th><th id="name" rowspan="2">氏名</th><th colspan="2">住所</th><th id="phone" rowspan="2">電話番号</th></tr>
<tr><th id="pref">都道府県</th><th id="address">市区町村以下</th></tr>
</thead>
<tbody>
<tr><td headers="number">1</td><td headers="name">山田 太郎</td><td headers="pref">東京都</td><td hedaers="address">新宿区若松町X-XX</td><td headers="phone">03-1234-XXXX</td></tr>
<tr><td headers="number">2</td><td headers="name">鈴木 花子</td><td headers="pref">神奈川県</td><td hedaers="address">横浜市港北区菊名X-XX-XX</td><td headers="phone">045-234-XXXX</td></tr>
<tr><td headers="number">3</td><td headers="name">高橋 和夫</td><td headers="pref">埼玉県</td><td hedaers="address">さいたま市浦和区駒場X-XX-XX</td><td headers="phone">048-345-XXXX</td></tr>
</tbody>
</table>

サンプル実行画像

よくある間違い、勘違い

 HTML4ではレイアウトやデザインに関する属性(widthなど)がありましたが、HTML5ではそれらは廃止されました。レイアウトやデザインに関することは、スタイルシートで指定します。

 <td width="100">・・・</td>
 <td style="width : 100px;">・・・</td>
Powered by Web Professional

目次