Главная страница   /   11.5. Связывание заголовков с ячейками (Руководство по HTML5

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

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

Адам Фриман

11.5. Связывание заголовков с ячейками

Элементы td и th определяют атрибут headers, который может быть использован для того, чтобы таблицы легче обрабатывались скрин-ридерами и другими вспомогательными технологиями. Значение атрибута headers – это значение атрибута id одной или нескольких th ячеек. В листинге 11-10 показано, как можно использовать этот атрибут.

Листинг 11-10: Использование атрибута headers
<!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;
		}

		thead [colspan], tfoot [colspan] {
			text-align: center;
		}
	</style>
</head>
<body>
	<table>
		<thead>
			<tr>
				<th id="rank">Rank</th>
				<th id="name">Name</th>
				<th id="color">Color</th>
				<th id="sizeAndVotes" colspan="2">Size & Votes</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th id="first" headers="rank">Favorite:</th>
				<td headers="name first">Apples</td>
				<td headers="color first">Green</td>
				<td headers="sizeAndVote first">Medium</td>
				<td headers="sizeAndVote first">500</td>
			</tr>
			<tr>
				<th id="second" headers="rank">2nd Favorite:</th>
				<td headers="name second">Oranges</td>
				<td headers="color second">Orange</td>
				<td headers="sizeAndVote second">Large</td>
				<td headers="sizeAndVote second">450</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<th colspan="5">&copy; 2011 Adam Freeman Fruit Data Enterprises</th>
			</tr>
		</tfoot>
	</table>
</body>
</html>

Я добавил глобальный атрибут id в каждый из элементов th в thead, и th в tbody. Для каждого td и th в tbody я использовал атрибут headers, чтобы связать ячейку с заголовком столбца. Для элементов td я также указал заголовок строки (заголовок, который появляется в первом столбце).