Добавление заголовка таблицы

Элемент 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">&copy; 2011 Adam Freeman Fruit Data Enterprises</th>
			</tr>
		</tfoot>
	</table>
</body>
</html>

В таблице может быть только один элемент caption, и он не обязательно должен быть первым элементом, содержащимся в таблице. Этот элемент всегда будет отображаться над таблицей, независимо от того, где он был определен. Вы можете увидеть заголовок (и стиль, который я применил к нему) на рисунке 11-9.

Рисунок 11-9: Добавление заголовка таблицы

11.7. Работа со столбцами

или RSS канал: