<thead要素> - テーブルのヘッダー
公開日:
thead要素は、テーブルのヘッダーを表す要素です。テーブルの中でヘッダーにあたる行を任意の数だけ含めます。
概要
- 名前
- thead (Table header)
- カテゴリー
- なし。
- 配置できる場所
- table要素の子要素として、caption要素、colgroup要素よりも後で、かつ、tbody要素、tfoot要素、またはtr要素よりも前に配置すること。
- コンテンツモデル
- 0個以上のtr要素。
- タグの省略
- tbody要素、tfoot要素が後に続く場合、終了タグを省略できる。
- DOM Interface
- HTMLTableSectionElement
- デフォルトのスタイル
thead { display: table-header-group; vertical-align: middle; border-color: inherit; }
- 仕様書
- https://html.spec.whatwg.org/multipage/tables.html#the-thead-element
属性
グローバル属性
全てのタグで利用できるグローバル属性を指定できます。
サンプルコード
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>【デモ】<thead要素> - テーブルのヘッダー</title>
<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/thead/">
<style>
body {
background-color: #fff ;
}
table, th, td {
border: 1px solid #000 ;
}
thead {
color: red ;
}
</style>
</head>
<body>
<p>thead要素は、テーブルのヘッダーとなる行をマークアップするための要素です。</p>
<p>このデモではヘッダーの行を赤文字にしています。</p>
<table>
<!-- ヘッダー -->
<thead>
<tr>
<th>名前</th>
<th>日付</th>
<th>点数</th>
</tr>
</thead>
<!-- ボディ -->
<tbody>
<tr>
<td>鈴木</td>
<td>2015/12/31</td>
<td>99</td>
</tr>
<tr>
<td>佐藤</td>
<td>2016/03/12</td>
<td>63</td>
</tr>
<tr>
<td>田中</td>
<td>2013/09/21</td>
<td>77</td>
<tr>
</tbody>
<!-- フッター -->
<tfoot>
<tr>
<th colspan="2">平均点</th>
<td>79.6</td>
</tr>
<tr>
<th colspan="2">合計点</th>
<td>239</td>
</tr>
</tfoot>
</table>
</body>
</html>