Тег tfoot

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

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

Пример

Давайте группе рядов, объединенных тегом tfoot, добавим красный цвет текста с помощью свойства 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>

tfoot {
	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>

tfoot {
	color: red;
}

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