HTML <thead>タグ
例
<thead>、<tbody>、および<tfoot>要素を持つHTMLテーブル：
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
<thead>タグは、HTMLテーブルのヘッダーコンテンツをグループ化するために使用されます。
この<thead>要素は、<tbody>および<tfoot>要素と組み合わせて使用され、テーブルの各部分（header、body、footer）を指定します。
ブラウザはこれらの要素を使用して、ヘッダーとフッターに関係なくテーブル本体のスクロールを有効にすることができます。また、複数のページにまたがる大きなテーブルを印刷する場合、これらの要素により、テーブルのヘッダーとフッターを各ページの上部と下部に印刷できます。
注：要素には、<thead>1つ以上の
<tr>タグが含まれている必要があります。
<thead>タグは、次のコンテキストで使用する必要があります。<table>要素の子として、
< caption >
および< colgroup>要素の後、および
<tbody>、<tfoot>、および
<tr>要素の前。
ヒント：デフォルトでは、、 < tbody <thead>>、および<tfoot>要素はテーブルのレイアウトに影響しません。ただし、CSSを使用してこれらの要素のスタイルを設定できます（以下の例を参照）。
ブラウザのサポート
| Element | |||||
|---|---|---|---|---|---|
| <thead> | Yes | Yes | Yes | Yes | Yes |
グローバル属性
この<thead>タグは、HTMLのグローバル属性もサポートしています。
イベント属性
この<thead>タグは、HTMLのイベント属性もサポートしています。
その他の例
例
CSSを使用して<thead>、<tbody>、および<tfoot>のスタイルを設定します。
<html>
<head>
<style>
thead {color: green;}
tbody {color: blue;}
tfoot {color: red;}
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
例
<thead>内のコンテンツを（CSSを使用して）整列させる方法：
<table style="width:100%">
<thead
style="text-align:left">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
例
<thead>内のコンテンツを垂直方向に整列する方法（CSSを使用）：
<table style="width:50%;">
<thead
style="vertical-align:bottom">
<tr
style="height:100px">
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
デフォルトのCSS設定
ほとんどのブラウザは<thead>、次のデフォルト値で要素を表示します。
thead {
display: table-header-group;
vertical-align: middle;
border-color: inherit;
}