td - テーブル(表)のデータセル

テーブル(表)の基本的な構造は、table要素の子要素としてtr要素により表の横一行を定義、 さらにその子要素th要素(ヘッダセル)、td要素(データセル)を定義します。

td要素のブラウザ別サポート状況

- ie6 ie7 ie8 ie9 firefox4 chorme safari5 opera10
td

td要素のHTML4からHTML5への変更点

HTML5ではabbr属性・align属性・axis属性・char属性・charoff属性・height属性・nowrap属性・scope属性・valign属性・width属性 が廃止されました。

コンテンツ属性

グローバル属性 すべての要素で共通に使える属性。HTML5で新たに定義された属性もあります。
colspan 列(縦)方向で結合するセルの数
rowspan 行(横)方向で結合するセルの数
headers セルがどの見出しセルと対応しているかをth要素のid属性の値で指定

「rowspan見本」のサンプル

HTMLコード

<table summary="rowspanの利用例">
<caption>rowspanの利用例</caption>
<tbody>
<tr>
<th rowspan="3">データみだし</th>
<td rowspan="2">テーブルデータ</td>
<td>テーブルデータ</td>
</tr>
<tr>
<td>テーブルデータ</td>
</tr>
<tr>
<td>テーブルデータ</td>
<td>テーブルデータ</td>
</tr>
</tbody>
</table>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「rowspan見本」のサンプルプレビューを確認

「colspan見本」のサンプル

HTMLコード

<table summary="colspanの利用例">
<caption>colspanの利用例</caption>
<tbody>
<tr>
<th colspan="3">データみだし</th>
</tr>
<tr>
<td colspan="2">テーブルデータ</td>
<td>テーブルデータ</td>
</tr>
<tr>
<td>テーブルデータ</td>
<td>テーブルデータ</td>
</tr>
</tbody>
</table>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「colspan見本」のサンプルプレビューを確認

「headers見本」のサンプル

HTMLコード

<table summary="headersの利用例">
<caption>headersの利用例</caption>
<tbody>
<tr>
<th id="title1">データみだし</th>
<th id="title2">データみだし</th>
<th id="title3">データみだし</th>
</tr>
<tr>
<td headers="title1">テーブルデータ</td>
<td headers="title2">テーブルデータ</td>
<td headers="title3">テーブルデータ</td>
</tr>
<tr>
<td headers="title1">テーブルデータ</td>
<td headers="title2">テーブルデータ</td>
<td headers="title3">テーブルデータ</td>
</tr>
</tbody>
</table>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「headers見本」のサンプルプレビューを確認

原文(英語):(http://www.w3.org/TR/2010/WD-html5-20100624/tabular-data.html#the-td-element)