Руководство по HTML5
Адам Фриман
Добавление заголовка таблицы
Элемент caption
позволяет определить заголовок и связать его с элементом table
. В таблице 11-9 представлен элемент caption
.
Таблица 11-9: Элемент caption
Элемент | caption |
Тип элемента | N/A |
Разрешенные родительские элементы | Элемент table |
Локальные атрибуты | Нет |
Содержание | Потоковый контент (но не элементы table ) |
Стиль тегов | Открывающий и закрывающий теги |
Новый в HTML5 | Нет |
Изменения в HTML5 | Устарел атрибут align |
Соглашение по стилям | caption { display: table-caption; text-align: center; } |
В листинге 11-11 показано, как используется элемент caption
.
Листинг 11-11: Использование элемента caption
<!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;
}
[colspan], [rowspan] {
font-weight: bold;
border: medium solid black;
}
thead [colspan], tfoot [colspan] {
text-align: center;
}
caption {
font-weight: bold;
font-size: large;
margin-bottom: 5px;
}
</style>
</head>
<body>
<table>
<caption>Results of the 2011 Fruit Survey</caption>
<thead>
<tr>
<th>Rank</th>
<th>Name</th>
<th>Color</th>
<th colspan="2">Size & Votes</th>
</tr>
</thead>
<tbody>
<tr>
<th>Favorite:</th>
<td>Apples</td>
<td>Green</td>
<td>Medium</td>
<td>500</td>
</tr>
<tr>
<th>2nd Favorite:</th>
<td>Oranges</td>
<td>Orange</td>
<td>Large</td>
<td>450</td>
</tr>
<tr>
<th>3rd Favorite:</th>
<td>Pomegranate</td>
<td colspan="2" rowspan="2">Pomegranates and cherries can both come in a range of colors
and sizes.
</td>
<td>203</td>
</tr>
<tr>
<th rowspan="2">Joint 4th:</th>
<td>Cherries</td>
<td rowspan="2">75</td>
</tr>
<tr>
<td>Pineapple</td>
<td>Brown</td>
<td>Very Large</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="5">© 2011 Adam Freeman Fruit Data Enterprises</th>
</tr>
</tfoot>
</table>
</body>
</html>
В таблице может быть только один элемент caption
, и он не обязательно должен быть первым элементом, содержащимся в таблице. Этот элемент всегда будет отображаться над таблицей, независимо от того, где он был определен. Вы можете увидеть заголовок (и стиль, который я применил к нему) на рисунке 11-9.
Рисунок 11-9: Добавление заголовка таблицы