HTML5|on Note

HTML5で使用する要素

on Note

tr要素

tr要素は、表の構成要素である各セルのを示す。よって、tr要素の数に応じて親要素内に行が作成される。

表の各セルは、tr要素内にtd要素(データ)またはth要素(見出し)を指定して作成する。

tr要素は、thead、tbody、tfootの各要素の子要素にあたる。table要素内にtbody要素が含まれない場合に限り、table要素の子要素にもなる。

子要素にできるもの
0個以上のtd要素またはth要素。
指定できる属性
グローバル属性

tr要素の記述に関して

thead、tbody、tfootの各要素内に記述できる。table要素内にtbody要素が含まれていなければ、table要素内に記述することもできる。

td要素

td要素は、親要素であるtr要素の行内にデータ用のセルを作成する。個々のtd要素内に含まれる内容が、表の各セルのデータとなる。

HTML5での分類
Sectioningルート
子要素にできるもの
Flowコンテンツ

td要素で指定できる属性

colspan属性
colspan="数値"
複数の列にまたがった結合セルを構成。
列の数を「1」以上の整数で指定。
rowspan属性
rowspan="数値"
複数の行にまたがった結合セルを構成。
行の数を「0」以上の整数で指定。
headers属性
headers="ID名"
対応するth要素のid属性の値を指定。
グローバル属性
グローバル属性参照。

headers属性では、音声読み上げブラウザなどでの利用備えて、各セルに対応する見出し情報を含めることができる。対応するth要素に予めid属性を設定しておき、headers属性でそのID名を指定する。ID名での大文字・小文字は区別され、また、半角スペースで区切れば複数のID名を指定することができる。

th要素

th要素は、親要素であるtr要素の行内に、見出し項目用のセルを作成する。個々のth要素内に含まれる内容が、見出しセルのデータとなる。

table要素内でcaption、colgroup、theadの各要素の後ろ、そしてtbody要素(もしくはtr要素)の前か後ろに記述する。

子要素にできるもの
Phrasingコンテンツ
scope属性で指定できるキーワード
row:見出し項目が、同じ行内の残りのセルにも適用される。
col:見出し項目が、同じ列内の残りのセルにも適用される。
rowgroup:見出し項目が、同じ行グループ内の全てのセルに適用される。
colgroup:見出し項目が、同じ列グループ内の全てのセルに適用される。
auto:見出し項目が、状況に応じ選択されたセル範囲に適用されるようにする。(自動)

th要素で指定できる属性

colspan属性
colspan="数値"
複数の列にまたがった結合セルを構成。
列の数を「1」以上の整数で指定。
rowspan属性
rowspan="数値"
複数の行にまたがった結合セルを構成。
行の数を「0」以上の整数で指定。
scope属性
scope="キーワード"
見出し項目が適用されるセル範囲をキーワード(row、col、rowgroup、colgroup、autoのいずれか)で指定。
headers属性
headers="ID名"
対応するth要素のid属性の値を指定。
グローバル属性
グローバル属性参照。

headers属性では、音声読み上げブラウザなどでの利用備えて、各セルに対応する見出し情報を含めることができる。対応するth要素に予めid属性を設定しておき、headers属性でそのID名を指定する。ID名での大文字・小文字は区別され、また、半角スペースで区切れば複数のID名を指定することができる。

tr要素、td要素、th要素の記述例

<table border="">
<caption>テーブルタイトル</caption>
<thead>
<rt><th>ヘッダ情報1</th><th>ヘッダ情報2</th><th>ヘッダ情報3</th></tr>
</thead>
<tbody>
<tr><td>データ1</td><td>データ2</td><td>データ3</td></tr>
<tr><td>データ4</td><td>データ5</td><td>データ6</td></tr>
</tbody>
<tfoot>
<tr><td colspan="2">フッタ情報1・2</td><td>フッタ情報3</td></tr>
</tfoot>
</table>
メニュー