td要素

td要素は、table要素のセルのデータを表します。


例a)1行に2つのセル。

<table border="1">
<tr><td>AAA</td><td>BBB</td></tr>
</table>

表示)

AAABBB

例b)1行に3つのセル。

<table border="1">
<tr><td>AAA</td><td>BBB</td><td>CCC</td></tr>
</table>

表示)

AAABBBCCC

例c)2行に6つのセル。

<table border="1">
<tr><td>AAA</td><td>BBB</td><td>CCC</td></tr>
<tr><td>DDD</td><td>EEE</td><td>FFF</td></tr>
</table>

表示)

AAABBBCCC
DDDEEEFFF

表、行、列のイメージ。

表、列、行 イメージ table要素


colspan属性

colspan属性は、列を跨ぐセルの数を指定します。値は負ではない整数です。なお、0より大きい値を指定する必要があります。


例d)1行目の1列、2列目の2つのセルが1つのセルになるようにcolspan属性を指定しています。

<table border="1">
<tr>
<td colspan="2">AAA(BBB)</td><td>CCC</td></tr>
<tr>
<td>DDD</td><td>EEE</td><td>FFF</td>
</tr>
</table>

表示)

AAA(BBB)CCC
DDDEEEFFF

※スタイルシートで、table要素の横幅を300pxにしています。(width: 300px;)


rowspan属性

rowspan属性は、行を跨ぐセルの数を指定します。値は負ではない整数です。


例e)1列目の1行、2行目の2つのセルが1つのセルになるようにrowspan属性を指定しています。

<table border="1">
<tr>
<td rowspan="2">AAA(DDD)</td><td>BBB</td><td>CCC</td></tr>
<tr>
<td>EEE</td><td>FFF</td>
</tr>
</table>

表示)

AAA(DDD)BBBCCC
EEEFFF

※スタイルシートで、table要素の横幅を300pxにしています。(width: 300px;)


例f)

<table border="1">
<tr>
<td rowspan="3">AAA,EEE,III</td>
<td colspan="2">BBB,CCC</td>
<td>DDD</td>
</tr>

<tr>
<td>FFF</td>
<td>GGG</td>
<td>HHH</td>
</tr>

<tr>
<td>JJJ</td>
<td>KKK</td>
<td>LLL</td>
</tr>
</table>

表示)

AAA,EEE,IIIBBB,CCCDDD
FFFGGGHHH
JJJKKKLLL

※スタイルシートで、table要素の横幅を300pxにしています。(width: 300px;)


headers属性

headers属性は、ヘッダー・セル(th要素)すなわち、見出しとなるセルとデータ・セル(td要素)の関連を表します。値はヘッダー・セルが持つid名です。また、値は半角スペースで区切りで複数指定することができます。

headers属性を指定することは、音声ブラウザなどのユーザー・エージェントで表を読み上げる際の支援となります。


例g)データ・セルのtd要素の数字「1」は、ヘッダー・セルのth要素のアルファベットの「A」と「D」に関連するデータ、「2」は「B」と「D」、「3」は「C」と「D」…のようにヘッダー・セルとデータ・セルを関連付けています。

<table border="1">
<tr>
<th> - </th>
<th id="a">A</th>
<th id="b">B</th>
<th id="c">C</th>
</tr>

<tr>
<th id="d">D</th>
<td headers="a d">1</td>
<td headers="b d">2</td>
<td headers="c d">3</td>
</tr>

<tr>
<th id="e">E</th>
<td headers="a e">4</td>
<td headers="b e">5</td>
<td headers="c e">6</td>
</tr>

<tr>
<th id="f">F</th>
<td headers="a f">7</td>
<td headers="b f">8</td>
<td headers="c f">9</td>
</tr>
</table>

表示)

- ABC
D123
E456
F789

※スタイルシートで、table要素の横幅を300pxにしています。(width: 300px;)

カテゴリ
セクショニング・ルート
要素を使用することができる場所
tr要素の子。
コンテンツ モデル(内容に含めることのできる要素)
フロー・コンテンツ
コンテンツ属性
グローバル属性colspan属性rowspan属性headers属性

この要素で変更があった属性
colspan属性
この要素で廃止された属性
axis属性、abbr属性、scope属性。また、align属性、bgcolor属性、char属性、charoff属性、height属性、nowrap属性、valign属性、width属性は、CSSでより良い処理ができるため廃止されました。