Объединение ячеек таблицы
Многие пользовательские задачи требуют создания таблиц со сложной структу рой. Элемент 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.
Фиксированное позиционирование
Часто бывает нужно, чтобы некоторые элементы страницы были постоянно видимыми, например, навигационная панель, поле для поиска или логотип сайта, а, как известно, большинство веб-страниц длиннее высоты экрана. Используя значение fixed свойства position, вы можете зафиксировать некоторые элементы в определенных местах, разрешая при этом пользователям прокручивать содержимое очень длинной веб-страницы. Фиксированное позиционирование работает во многом подобно абсолютному — вы точно так же можете использовать свойства top, bottom, left или right для размещения элемента. Как и абсолютное, фиксированное позиционирование удаляет элемент из потока HTML. Он "плавает" над другими частями страницы, которые просто игнорируют его. Фиксированное позиционирование не работает в Internet Explorer версий 6 и ниже.