Все в своих рамках

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

1. Таблицы как таковые.

Для начала, напомню самое простое: как создается каркас таблицы. Все начинается с пары тегов TABLE: <TABLE></TABLE>. Они имеют свои стандартные параметры ALIGN, BORDER, CELLSPACING, CELLPADDING, WIDTH, которые отвечают за выравнивание таблицы относительно окна браузера, за наличие рамки у таблицы, за расстояние между ячейками таблицы и отступы внутри ячеек, за ширину таблицы (как в процентах, так и в пикселях). Далее следует пара тегов, определяющих строку таблицы: <TR></TR> Стандартными параметрами для строки являются ALIGN и VALIGN, отвечающие за выравнивание ячеек внутри строки по горизонтали и по вертикали. Последняя пара тегов - это теги самих ячеек: <TD></TD>. С теми же параметрами, что и у строки. Кроме того, существуют еще и теги, позволяющие в самом коде делить таблицу на соответствующие разделы: THEAD, TH, TBODY и TFOOT. При этом, ТН уже содержит в себе форматирование, позволяющее выделять жирным и выравнивать по центру текст заголовка таблицы. Правда, всё это имеет смысл, если таблица создается с целью именно показать таблицу в HTML-документе. В самом простом варианте (с учётом всех вышеуказанных тегов) табличный код выглядит вот так:

<TABLE ALIGN=left BORDER=1 CELLSPACING=0 CELLPADDING=4 WIDTH=100%>
<THEAD>
<TR ALIGN=center VALIGN=top>
<TH VALIGN=top COLSPAN=3>Заголовок</TH>
</TR>
</THEAD>
<TBODY>
<TR ALIGN=center VALIGN=top>
<TD ALIGN=center VALIGN=top>Ячейка 1</TD>
<TD ALIGN=center VALIGN=top>Ячейка 2</TD>
<TD ALIGN=center VALIGN=top>Ячейка 3</TD>
</TR>
</TBODY>
<TFO OT>
<TR ALIGN=center VALIGN=top>
<TD ALIGN=center VALIGN=top COLSPAN=3>Заключение</TD>
</TR >
</TFOOT>
</TABLE>.

Всё это проще простого, скажете Вы. И что здесь сложного и опасного?
Во-первых, опасность в параметрах. Не все параметры стоит применять, так же, как и не все параметры из тех, что следовало бы, мы применяем. Так, например, для тега TR не обязательно применение параметров выравнивания. Однако они обязательны (!) для применения с тегом TD. Также типичная ошибка, с тегами TR, TD и TH может не применяться параметр WIDTH, однако он очень важен, так влияет на соответствие расположения ячеек в таблице относительно друг друга и таблицы в целом.
Таким образом, создавая таблицу, необходимо указать ширину самой таблицы (а иногда и её высоту - для "благозвучности" дизайна), ширину строки и ячейки/ячеек, горизонтальное выравнивание таблицы и ячейки, а также расстояние между ячейками и внутри-ячеечные отступы. При этом ширина каждой ячейки в строке, если их несколько, должна соответственно быть указанна так, чтобы их сумма соответствовала ширине строки. Однако если указать ширину ячеек, но опустить ширину строки, то может появиться неприятный эффект - "съедание" объектов (например, кнопок HTML), расположенных в ячейках.
Прошу обратить внимание на параметр COLSPAN, присутствующий в ячейках заголовка и заключения таблицы. Он применяется, когда ячеек в строках больше одной и указывает, на ширину скольких колонок растянется данная ячейка. Параметр, аналогичный ему и касающийся количества "перекрываемых" строк, называется ROWSPAN. Пропуск этих параметров, там, где они необходимы, является очень частой ошибкой и приводит к искажению получаемого в браузере изображения.
Кроме основных параметров, в табличных тегах могут применяться дополнительные, которые особенно не влияют на правильное форматирование таблицы. Это стандартные HTML-параметры фонового цвета, цвета рамки (основной, "светлой" и "темной"), параметры STYLE и CLASS каскадных таблиц стилей. Здесь важно не ошибиться с использованием цветов и стилей, чтобы ваша таблица выглядела гармонично и не колола глаза пестротой и неопрятностью дизайна. Также, нужно учитывать, что Netscape Navigator по умолчанию использует для оформления рамки таблицы объемную линию. Он может частично "покрасить" её в указанный вами цвет, но не признает "светло-темного" варианта.
Во-вторых, опасность скрывается в самих таблицах. Нередко, создавая дизайн страницы с помощью таблицы, мы забываем, что ячейки намертво связаны друг с другом. Даже COLSPAN/ROWSPAN не позволяют нам освободиться полностью от тех рамок, в которые нас загоняют столбцы и строки таблицы. А ведь дизайн требует, чаще всего, "вольного" расположения элементов на странице.
В этом случае необходимо прибегнуть к "методу Матрёшки", при котором основная таблица является всего лишь носителем других, функционально значимых таблиц, в которых и располагаются элементы дизайна. На примере это выглядит следующим образом:

