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

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

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

Адам Фриман

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

Элемент 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: Добавление заголовка таблицы