<td> 要素
は、table
の中のデータセルを表します。
- カテゴリー
- セクショニング・ルート
- 配置場所
<tr> 要素
の子要素として。- 内容
- フロー・コンテンツ
- 属性
-
colspan="連結する列の数"
-
右側にあるセルを指定した数だけ連結し、ひとつのセルとして表示します。値は0より大きい有効な非負整数でなければなりません。
<table> <caption>ランキング表</caption> <tr><th> </th><th> 1月 </th><th> 2月 </th><th> 3月 </th></tr> <tr><th>デキ杉ヤル夫</th><td> 1位 </td><td> 1位 </td><td> 1位 </td></tr> <tr><th>丸出ダメ男</th><td colspan="3">圏外。</td></tr> </table>
rowspan="連結する行の数"
-
下側にあるセルを指定した数だけ連結し、ひとつのセルとして表示します。値は0より大きい有効な非負整数でなければなりません。
<table> <caption>ランキング表</caption> <tr><th> </th><th>デキ杉ヤル夫</th><th>丸出ダメ男</th></tr> <tr><th> 4月 </th><td> 1位 </td><td rowspan="3">圏外。</td></tr> <tr><th> 5月 </th><td> 1位 </td></tr> <tr><th> 6月 </th><td> 1位 </td></tr> </table>
headers="ヘッダセルのID"
HTML5で追加-
セルの見出しとなっている th 要素の id 属性の値を指定します。複数指定する場合はスペースで区切って指定します。
<table> <caption>ランキング表</caption> <tr><th id="name">名前</th><th id="jan"> 1月 </th><th id="feb"> 2月 </th><th id="mar"> 3月 </th></tr> <tr><th headers="name" id="yaruo">デキ杉ヤル夫</th><td headers="yaruo jan"> 1位 </td><td headers="yaruo feb"> 1位 </td><td headers="yaruo mar"> 1位 </td></tr> <tr><th headers="name" id="dameo">丸出ダメ男</th><td colspan="3" headers="dameo jan feb mar">圏外。</td></tr> </table>
- グローバル属性
accesskey
,autocapitalize
,autofocus
,class
,contenteditable
,data-*
,dir
,draggable
,enterkeyhint
,hidden
,id
,inputmode
,is
,itemid
,itemprop
,itemref
,itemscope
,itemtype
,lang
,nonce
,spellcheck
,style
,tabindex
,title
,translate
サンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>HTML5 › td</title>
<style>
table { border-collapse: collapse; }
th, td { padding: .5em; border: #ccc 1px solid; }
thead th { background: #eef; }
tbody th { background: #fee; }
</style>
</head>
<body>
<h1>HTML5 › td</h1>
<table>
<caption>ランキング表</caption>
<thead>
<tr>
<th id="name">名前</th>
<th id="jan"> 1月 </th>
<th id="feb"> 2月 </th>
<th id="mar"> 3月 </th>
</tr>
</thead>
<tbody>
<tr>
<th headers="name" id="yaruo">デキ杉ヤル夫</th>
<td headers="yaruo jan"> 1位 </td>
<td headers="yaruo feb"> 1位 </td>
<td headers="yaruo mar"> 1位 </td>
</tr>
<tr>
<th headers="name" id="dameo">丸出ダメ男</th>
<td colspan="3" headers="dameo jan feb mar">圏外。</td>
</tr>
</tbody>
</table>
</body>
</html>