Создание таблиц с ячейками, объединяющими несколько столбцов и несколько строк
Ранее в этой главе вы научились создавать ячейки таблицы с помощью начальных и конечных дескрипторов заголовков столбцов/строк таблицы (<th></th>) и начальных и конечных дескрипторов данных таблицы (<td></ td>). Вы также узнали, как задавать атрибуты width (ширина) и height (высота) в дескрипторах <th> и <td> для определения размеров ячейки. Если ячейки таблицы вы определяете без атрибута cellspan или атрибута гowspan, все ячейки в строке будут иметь одинаковую высоту, а все ячейки в столбце будут иметь одинаковую ширину, как ячейки в таблице, показанной на рис. 2.8.
Рис. 2.8. Таблица, в которой все ячейки в одной и той же строке имеют одинаковую высоту, а в одном и том же столбце — одинаковую ширину
Однако иногда может понадобиться, чтобы ячейки объединяли несколько строк и/или несколько столбцов, как три из ячеек на рис. 2.9. В HTML-дескрипторе определения таблицы предусмотрено два атрибута (coispan (объединение столбцов) и rowspan (объединение строк)), с помощью которых можно задать ширину и/или высоту ячейки как число столбцов и/или строк смежных ячеек.
ПРАКТИКУМ
Чтобы задать ячейку, объединяющую несколько строк, как, например, вторая сверху ячейка в первом столбце на рис. 2.9, укажите атрибут rowspan в дескрипторе <td> или <th> ячейки. Для данного примера, где ячейка объединяет две строки, потребовалось бы написать следующий код:
<td rowspan="2">Строки 1 и 2, столбец 1</td>
Если бы ячейка объединяла три строки, нужно было бы установить значение атрибута rowspan равным "3" и т.д.
Рис. 2.9. Таблица, в которой ячейки в одной и той же строке или столбце имеют разную высоту и ширину
Важно помнить, что, если вы установили атрибут rowspan для ячейки равным "2", в определении таблицы между следующей парой дескрипторов строки таблицы (<tr><tr> ) вы должны набрать на одну пару дескрипторов <td></td> меньше, поскольку в "следующей" строке на один столбец меньше. Например, строка 2 в следующей таблице с тремя строками и двумя столбцами имеет только одну пару начальных и конечных дескрипторов данных таблицы (<td></td>), поскольку первая ячейка из строки 1 распространяется и на вторую строку:
<table><tr><td rowspan=2>Строка 1 и 2 , столбец 1</td>
<td>Строка 1, столбец 2</td></tr>
<tr><!- - ячейка не нужна -->
<td>строка 2, столбец 2</td></tr>
<tr><td>Строка 3, столбец 1</td>
<td>Строка 3, столбец 2</td></tr>
</table>
Аналогично, если вы хотите создать ячейку, объединяющую несколько столбцов, как, например, вторая ячейка слева в нижней строке таблицы на рис. 2.9, укажите в дескрипторе <td> или <th> ячейки атрибут colspan. Для данного примера, в котором ячейка объединяет два столбца, определение ячейки запишется так:
<td colspan="2">Строка 4, столбец 2 и 3</td>
Если бы ячейка объединяла три столбца, значение атрибута colspan было бы установлено равным "3" и т.д. Помните: если вы задали атрибут colspan для ячейки равным "2", между начальным и конечным дескрипторами строки таблицы (<tr></tr>) для текущей строки вы должны набрать на одну пару дескрипторов <td></td> или <th></th> меньше, поскольку количество ячеек (или столбцов) в строке на одну меньше обычного. Например, в строке 2 в следующей таблице с тремя строками, тремя столбцами только две пары начальных и конечных дескрипторов данных таблицы (<td></td>), поскольку первая ячейка в строке обладает шириной двух ячеек:
<table>
<tr><td>Строка 1, столбец 1</td>
<td>Строка 1, столбец 2</td>
<td>Строка 1, столбец 3</td></tr>
<tr><td colspan="2">Строка 2, столбцы 1 и 2</td>
<td>Строка 2, столбец 3</td></tr>
<tr><td>Строка 3, столбец 1</td>
<td>Строка 3, столбец 2</td>
<td>Строка 3, столбец 3</td></tr>
</table>
И, наконец, вы можете создать ячейку, объединяющую и несколько строк, и несколько столбцов, как, например, вторая ячейка сверху на правой стороны таблицы на рис. 2.9, задав в дескрипторе <td> или <th> ячейки оба атрибута — и colspan, и rowspan. Для текущего примера, в котором ячейка объединяет две строки и два .столбца, определение ячейки запишется так:
<td rowspan="2" colspan ="2">Строка 1 и 2, столбцы 3 и 4</td>
Пожалуй, самый простой способ скомпоновать таблицу с ячейками, объединяющими несколько столбцов и/или несколько строк — это нарисовать таблицу на бумаге, а затем набирать ее определение в текстовом редакторе. Добавив описательный текст вроде того, который показан в ячейках таблицы на рис. 2.9, вы легко сможете исправить ошибки в определении таблицы. (Одна из таких ошибок, которую легко обнаружить и исправить благодаря нумерации ячеек, — это добавление лишних пар дескрипторов <td></td> между начальным и конечным дескрипторами строки таблицы (<tr></tr>) для строки под той, в которой вы создали объединяющую два столбца ячейку.)