Тег thead

Тег thead задает верхнюю часть таблицы. Используется для группировки рядов таким образом, чтобы сразу к некоторой группе можно было применить CSS стили. В одной таблице может быть только один тег thead.

Тег thead часто используется совместно с tbody и tfoot для задания верхней части, основной части и нижней части HTML таблицы.

Пример

Давайте группе рядов, объединенных тегом thead, добавим красный цвет текста с помощью свойства color:

<table>
	<thead>
		<tr>
			<th>Имя</th>
			<th>Фамилия</th>
			<th>Зарплата</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Иван</td>
			<td>Иванов</td>
			<td>200$</td>
		</tr>
		<tr>
			<td>Николай</td>
			<td>Сидоров</td>
			<td>1000$</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>2 работника</td>
			<td>-</td>
			<td>сумма: 1200$</td>
		</tr>
	</tfoot>
</table>

thead {
	color: red;
}

table, td, th {
	border: 1px solid black;
}

Пример

А здесь thead стоит не сверху, а tfoot не снизу, тем не менее браузер будет расставлять их по своим местам:

<table>
	<tfoot>
		<tr>
			<td>2 работника</td>
			<td>-</td>
			<td>сумма: 1200$</td>
		</tr>
	</tfoot>
	<thead>
		<tr>
			<th>Имя</th>
			<th>Фамилия</th>
			<th>Зарплата</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Иван</td>
			<td>Иванов</td>
			<td>200$</td>
		</tr>
		<tr>
			<td>Николай</td>
			<td>Сидоров</td>
			<td>1000$</td>
		</tr>
	</tbody>
</table>

table, td, th {
	border: 1px solid black;
}