トップページ  > HTML Living Standard  > <td>

★HTML Living Standard リファレンス

<td> …… テーブル内のデータセルを表す
Internet Explorer Microsoft Edge Google Chrome Safari Firefox Opera
広告

<td>タグは、テーブル内のデータセルを表す際に使用します。

td要素は、tr要素の子として配置します。 tr要素はテーブル内の行を表し、 th要素とtd要素は行内のセルを表します。 th要素はヘッダーセル、td要素はデータセルです。

終了タグ</td>の省略について

td要素の直後にtd要素やth要素が続く場合、または、 親要素にそれ以上のコンテンツがない場合は、終了タグ</td>を省略できます。

■属性

colspan属性
セルがまたがる列の数を指定します。 指定する値は、0より大きく1000以下の正の整数である必要があります。
rowspan属性
セルがまたがる行の数を指定します。 指定する値は、65534以下の正の整数である必要があります。 0を指定すると、残りのすべての行にセルがまたがることを意味します。
headers属性
このセルのヘッダーセルを指定します。 複数の値を指定する場合には、スペースで区切って指定します。

■使用例

以下のサンプルは、ある企業の粗利益率を表にしたものです。 th要素はヘッダーセル、td要素はデータセルです。

HTMLソース

<table>
 <caption>粗利益率表</caption>
 <thead>
  <tr><th> </th><th>2008年</th><th>2007年</th><th>2006年</th></tr>
 </thead>
 <tbody>
  <tr><th>純売上高</th><td>$ 32,479</td><td>$ 24,006</td><td>$ 19,315</td></tr>
  <tr><th>売上原価</th><td>$ 21,334</td><td>$ 15,852</td><td>$ 13,717</td></tr>
 </tbody>
 <tbody>
  <tr><th>粗 利 益</th><td>$ 11,145</td><td>$  8,154</td><td>$  5,598</td></tr>
 </tbody>
 <tfoot>
  <tr><th>粗利益率</th><td>34.3%</td><td>34.0%</td><td>29.0%</td></tr>
 </tfoot>
</table>
↓↓↓

ブラウザ上の表示

粗利益率表
2008年2007年2006年
純売上高$ 32,479$ 24,006$ 19,315
売上原価$ 21,334$ 15,852$ 13,717
粗 利 益$ 11,145$ 8,154$ 5,598
粗利益率34.3%34.0%29.0%

■使用例

以下のサンプルは、スプレッドシートのウェブアプリケーションです。 3つのセルはth要素で見出しとしてマークされており、 他のセルはtd要素でデータセルとしてマークされています。 各セルに数値を入力すると、合計値が自動計算されます。

td要素の直後にtd要素やth要素が続く場合、または、 親要素にそれ以上のコンテンツがない場合は、終了タグ</td>を省略できます。

HTMLソース

<form oninput="total.value = parseInt(c1.value) + parseInt(c2.value)
 + parseInt(c3.value) + parseInt(c4.value)">
 <table>
  <tr>
   <th><input value="商品名">
   <th><input value="価格(円)">
  <tr>
   <td><input value="りんご">
   <td><input id="c1" name="c1" value="0">
  <tr>
   <td><input value="みかん">
   <td><input id="c2" name="c2" value="0">
  <tr>
   <td><input value="バナナ">
   <td><input id="c3" name="c3" value="0">
  <tr>
   <td><input value="ぶどう">
   <td><input id="c4" name="c4" value="0">
  <tr>
   <th><input value="合計">
   <td><output name="total">自動計算されます</output>
 </table>
</form>
↓↓↓

ブラウザ上の表示

自動計算されます

■使用例

以下のサンプルは、CSSでスタイル指定することでテーブルを見やすくしています。

HTMLソース

<style>
 #zaiko {border-collapse:collapse; border:solid thick}
 #zaiko td {border:solid thin; width:100px; text-align:center; background:#fff;}
 #zaiko th {border:solid thin; width:100px; text-align:center; background:#eef;}
</style>

<table id="zaiko">
 <caption>商品在庫表</caption>
 <thead>
  <tr>
   <th rowspan=2>商品名</th>
   <th rowspan=2>在庫</th>
   <th colspan=2>入荷予定</th>
   <th rowspan=2>今月販売</th>
   <th rowspan=2>来月在庫</th>
  </tr>
  <tr>
   <th>今週</th>
   <th>来週</th>
  </tr>
 </thead>
 <tbody>
  <tr><td>炭酸水</td><td>500</td><td>500</td><td>600</td><td>800</td><td>800</td></tr>
  <tr><td>ジュースA</td><td>300</td><td>600</td><td>700</td><td>900</td><td>700</td></tr>
  <tr><td>ドリンクX</td><td>100</td><td>100</td><td>200</td><td>200</td><td>200</td></tr>
 </tbody>
</table>
↓↓↓

ブラウザ上の表示

商品在庫表
商品名 在庫 入荷予定 今月販売 来月在庫
今週 来週
炭酸水500500600800800
ジュースA300600700900700
ドリンクX100100200200200

■使用例

以下のサンプルは、複雑になりがちなテーブルの構造が明確になるように、 headers属性を使って各データセルがどのヘッダーセルと対応しているかを明示しています。

HTMLソース

<table>
 <caption>性格と傾向</caption>
 <thead>
  <tr>
   <th id="n">消極タイプ</th>
   <th>性格</th>
   <th id="p">積極タイプ</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td headers="n k">受動的な傾向</td>
   <th id="k">傾向</th>
   <td headers="p k">能動的な傾向</td>
  </tr>
  <tr>
   <td headers="n c">慎重で控えめ</td>
   <th id="c">長所</th>
   <td headers="p c">大胆で軽やか</td>
  </tr>
 </tbody>
</table>
↓↓↓

ブラウザ上の表示

性格と傾向
消極タイプ 性格 積極タイプ
受動的な傾向 傾向 能動的な傾向
慎重で控えめ 長所 大胆で軽やか

■関連項目

  • <table> …… テーブル(表)を表す
  • <caption> …… テーブルのキャプションを表す
  • <colgroup> …… テーブル内の列グループを表す
  • <col> …… 列グループ内の列を表す
  • <tbody> …… テーブルのデータ本体を表す
  • <thead> …… テーブルのヘッダーを表す
  • <tfoot> …… テーブルのフッターを表す
  • <tr> …… テーブル内の行を表す
  • <td> …… テーブル内のデータセルを表す
  • <th> …… テーブル内のヘッダーセルを表す
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