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

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

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

Адам Фриман

11.2. Добавление ячеек для заголовков

Элемент th обозначает ячейку заголовка, который позволяет нам провести различие между данными и описаниями этих данных. В таблице 11-5 представлен элемент th.

Таблица 11-5: Элемент th
Элемент th
Тип элемента N/A
Разрешенные родительские элементы Элемент tr
Локальные атрибуты colspan, rowspan, headers, scope
Содержание Фразовый контент
Стиль тегов Открывающий и закрывающий теги
Новый в HTML5 Нет
Изменения в HTML5 Устарели атрибуты abbr, axis, align, width, char, charoff, valign, bgcolor, height и nowrap. Вместо этого нужно использовать CSS
Соглашение по стилям th { display: table-cell; vertical-align: inherit; font-weight: bold; text-align: center; }

Вы видите, как я добавил в таблицу в листинге 11-3 элементы th, чтобы предоставить некоторый контекст для значений данных, содержащихся в элементах td.

Листинг 11-3: Добавление в таблицу ячеек для заголовков
<!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" />
</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 и td, а также создать строку, которая содержит только элементы th. Вы можете увидеть, как браузер отображает это, на рисунке 11-3.

Рисунок 11-3: Добавление в таблицу ячеек для заголовков