HTML :: Тег <thead>

В HTML тег <thead> (от англ. table head – шапка таблицы) предназначен для группирования одной или нескольких строк вверху таблицы. Обычно в нем располагаются заголовочные ячейки <th>, однако в случае их отсутствия, можно просто группировать строки, применяя к ним общее форматирование через стили CSS. Допускается применение только одного элемента <thead> в пределах одной таблицы, который должен располагаться после элементов <caption> или <colgroup>, если они конечно присутствуют, но перед элементами <tbody>, <tfoot> или <tr>.

Допускается отсутствие строк в секциях <thead>, но если секции в таблице созданы, то использовать строки вне элементов <thead>, <tbody> и <tfoot> не разрешается.

Закрывающий тег может быть опущен, если за ним идет элемент <tfoot> или элемент <tbody>.

Синтаксис

	<table>
		<caption>…</caption>
		<thead>
			<tr>
				<th>...</th>
			</tr>
		</thead>		     		
		<tbody>...</tbody>
		<tfoot>...</tfoot>
	</table>
	
	Закрывающий тег: не обязателен.

Атрибуты

Для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.

Ссылки

Официальный сайт W3C: https://html.spec.whatwg.org/multipage/tables.html#the-thead-element

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/thead

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример №2</title>

	<!-- Для оформления используем стили, а не атрибуты -->
	<style>
		table, th,td{
		border: 1px solid black;
		}
		
		table{
		border-collapse: collapse
		}
	</style>

</head>
<body>

	<table>
	
	<caption>Деление на секции с выделением разным фоном</caption>

	<thead style="background-color: yellow">
		<tr>
			<th>Я &ndash; первая заглавная ячейка </th>
			<th>А я &ndash; вторая заглавная ячейка</th>
		</tr>
	</thead>

	<tbody style="background-color: green">
		<tr>
			<td>Я &ndash; первая ячейка в первой строке тела</td>
			<td>Я &ndash; вторая ячейка в первой строке тела</td>
		</tr>
		<tr>
			<td>Я &ndash; первая ячейка во второй строке тела</td>
			<td>Я &ndash; вторая ячейка во второй строке тела</td>
		</tr>
	</tbody>

	<tfoot style="background-color: grey">
		<tr>
			<td>Итог:</td>
			<td>использовано три фона</td>
		</tr>
	</tfoot>
	</table>	
	
</body>
</html>

Пример №1