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

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

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

Адам Фриман

11.4. Создание нестандартных таблиц

Большинство таблиц являются равномерными сетками, где каждая ячейка занимает одну позицию в сетке. Тем не менее, для представления более сложных данных иногда необходимо создавать нестандартные таблицы, где ячейки распределены по нескольким строкам и столбцам. Вы можете создать такие таблицы, используя атрибуты colspan и rowspan элементов td и th. В листинге 11-7 показано, как использовать эти атрибуты для создания нестандартных таблиц.

Листинг 11-7: Создание нестандартной таблицы
<!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;
		}
	</style>
</head>
<body>
	<table>
		<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>

Если вы хотите растянуть ячейку на несколько строк, вы используете атрибут rowspan. Значение, присваиваемое этому атрибуту, – это число строк, на которые будет растянута ячейка. Точно так же, если вы хотите растянуть ячейку на несколько столбцов, нужно использовать атрибут colspan.

Совет

Значения, присваиваемые rowspan и colspan, должны быть целыми числами. Некоторые браузеры понимают значение 100%, подразумевая под этим все строки или столбцы в таблице, но это не является частью стандарта HTML5 и не реализуется последовательно.

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

Рисунок 11-6: Ячейки на несколько строк и столбцов

Атрибуты colspan и rowspan применяются к самой верхней и самой левой ячейкам той части сетки, которую вы хотите охватить. Обычно элементы td или tr, которые включены в данную ячейку, опускаются. В качестве примера рассмотрите простую таблицу, показанную в листинге 11-8.

Листинг 11-8: Простая таблица
<!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>
		td {
			border: thin solid black;
			padding: 5px;
			font-size: x-large;
		}

		;
	</style>
</head>
<body>
	<table>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
		</tr>
		<tr>
			<td>4</td>
			<td>5</td>
			<td>6</td>
		</tr>
		<tr>
			<td>7</td>
			<td>8</td>
			<td>9</td>
		</tr>
	</table>
</body>
</html>

Таблица в этом примере является обычной сеткой 3x3, как показано на рисунке 11-7.

Рисунок 11-7: Стандартная сетка

Если вы хотите, чтобы ячейка посередине занимала весь столбец, вы применяете атрибут rowspan к ячейке 2, которая является самой верхней (и левой, но это не имеет значения в данном примере) ячейкой той области сетки, которую вы хотите охватить. Вы также должны удалить элементы ячеек, которые охватит расширенная ячейка, в данном случае 5 и 8. Изменения представлены в листинге 11-9.

Листинг 11-9: Расширение ячейки на несколько строк
<!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>
		td {
			border: thin solid black;
			padding: 5px;
			font-size: x-large;
		}

		;
	</style>
</head>
<body>
	<table>
		<tr>
			<td>1</td>
			<td rowspan="3">2</td>
			<td>3</td>
		</tr>
		<tr>
			<td>4</td>
			<td>6</td>
		</tr>
		<tr>
			<td>7</td>
			<td>9</td>
		</tr>
	</table>
</body>
</html>

Результат этих изменений можно увидеть на рисунке 11-8.

Рисунок 11-8: Расширение ячейки по всему столбцу

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

Внимание

Будьте осторожны с созданием перекрывающих друг друга ячеек в одном и том же районе. Цель элемент table заключается в предоставлении табличных данных. Единственной причиной создания перекрывающих друг друга ячеек является необходимость использования элемента table для верстки других элементов, и иногда это должно быть сделано с помощью табличной функции CSS (см. главу 21).