Читайте также:
|
Многие пользовательские задачи требуют создания таблиц со сложной структу рой. Элемент 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.
17.Дизайны с фиксированной и непостоянной шириной, гибкая разметка. Абсолютное, фиксированное и относительное позиционирование.
Один из эффективных приёмов позиционирования состоит в том, чтобы размещать маленькие объекты относительно других объектов на странице, например, блок внутри блока. Для этого блок-контейнер позиционируют относительно (при этом он остаётся на месте и не выбивается из нормального потока), а внутренний блок - абсолютно. Точнее, абсолютная позиция отсчитывается от первого блока в ряду контейнеров, который имеет позиционирование absolute, relative или fixed (но неstatic). Если такого контейнера нет, то им считается окно. Пример 6.8 показывает размещение абсолютно позиционированного элемента span в правом нижнем углу его контейнера div.
Дата добавления: 2015-02-16; просмотров: 115 | Поможем написать вашу работу | Нарушение авторских прав |