Jun. 3rd,2015
＃
要素について
| カテゴリー | なし |
| 利用場所 | “table”要素の子要素として“caption”要素や“colgroup”要素の後、“tbody”要素や“tfoot”要素の前に(ただし、“table”要素が子要素に他の“thead”要素を持たない場合) |
| 内容 | 0個以上の“tr”要素とスクリプト支援要素 |
| タグの省略 | 開始タグは省略不可 |
| 直後に“tbody”要素もしくは“tfoot”要素が続く場合は終了タグを省略可能 |
“thead”要素は表のヘッダを表す要素です。
表の見出し部分などをグループ化するのために使用することができます。
“thead”要素は“table”要素の子要素として一つだけ配置することができます。
サンプルコード
<table>
<thead>
<tr>
<th>県名</th>
<th>人口</th>
<th>面積(km<sup>2</sup>)</th>
</tr>
</thead>
<tbody>
<tr>
<th>徳島</th>
<td>723,096</td>
<td>4,146.75</td>
</tr>
<tr>
<th>香川</th>
<td>950,799</td>
<td>1,876.78</td>
</tr>
<tr>
<th>愛媛</th>
<td>1,330,122</td>
<td>5,676.16</td>
</tr>
<tr>
<th>高知</th>
<td>691,602</td>
<td>7,103.64</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>合計</th>
<td>3,695,619</td>
<td>18,803.33</td>
</tr>
</tfoot>
</table>
| 県名 | 人口 | 面積(km2) |
|---|---|---|
| 徳島 | 723,096 | 4,146.75 |
| 香川 | 950,799 | 1,876.78 |
| 愛媛 | 1,330,122 | 5,676.16 |
| 高知 | 691,602 | 7,103.64 |
| 合計 | 3,695,619 | 18,803.33 |
＃
属性と値
| 属性 | 値 | ||
|---|---|---|---|
| 属性 | 説明 | 値 | 説明 |
| 必須属性 | |||
| なし | |||
| 任意属性 | |||
| グローバル属性 | |||
過去に定義されていた属性
| 属性 | 値 | ||
|---|---|---|---|
| 属性 | 説明 | 値 | 説明 |
align="" |
セルの内容の水平方向の表示位置 | left | 左揃え |
| center | 中央揃え | ||
| right | 右揃え | ||
| justify | 両端揃え | ||
| char | “char”属性で指定した文字を揃える | ||
| char="" |
揃え文字の指定 | 文字 | 揃え文字 |
| charoff="" |
セルの端から揃え文字までの距離 | 正の整数 | セルの端から揃え文字までの距離のピクセル数 |
| 正の整数% | セルの端から揃え文字までの距離の表示領域に対する割合 | ||
| valign="" |
セルの内容の垂直方向の表示位置 | top | セルの上端に揃える |
| middle | セルの中央に揃える | ||
| bottom | セルの下端に揃える | ||
| baseline | 1行目をベースラインで揃える | ||
＃
仕様書
“thead”要素はHTML2.0の後に発行された“HTML Tables (RFC 1942)”から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。
DOMインターフェース
[Exposed=Window]
interface HTMLTableSectionElement : HTMLElement {
[HTMLConstructor] constructor();
[SameObject] readonly attribute HTMLCollection rows;
HTMLTableRowElement insertRow(optional long index = -1);
[CEReactions] undefined deleteRow(long index);
// also has obsolete members
};
UAスタイルシート
@namespace url(http://www.w3.org/1999/xhtml);
thead {
unicode-bidi: isolate;
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}
thead[hidden] {
display: table-row-group;
visibility: collapse;
}
/* 文書の文字エンコーディングが ISO-8859-8 である場合 */
thead {
unicode-bidi: bidi-override;
}
