6. Сложные таблицы

6.1. Расширение ячеек

Рассмотренные ранее таблицы просты в том смысле, что представляют собой прямоугольную сетку, клетки (ячейки) которой образуются в результате пересече­ния т вертикальных столбцов с п горизонтальными рядами. Усложнение таблицы возникает, когда объединяются несколько смежных ячеек простой таблицы. Как объединить две или более ячеек? В HTML это делается путем расширения некото­рой ячейки за счет пространства, занимаемого в таблице соседними ячейками. В данной операции соседними могут быть ячейки справа и снизу. Соответственно расширение данной ячейки может быть горизонтальным (захват пространства яче­ек справа) и вертикальным (захват пространства ячеек снизу).

Для расширения ячейки в тегах <td> и <th> служат атрибуты:

colspan - расширение ячеек по горизонтали (столбцам);

rowspan - расширение ячеек по вертикали (строкам).

Э ти атрибуты принимают целочисленные значения, которые указывают, на сколько ячеек требуется расширить данную ячейку. Расширяемая ячейка захваты­вает пространство смежных ячеек, вытесняя их вправо. Например, таблица на рис. имеет повторяю­щиеся данные в последних двух строках и столбцах, а потому ячейки с одинако­выми данными можно объе­динить путем расширения первой из объединяемых яче­ек. С этой целью следует для ячеек третьего ряда и послед­них двух столбцов указать атрибут rowspan="2" - вер­тикальное объединение двух ячеек, или, другими словами, вертикальное расширение на две ячейки. Кроме того, в исходном коде необходимо удалить ячейки, пространст­во которых захватывают рас­ширяемые ячейки, поскольку иначе нарушится структура таблицы. В данном примере следует удалить из исходной таблицы ячейки четвертого ряда столбцов "Должность" и "Оклад". В лис­тинге 6 приведен код, а на рис. - вид таблицы в окне браузера.

Листинг 6

Теперь рассмотрим построение таблицы с четырьмя ячейками, структура которой показана на рис. Подобные таблицы до­вольно часто используют в каче­стве каркаса Web-страниц. Оче­видно, данная таблица содержит три ряда, причем ячейки первого и последнего рядов расширены горизонтально на две ячейки (colspan="2"). Во втором ряду находятся две ячейки разной ши­рины. Задание параметра width для каждой из них не даст нужно­го результата, если применяется алгоритм фиксированного вывода (table-layout:fixed). Этот алгоритм хорошо работает, если заданы размеры ячеек первого ряда. Но в нашем примере этого нельзя сделать, посколь­ку в первом ряду задана единственная ячейка, хотя она и расширяется на две. При table-layout:fixed две ячейки во втором ряду будут иметь одинаковую ширину. Чтобы сделать их разными по ширине, необходимо прежде задать алгоритм авто­матического вывода таблицы (table-layout:auto), при котором произойдет более глубокий анализ содержимого тега <table>. Код, создающий требуемую таблицу, представлен в листинге 7. Видимые границы между ячейками таблицы установ­лены только ради наглядности.

Листинг 7

Для горизонтального расширения столбцов кроме атрибута colspan во всех те­гах <td> и <th> расширяемого столбца можно указать атрибут span тега <col>. например <col span="3" />