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

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

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

Примеры

Пример

В данном примере группе рядов, объединенных тегом tfoot, добавлен красный цвет текста с помощью CSS свойства color (для самой таблицы с помощью CSS свойств для красоты добавлена граница border и расстояние между ячейками border-spacing):

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

Результат выполнения кода:

Имя Фамилия Зарплата
Иван Иванов 200$
Николай Сидоров 1000$
2 работника - сумма: 1200$

Пример

В данном примере 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>

Результат выполнения кода:

2 работника - сумма: 1200$
Имя Фамилия Зарплата
Иван Иванов 200$
Николай Сидоров 1000$