Создание нестандартных таблиц
Большинство таблиц являются равномерными сетками, где каждая ячейка занимает одну позицию в сетке. Тем не менее, для представления более сложных данных иногда необходимо создавать нестандартные таблицы, где ячейки распределены по нескольким строкам и столбцам. Вы можете создать такие таблицы, используя атрибуты 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">© 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).
