Главная страница   /   11.7. Работа со столбцами (Руководство по HTML5

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

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

Адам Фриман

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

При создании и использовании таблиц в HTML мы ориентируемся на строки. Мы размещаем определения наших ячеек внутри элементов tr и создаем таблицы строка за строкой. Из-за этого могут возникнуть неудобства в применении стилей к столбцам, особенно при работе с таблицами, которые содержат нестандартные ячейки. Решение этой проблемы заключается в использовании элементов colgroup и col.

Элемент colgroup представляет собой набор столбцов. В таблице 11-10 показан элемент colgroup.

Таблица 11-10: Элемент colgroup
Элемент colgroup
Тип элемента N/A
Разрешенные родительские элементы Элемент table
Локальные атрибуты span
Содержание Один или несколько элементов col (могут быть использованы только тогда, когда не применяется атрибут span)
Стиль тегов Тег закрытого элемента с атрибутом span; иначе открывающий и закрывающий теги
Новый в HTML5 Нет
Изменения в HTML5 Устарели атрибуты width, char, charoff и valign
Соглашение по стилям colgroup { display: table-column-group; }

В листинге 11-12 показано, как используется элемент colgroup.

Листинг 11-12: Использование элемента colgroup
<!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;
		}

		#colgroup1 {
			background-color: red;
		}

		#colgroup2 {
			background-color: green;
			font-size: small;
		}
	</style>
</head>
<body>
	<table>
		<caption>Results of the 2011 Fruit Survey</caption>
		<colgroup id="colgroup1" span="3" />
		<colgroup id="colgroup2" span="2" />
		<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>

В этом примере я определил два элемента colgroup. Атрибут span определяет, к скольким столбцам применяется элемент colgroup. Первый colgroup в листинге применяется к первым трем столбцам таблицы, а второй элемент относится к следующим двум столбцам. Я применил глобальный атрибут id для каждого элемента colgroup и определил CSS стили, которые используют значения id в качестве селекторов. Результат вы можете увидеть на рисунке 11-10.

Рисунок 11-10: Использование элемента colgroup

На рисунке показаны некоторые важные аспекты использования элемента colgroup. Первое, что нужно знать – это то, что CSS стили, которые применяются к элементам colgroup, имеют более низкую специфичность, чем стили, применяемые напрямую к элементам tr, td и th. Это видно из того, что на стили, применяемые к thead, tfoot и первому столбцу элементов th, никак не повлияли стили, примененные к элементам colgroup. Если я удалю все стили за исключением тех, которые предназначены для элементов colgroup, все ячейки будут изменены, как показано на рисунке 11-11.

Рисунок 11-11: Удаление всех стилей, кроме тех, которые нацелены непосредственно на элементы colspan

Второй момент, который следует отметить, заключается в том, что нестандартные ячейки считаются частью того столбца, с которого они начинаются. Вы можете увидеть это на третьей строке, где ячейка, к которой применяется первый стиль, распространяется в область, которую покрывает второй элемент colgroup.

И, наконец, обратите внимание, что элемент colgroup включает в себя все ячейки в столбце, даже те, которые находятся в элементах thead и tfoot, и это соответствует обоим элементам th и td. Элемент colgroup является особенным, потому что он относится к элементам, которые не содержатся внутри элемента. Это означает, что вы не можете использовать элемент colgroup в качестве основы для более целенаправленных селекторов (например, такой селектор как #colgroup1 > td не соответствует ни одному элементу).

Обработка отдельных столбцов

Вы можете использовать элемент col вместо атрибута span элемента colgroup. Это позволяет определить группы и отдельные столбцы, которые существуют в нем. В таблице 11-11 представлен элемент col.

Таблица 11-11: Элемент col
Элемент col
Тип элемента N/A
Разрешенные родительские элементы Элемент colgroup
Локальные атрибуты span
Содержание Нет
Стиль тегов Тег закрытого элемента
Новый в HTML5 Нет
Изменения в HTML5 Устарели атрибуты align, width, char, charoff и valign
Соглашение по стилям col { display: table-column; }

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

Листинг 11-13: Использование элемента col
<!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;
		}

		#colgroup1 {
			background-color: red;
		}

		#col3 {
			background-color: green;
			font-size: small;
		}
	</style>
</head>
<body>
	<table>
		<caption>Results of the 2011 Fruit Survey</caption>
		<colgroup id="colgroup1">
			<col id="col1And2" span="2" />
			<col id="col3" />
		</colgroup>
		<colgroup id="colgroup2" span="2" />
		<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>

Вы можете использовать атрибут span для создания элемента col, который представляет собой два столбца в colgroup. Элемент col обозначает собой один столбец, если вы не используете атрибут span. В этом примере я применил стиль к colgroup и к одному из содержащихся в нем элементов col. Результат показан на рисунке 11-12.

Рисунок 11-12: Использование элементов colgroup и col для применения стилей к таблице