<td> …… テーブル内のデータセルを表す
広告
<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>
↓↓↓
ブラウザ上の表示
商品名 | 在庫 | 入荷予定 | 今月販売 | 来月在庫 | |
---|---|---|---|---|---|
今週 | 来週 | ||||
炭酸水 | 500 | 500 | 600 | 800 | 800 |
ジュースA | 300 | 600 | 700 | 900 | 700 |
ドリンクX | 100 | 100 | 200 | 200 | 200 |
■使用例
以下のサンプルは、複雑になりがちなテーブルの構造が明確になるように、
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>
↓↓↓
ブラウザ上の表示
消極タイプ | 性格 | 積極タイプ |
---|---|---|
受動的な傾向 | 傾向 | 能動的な傾向 |
慎重で控えめ | 長所 | 大胆で軽やか |
■関連項目
広告