Поиск

Объединение ячеек таблицы

Многие пользовательские задачи требуют создания таблиц со сложной структу рой. Элемент TABLE оказывается в таких случаях как нельзя более кстати, так ка; позволяет создавать всевозможные формы таблиц. Самое сложное в разработк рамки таблицы — объединение нескольких ячеек в одну. Разберемся, как это делаете* На рис. 6.5 показан пример таблицы, в которой объединены несколько ячеек одноп столбца и несколько ячеек строки. Ниже приведен код этого фрагмента страницы

<TABLE border=4 cellspacing=0 width=70%>
<TR><TD><В>Заголовок 1</Ь>
<TD><В>Заголовок 2</b>
<TR><TD rowspan=3 >Ячейка 1
<TD>Ячейка 2
<TR><TD>Ячейка 3
<ТН><TD>Ячейка 4
<TR><TD colspan=2 а11дп="сеп1ег">Ячейка 5
</table>

Чтобы объединить ячейки столбца, необходимо использовать атрибут rowspai для элемента TD, соответствующего верхней из объединяемых ячеек. Значени<

атрибута определяет количество объединяемых ячеек. Теперь начинается самое сложное. При создании элементов, отвечающих за нижние строки таблицы, необ ходимо пропускать элементы ячеек, расположенных на месте объединения. В на шем примере эти строки содержат по одной ячейке, несмотря на то, что в таблице две колонки.

Аналогичным образом объединяются ячейки в строке. Для этого используется атрибут colspan. В данной строке также оказалось достаточно одного элемента TD. Атрибуты rowspan и colspan могут использоваться совместно в элементе TD. В этом случае в одну ячейку объединяются ячейки из нескольких столбцов и нескольких строк. Пример такой таблицы показан на рис. 6.6. Она создана при помощи следу ющего кода:

<TABLE border=4 cellspacing=0 width=70%>
<TR><TD><В>Заголовок 1</b>
<TD><В>Заголовок 2</b>
<TD><В>Заголовок 3</b>
<TR><TD rowspan=4 со!зрап=2>Ячейка 1
<ТН><TD>Ячейка 2
<TR><TD>Ячейка 3 <TRхTD>Ячейка 4
<TR><TD colspan=3 align="center">Ячейка 5
</table>

Обратите внимание: несмотря на то, что объединяются ячейки трех строк (как в предыдущем примере), значение атрибута rowspan увеличено на 1.