<TABLE ALIGN=center BORDER=1 CELLSPACING=0 CELLPADDING=0 WIDTH=100%>
<TR ALIGN=center VALIGN=top WIDTH=100%>
<TD VALIGN=top COLSPAN=3>

</TD>
<TD ALIGN=center VALIGN=top WIDTH=34%>Ячейка 2</TD>
<TD ALIGN=center VALIGN=top WIDTH=33%>Ячейка 3</TD>
</TR>
<TR ALIGN=center VALIGN=top>
<TD ALIGN=center VALIGN=top COLSPAN=3>
<!-- Заключение -- >
<TABLE ALIGN=center BORDER=1 bordercolor=green CELLSPACING=0 CELLPADDING=0 WIDTH=90%>
<TR ALIGN=center VALIGN=top WIDTH=100%>
<TD ALIGN=center VALIGN=top WIDTH=100%>Таблица в конце</TD></TR>
</TABLE>
<!-- Конец Заключения -- >
</TD>
</TR>
</TABLE>

Такой способ позиционирования элементов на Web-странице позволяет размещать объекты относительно произвольно, так как функциональные таблицы "привязаны" только к размеру и формату ячеек, в которых они находятся, но не зависят от размера и формата основной таблицы в целом. Поэтому, при таком позиционировании, не появляется эффекта растягивания, к примеру, колонки с кнопками и ссылками вслед за удлинением центральной колонки Web-страницы при вставке в последнюю огромного размера текста.
Кроме того, такой способ влияет, как ни странно, на форматирование абзацев текстовых блоков на странице. Дело в том, что опыт показывает - Netscape не понимает выравнивание JUSTIFY в ячейке таблицы. Для этого в ячейке ему необходим тег <P ALIGN=JUSTIFY>. Но он также отказывается понимать <P ALIGN=JUSTIFY>, если тег находится в ячейке, которая оперирует параметром COLSPAN. "Матрёшка" спасает положение. Netscape не переносит формат ячейки на таблицу, расположенную в ней, а рассматривает последнюю как целиком самостоятельный элемент.
В "методе Матрёшки" необходимо быть внимательным к тому, в каких единицах вы задаёте размер таблиц - в процентах или в пикселях - и какое выравнивание вы при этом задали. Опять таки, по причине своенравного характера Netscape'а. Иногда, размер внешней таблицы необходимо указывать в пикселях, если вы хотите в последующем указать размеры внутренних таблиц в процентах, а выравнивание обязательно должно быть центральным. Иначе, может случиться так, что внутренняя таблица растянется на огромное расстояние, безобразно исказив внешнюю таблицу и весь дизайн страницы в целом. Вот простой пример:

1) <TABLE ALIGN="center" WIDTH="100%">
2) <TABLE ALIGN="center" WIDTH="600">
3) <TABLE ALIGN="left" WIDTH="600">
4) <TABLE ALIGN="left" WIDTH="100%">

В первых трёх вариантах, при указанных условиях, ничего страшного не произойдет. Однако в четвёртом, таблицу растянет так, что её правый край вы не сможете увидеть вовсе!

2. Таблицы и графика.

