Таблицы до сих пор остаются одним из основных средств форматирования документов для WWW, несмотря на появление таких, казалось бы, более удобных средств, как абсолютное и относительное позиционирование элементов на странице. Дело тут, видимо, в том, что с форматированием страничек посредством таблиц справиться в состоянии любой новичок, в отличие от средств позиционирования, которые требуют знания хотя бы основ DHTML и наличия хотя бы приблизительного представления о свойствах окон и их поведении. Форматирование страниц с помощью таблиц довольно просто даже в текстовых HTML-редакторах, не говоря уж о визуальных, к которым относится изучаемый нами Macromedia Dreamweaver.

Шаг III. Работа с таблицами

Итак, приступим. Для начала попробуем вставить таблицу и разберемся в основных параметрах, которые можно применить к ней с помощью визуальных средств Dreamweaver'а.

Вставим простенькую табличку. Для этого, как вы помните, нужно нажать кнопочку с изображением таблицы на панели инструментов "Objects". В результате появится следующее диалоговое окошко, в котором нам предложат задать основные параметры таблицы.


Задаем нужные нам параметры.

Rows - число строк таблицы, в дальнейшем этот параметр, как и остальные, можно будет изменить.

Columns - число столбцов.

Width - ширина таблицы, справа в выпадающем списке вы можете выбрать, в каких единицах задать этот параметр. Если ширина таблицы будет задана в пикселах, то при любом разрешении экрана у конечного пользователя таблица будет занимать определенное место на экране. Например, если вы зададите ширину таблицы 780 пикселов, то у пользователя с разрешением экрана 640х480 ваша таблица не поместится на экран, и внизу окна браузера появится горизонтальная полоса прокрутки; а у пользователя с разрешением экрана 1600х1200 таблица займет меньше половины ширины экрана. Если же вы задаете ширину таблицы в процентах, то при любом разрешении экрана пользователя таблица займет определенный вами процент экрана - в случае 100% таблица займет весь экран в ширину, независимо от установленного разрешения. О достоинствах и недостатках, а также рекомендуемых областях применения каждого из этих способов мы поговорим позже.

Border - толщина рамки таблицы. По умолчанию (если этот параметр опущен) толщина рамки равна 1 пикселу. Причем, если border задан равным 0 для всей таблицы, то у ячеек этот параметр тоже автоматически станет равным 0. Если border таблицы не нулевой, то вокруг каждой ячейки также будет автоматически отображена рамка. Как обойти это ограничение и для чего это нужно, мы также поговорим позже.

В правом столбце задаются параметры cellspacing и cellpadding таблицы.

Cell Padding - задаем параметр cellpadding. Этот параметр определяет размер отступа от края (границы) ячейки таблицы до ее содержимого. По умолчанию этот параметр не равен нулю, поэтому если вы хотите, чтобы содержимое ячейки вплотную прилегало к ее краю, нужно обязательно вписать "0" в эту графу диалогового окна. Если оставить эту графу незаполненной, то Dreamweaver не впишет параметр cellpadding в HTML-код страницы, браузер применит значение по умолчанию, и между краем ячейки и ее содержимым в вашей таблице будет расстояние, равное 1 пикселу. Это не смертельно, если содержимое ячеек таблицы - обычный текст. А если вы вставили в таблицу рисунок, заботливо порезанный предварительно на части? Между частями изображения будет отступ как минимум 2 пиксела, а это, я думаю, вас не устроит.

Cell Spacing - соответствует параметру cellspacing в HTML-коде. Этот параметр определяет расстояние между границами соседних ячеек таблицы. По умолчанию этот параметр равен двум пикселам, поэтому, если вам нужно вплотную прижать друг к другу ячейки, в эту графу надо обязательно вписать ноль.

Для начала вставим таблицу, состоящую из двух строк и двух столбцов, параметры cellspacing и cellpadding пропишем, соответственно, 5 и 10 (чтобы было понятно визуально, какой параметр на что влияет), border укажем равным одному (чтобы граница была четко видна как для таблицы, так и для каждой ячейки, при этом мы будем иметь на экране эталон толщиной в 1 пиксел), а ширину таблицы установим 75%. Нажимаем "ОК" и получаем вот такую таблицу:

Нам сразу же видно, что толщина границы - 1 пиксел, а расстояние между ячейками - 5 пикселов. Если мы впишем в ячейки текст, отступ от текста до внутренней границы ячейки составит 10 пикселов. Любой из этих параметров мы можем изменить, выделив таблицу и обратившись к панели свойств объекта. Вы, наверное, помните, что эта панелька меняется в зависимости от того, какой объект выделен. В случае с таблицей она будет выглядеть так:


Как видите, все введенные нами при создании таблицы значения атрибутов мы можем быстро и легко изменить при помощи этой панели. И кроме того, мы можем задать еще массу всяких полезных вещей!

V Space и H Space - вертикальный и горизонтальный отступы от таблицы до обтекающего ее текста. Эти атрибуты ведут себя так же, как и аналогичные атрибуты у рисунков.

Light Brdr и Dark Brdr - позволяют при правильном подборе цветов создать объемную границу. Навигатор не поддерживает эти параметры, а в IE (если, повторяю, верно подобраны цвета) такая граница смотрится просто изумительно. Цвета надо подбирать так, чтобы между ними была лишь незначительная разница по яркости в системе HSB - тогда эффект объема будет полным.

Align - выравнивание таблицы на странице. Значение по умолчанию этого параметра может показаться несколько странным - визуально таблица выровнена по левому краю, но справа от нее мы ничего не можем расположить. Поэтому, если вы хотите, чтобы текст обтекал таблицу справа, нужно явно установить значение left.

Bg - перед вами целых два поля с таким обозначением. Верхнее позволяет назначить для таблицы какой-либо фоновый рисунок, а нижнее - фоновый цвет заливки всей таблицы. Обратите внимание: для отдельных ячеек вы можете задать фоновую заливку другого цвета. При этом цвет фона таблицы будет "просвечивать" между ячейками, если параметр cellspacing не равен нулю. Эта особенность позволяет создавать довольно интересные эффекты без использования вложенных таблиц.

Brdr - это поле позволяет задать цвет границы. Будьте внимательны - если вы уже воспользовались заданием цвета для темной и светлой частей границы, лучше оставьте это поле пустым. Иначе даже сам бог не сможет точно ответить на вопрос, какой цвет границы покажет браузер.