Руководство по HTML5
Адам Фриман
Придание структуры таблице
У вас есть простая таблица, но тут возникает небольшая проблема. Когда вы захотите применить к таблице стили, вам будет трудно отличить элементы 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: Добавление в таблицу нижнего колонтитула