Главная страница   /   11.3. Придание структуры таблице (Руководство по HTML5

Руководство по HTML5

Руководство по HTML5

Адам Фриман

11.3. Придание структуры таблице

У вас есть простая таблица, но тут возникает небольшая проблема. Когда вы захотите применить к таблице стили, вам будет трудно отличить элементы th, которые находятся на собственных строках, от тех, которые смешиваются с данными. В этом нет ничего страшного, просто это требует пристального внимания. В листинге 11-4 показано, как это можно сделать.

Листинг 11-4: Различаем элементы th в таблице
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<meta name="author" content="Adam Freeman" />
	<meta name="description" content="A simple example" />
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
	<style>
		tr > th {
			text-align: left;
			background: grey;
			color: white;
		}

			tr > th:only-of-type {
				text-align: right;
				background: lightgrey;
				color: grey;
			}
	</style>
</head>
<body>
	<table>
		<tr>
			<th>Rank</th>
			<th>Name</th>
			<th>Color</th>
			<th>Size</th>
		</tr>
		<tr>
			<th>Favorite:</th>
			<td>Apples</td>
			<td>Green</td>
			<td>Medium</td>
		</tr>
		<tr>
			<th>2nd Favorite:</th>
			<td>Oranges</td>
			<td>Orange</td>
			<td>Large</td>
		</tr>
		<tr>
			<th>3rd Favorite:</th>
			<td>Pomegranate</td>
			<td>A kind of greeny-red</td>
			<td>Varies from medium to large</td>
		</tr>
	</table>
</body>
</html>

В этом примере я создал один селектор, который соответствует всем элементам th, и второй стиль, который подходит только тем элементам th, которые являются дочерними элементами этого типа в элементе tr. Результат применения этих стилей вы можете увидеть на рисунке 11-4.

Рисунок 11-4: Добавление стилей, которые соответствуют строкам th в таблице

Это вполне рабочий подход, но ему не хватает гибкости. Если я добавлю дополнительные элементы th в строки таблицы, то мой второй селектор больше не будет работать. Я действительно не хочу заново настраивать селекторы каждый раз, когда мне придется менять таблицу.

Для более гибкого решения этой проблемы можно использовать элементы thead, tbody и tfoot. Эти элементы позволяют придавать структуру таблице, и главным преимуществом этой структуры является то, что она делает работу с различными частями таблицы намного проще, особенно когда дело доходит до CSS селекторов.

Обозначение колонтитулов и тела таблицы

Элемент tbody обозначает набор строк, которые составляют тело нашей таблицы, в отличие от строк верхнего и нижнего колонтитулов, которые обозначаются элементами thead и tfoot и которые мы ближайшее время рассмотрим. В таблице 11-6 представлен элемент tbody.

Таблица 11-6: Элемент tbody
Элемент tbody
Тип элемента N/A
Разрешенные родительские элементы Элемент table
Локальные атрибуты Нет
Содержание Ноль или больше элементов tr
Стиль тегов Открывающий и закрывающий теги
Новый в HTML5 Нет
Изменения в HTML5 Устарели атрибуты align, char, charoff и valign
Соглашение по стилям thead { display: table-header-group; vertical-align: middle; border-color: inherit; }

Большинство браузеров автоматически вставляют элемент tbody, когда они обрабатывают элемента table, даже если он не был указан в документе. Это означает, что CSS селекторы, которые работают с имеющимися элементами таблицы, могут привести к ошибке. Например, такой селектор, как table > tr не будет работать, поскольку браузер вставил элемент tbody между элементами table и tr. Для решения этой проблемы необходимо использовать такой селектор, как table > tbody > tr, table tr (без знака >) или даже просто tbody > tr.

Элемент thead определяет одну или несколько строк, которые являются метками для столбцов элемента table. В таблице 11-7 представлен элемент thead.

Таблица 11-7: Элемент thead
Элемент thead
Тип элемента N/A
Разрешенные родительские элементы Элемент table
Локальные атрибуты Нет
Содержание Ноль или больше элементов tr
Стиль тегов Открывающий и закрывающий теги
Новый в HTML5 Нет
Изменения в HTML5 Устарели атрибуты align, char, charoff и valign
Соглашение по стилям thead { display: table-header-group; vertical-align: middle; border-color: inherit; }

Без элемента thead предполагается, что все элементы tr принадлежат к телу таблицы. В листинге 11-5 показано, как я добавляю элементы thead и tbody в таблицу из примера, и, как следствие, теперь можно использовать более гибкие CSS селекторы.

Листинг 11-5: Добавление элементов thead и tbody в таблицу
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<meta name="author" content="Adam Freeman" />
	<meta name="description" content="A simple example" />
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
	<style>
		thead th {
			text-align: left;
			background: grey;
			color: white;
		}

		tbody th {
			text-align: right;
			background: lightgrey;
			color: grey;
		}
	</style>
</head>
<body>
	<table>
		<thead>
			<tr>
				<th>Rank</th>
				<th>Name</th>
				<th>Color</th>
				<th>Size</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>Favorite:</th>
				<td>Apples</td>
				<td>Green</td>
				<td>Medium</td>
			</tr>
			<tr>
				<th>2nd Favorite:</th>
				<td>Oranges</td>
				<td>Orange</td>
				<td>Large</td>
			</tr>
			<tr>
				<th>3rd Favorite:</th>
				<td>Pomegranate</td>
				<td>A kind of greeny-red</td>
				<td>Varies from medium to large</td>
			</tr>
		</tbody>
	</table>
</body>
</html>

Это все может показаться не очень важным, но структура, добавленная в таблицу, гораздо упрощает работу со строками, и менее вероятно, что она сломается, если изменится дизайн таблицы.

Добавление нижнего колонтитула

Элемент tfoot обозначает блок строк, которые формируют нижний колонтитул для таблицы. В таблице 11-8 представлен элемент tfoot.

Таблица 11-8: Элемент tfoot
Элемент tfoot
Тип элемента N/A
Разрешенные родительские элементы Элемент table
Локальные атрибуты Нет
Содержание Ноль или больше элементов tr
Стиль тегов Открывающий и закрывающий теги
Новый в HTML5 Нет
Изменения в HTML5 Сейчас элемент tfoot может быть расположен перед или после элементов tbody или tr. В HTML4 элемент tfoot мог быть расположен только перед этими элементами. Устарели атрибуты align, char, charoff и valign.
Соглашение по стилям tfoot { display: table-footer-group; vertical-align: middle; border-color: inherit; }

В листинге 11-6 показано, как элемент tfoot может быть использован для создания нижнего колонтитула для элемента table. До HTML5 элемент tfoot должен был располагаться перед элементом tbody (или первым элементом tr, если tbody был опущен). В HTML5 вы можете поместить элемент tfoot после tbody или последним элементом tr, что является более логичным и сопоставимым с тем, как таблица (table) отображается в браузере. В листинге 11-6 я разместил элемент tfoot на первом месте, что является вполне приемлемым. У меня такое ощущение, что подход «над-tbody», как правило, более полезен при создании HTML документов программно с помощью шаблонов, а подход «под-tbody» является волне естественным при создании HTML документов вручную.

Листинг 11-6: Использование элемента tfoot
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<meta name="author" content="Adam Freeman" />
	<meta name="description" content="A simple example" />
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
	<style>
		thead th, tfoot th {
			text-align: left;
			background: grey;
			color: white;
		}

		tbody th {
			text-align: right;
			background: lightgrey;
			color: grey;
		}
	</style>
</head>
<body>
	<table>
		<thead>
			<tr>
				<th>Rank</th>
				<th>Name</th>
				<th>Color</th>
				<th>Size</th>
			</tr>
		</thead>
		<tfoot>
			<tr>
				<th>Rank</th>
				<th>Name</th>
				<th>Color</th>
				<th>Size</th>
			</tr>
		</tfoot>
		<tbody>
			<tr>
				<th>Favorite:</th>
				<td>Apples</td>
				<td>Green</td>
				<td>Medium</td>
			</tr>
			<tr>
				<th>2nd Favorite:</th>
				<td>Oranges</td>
				<td>Orange</td>
				<td>Large</td>
			</tr>
			<tr>
				<th>3rd Favorite:</th>
				<td>Pomegranate</td>
				<td>A kind of greeny-red</td>
				<td>Varies from medium to large</td>
			</tr>
		</tbody>
	</table>
</body>
</html>

Я продублировал набор строк из верхнего колонтитула в нижний. Мы вернемся к этому и сделаем нижний колонтитул более интересным далее в этой главе. Я также добавил второй селектор в один из стилей, и теперь элементы th в thead и tfoot оформлены одинаково. На рисунке 11-5 показано, как теперь выглядит таблица с нижним колонтитулом.

Рисунок 11-5: Добавление в таблицу нижнего колонтитула