Таблицы являются незаменимым инструментом любого Web-дизайнера для размещения графики на странице. Это уже аксиома. Так, используя таблицу, можно сгруппировать отдельные графические файлы, выполняющие самостоятельные функции, в законченное изображение, например заголовок.
Однако, размещение графики в ячейках таблицы тоже может сопровождаться совершением целого ряда ошибок.
Одной из самых распространенных ошибок является вставка рисунка в ячейку таблицы без употребления параметра выравнивания тега <IMG>. Собственно, когда рисунок расположен в ячейке один и не сопровождается ни текстом, ни какими-либо иными объектами, это не важно. В противном случае, отсутствие выравнивания становится заметным и может испортить весь дизайн.
Дело в том, что тег рисунка (изображения) не наследует параметров выравнивания ячейки, он только подчиняется им, как любой другой объект в ячейке. Поэтому, например, при любом выравнивании в ячейке, текст обязательно "уйдет" под изображение. Но вы же хотите, чтобы текст его "обтекал"? В данном случае, необходимо указать в теге IMG параметр выравнивания ALIGN равный LEFT или RIGHT. Тогда изображение будет мягко "окружено" текстом.
Также имеет смысл указать параметры вертикального и горизонтального отступов от изображения VSPACE и HSPACE, так как отступы, заданные для ячейки также не наследуются.
В некоторых случаях, необходимо, чтобы часть текста выводилась сбоку от изображения, а остальная уходила под него. При этом, "водораздел" должен быть очень хорошо заметен.
В этом случае, используются два варианта. Либо в теге <BR> используется параметр CLEAR=LEFT или CLEAR=RIGHT соответственно, и в этом случае часть текста после тега <BR> будет уходить под изображение, а в выравнивании последнего можно использовать свойство MIDDLE, либо, используя, опять таки, табличные ячейки, поместить изображение в одну, "боковой" текст в соседнюю, а "нижний" - соответственно, в ячейку, расположенную в нижестоящей строке и развернутую на всю эту строку (COLSPAN=2). Разумеется, последний способ громоздок, зато гарантировано, что подобное размещение правильно интерпретирует любой браузер, понимающий таблицы.
Второй распространенной ошибкой является несоответствие размеров ячеек с размерами вставляемого изображения. Это опасно, когда размеры изображения превышают размеры ячейки. В этом случае ячейка безжалостно растягивается, что, безусловно, влияет на расположение соседних элементов на странице. Например, использование графической линии в качестве разделительной черты, вместо <BR>, без согласования с размерами ячейки-<носителя>, может привести к искажению размеров всей таблицы. Избежать этого, конечно же, можно только согласованием размеров.
Кроме ошибок, часто допускается невнимание к стандартным возможностям табличных тегов. Например, кто из вас серьезно задумывался над возможностями параметров фона, которые, кстати, поддерживаются и строками, и ячейками? Конечно, с помощью BGCOLOR можно задать цвет таблицы, строки и ячейки, как вместе, так и по отдельности. С помощью BACKGROUND можно вставить изображение в качестве фона. В этом случае оно будет заполнять всю площадь ячейки, строки, таблицы. Тут-то и начинается самое интересное.
Мы можем вставить в одну ячейку два различных самостоятельных изображения, одно поверх другого, создав иллюзию их послойного размещения. Одно будет задано параметром BACKGROUND тега <TD>, а другое тегом <IMG>. Надо только не забыть, что размеры ячейки должны совпадать с размерами изображения (тогда не появится эффект "размножения" картинки или её "обрезания"), размещенного в фон, а самостоятельное изображение должно быть значительно меньше фонового, иначе теряется весь смысл подобного дизайна.
Таким же образом можно группировать изображение и текст, что небесполезно при дизайне, например, ссылок (только в этом случае шрифт должен быть фиксированной величины). Не бесполезно это и просто при использовании относительно больших законченных изображений (например, групповых фотографий) в качестве фона...
Конечно же, возможности таблиц не безграничны, но и не до конца раскрыты. Я попробовал описать лишь малую их часть в данной статье и, надеюсь, она принесет вам пользу.
Удачи!

Автор: Дмитрий М. Сагайдак