<td> …… テーブル内のデータセルを表す

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

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

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

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

■属性

■使用例

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

<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>

■使用例

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

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

<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でスタイル指定することでテーブルを見やすくしています。

<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>ジュースＡ</td><td>300</td><td>600</td><td>700</td><td>900</td><td>700</td></tr>
  <tr><td>ドリンクＸ</td><td>100</td><td>100</td><td>200</td><td>200</td><td>200</td></tr>
 </tbody>
</table>

■使用例

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

<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>

■関連項目

Sponsors