Использования рамок в элементе table

Элемент table определяет атрибут border. Если вы применяете этот атрибут, то это говорит браузеру, что вы используете table для представления табличных данных, а не для верстки других элементов. Большинство браузеров реагируют на атрибут border, рисуя рамку вокруг таблицы и каждой отдельной ячейки. В листинге 11-14 показано применение атрибута border.

Листинг 11-14: Использование атрибута border

<!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 border="1">
		<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>

Значение, присвоенное атрибуту border, должно быть 1 или пустой строкой (""). Этот атрибут не управляет стилем рамки. Это нужно делать с помощью CSS. Вы можете увидеть, как Google Chrome реагирует на присутствие атрибута border, на рисунке 11-13. (Заметьте, что я удалил элемент style из этого примера, чтобы подчеркнуть результат использования атрибута border).

Рисунок 11-13: Результат использования атрибута border элемента table

Стили по умолчанию для рамки, которые применяют браузеры, не особенно привлекательны, так что обычно мы используем CSS в дополнение к атрибуту border.

Совет
Вы не должны применяться атрибут border в таблице, чтобы иметь возможность определить рамки при помощи CSS. Однако если вы не применяете атрибут border, браузер может свободно предположить, что вы используете таблицу для верстки, и он может отобразить таблицу самым неожиданным образом. Когда я писал это, основные браузеры не обращали особого внимания на атрибут border (кроме применения рамки по умолчанию), но это может измениться в будущем.

Даже если атрибут border заставляет браузер применять рамки к таблице и каждой ячейке, вы все равно должны ориентироваться на каждый элемент по отдельности в CSS селекторах, чтобы заменить ее. У вас появляется огромный выбор, когда дело доходит до создания CSS селекторов: вы можете работать с внешней рамкой таблицы через элемент table; с заголовками, телом и нижним колонтитулом через элементы thead, tbody и tfoot; со столбцами через элементы colspan and col; и отдельными ячейками при помощи элементов th и td. И если ничего не помогает, вы все еще можете явно создать целевые элементы при помощи глобальных атрибутов id и class.

11.9. Резюме

или RSS канал: