td要素
td要素は表のセルをマークアップするための要素です。
tr要素の子要素として利用できます。
<table>
<thead>
<tr>
<th>見出し1</th>
<th>見出し2</th>
</tr>
</thead>
<tbody>
<tr>
<td>本文1-1</td>
<td>本文1-2</td>
</tr>
<tr>
<td>本文2-1</td>
<td>本文2-2</td>
</tr>
</tbody>
</table>colspan属性
colspan属性を指定することで横方向のセルを連結させることができます。値には連結したいセルの数を数値を指定することができます。
以下のサンプルではtfood要素内のtd要素を3つ連結してマークアップしています。
<table>
<thead>
<tr>
<th>品目</th>
<th>単価</th>
<th>数量</th>
<th>値段</th>
</tr>
</thead>
<tbody>
<tr>
<td>アイテム1</td>
<td>¥1,000</td>
<td>2</td>
<td>¥2,000</td>
</tr>
<tr>
<td>アイテム2</td>
<td>¥500</td>
<td>1</td>
<td>¥500</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">合計</td>
<th>¥2,000</th>
</tr>
</tfoot>
</table>rowspan属性
rowspan属性を指定することで縦方向のセルを連結させることができます。値には連結したいセルの数を数値を指定することができます。
以下のサンプルでは値段のセルを縦方向に3つ結合しています。
<table>
<tr>
<th rowspan="3">商品</th>
<td>アイテム1</td>
<td rowspan="3">値段</td>
<td>1,000円</td>
</tr>
<tr>
<td>アイテム2</td>
<td>2,000円</td>
</tr>
<tr>
<td>アイテム3</td>
<td>3,000円</td>
</tr>
</table>ブラウザでは以下のように表示されます(解りやすいようにtd要素とth要素のCSSにborderを指定しています。)。
headers属性
headers属性は見出しとなるセルを指定するための属性です。見出しとなるセルにはid属性を付加しておき、headers属性には指定されているid属性を指定します。
下記のサンプルではtbody要素内のtd要素はthead要素内のth要素(#m1と#m2)と関連付け、tfoot要素内のtd要素はtfoot要素内のth要素(#m3)とthead要素内のth要素(#m2)と関連付けを行なっています。
<table>
<thead>
<tr>
<th id="m1">商品名</th>
<th id="m2">値段</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="m1">商品1</td>
<td headers="m2">1,000円</td>
</tr>
<tr>
<td headers="m1">商品2</td>
<td headers="m2">500円</td>
</tr>
</tbody>
<tfoot>
<tr>
<th id="m3"td>合計</th>
<td headers="m2 m3">1,500円</td>
</tr>
</tfoot>
</table>参考URL
4.9.9 The td element - HTML5 - W3C
4.9.9 The td element - HTML5.1 - W3C
登録日 : 2014年06月29日 最終更新日 : 2014年7月4日