テグthead
テグ thead は、テーブルの上部を指定します。
一部のグループにすぐにCSSスタイルを適用できるように
行をグループ化するために使用されます。1つのテーブルに
おいて、テグ thead は1つだけしか使用できません。
テグ thead は、しばしば
tbody
および tfoot
と共に使用され、HTMLテーブルの上部、主要部、
下部を指定します。
例
テグ thead でグループ化された行グループに、
color
プロパティを使用してテキストの色を赤に追加してみましょう:
<table>
<thead>
<tr>
<th>Name</th>
<th>Surn</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>name1</td>
<td>surn1</td>
<td>200$</td>
</tr>
<tr>
<td>name2</td>
<td>surn2</td>
<td>1000$</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>count: 2</td>
<td>-</td>
<td>total: 1200$</td>
</tr>
</tfoot>
</table>
thead {
color: red;
}
table, td, th {
border: 1px solid black;
}
:
例
ここでは thead が上部ではなく、tfoot
が下部にありませんが、それでもブラウザはそれらを
適切な位置に配置します:
<table>
<tfoot>
<tr>
<td>count: 2</td>
<td>-</td>
<td>total: 1200$</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>name1</td>
<td>surn1</td>
<td>200$</td>
</tr>
<tr>
<td>name2</td>
<td>surn2</td>
<td>1000$</td>
</tr>
</tbody>
<thead>
<tr>
<th>Name</th>
<th>Surn</th>
<th>Salary</th>
</tr>
</thead>
</table>
table, td, th {
border: 1px solid black;
}
: