Библиотека

Итак приступим.

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

Все начинается с пары тегов 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 каскадных таблиц стилей.

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

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

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

Одной из самых распространенных ошибок является вставка рисунка в ячейку таблицы без употребления параметра выравнивания тега <IMG>. Собственно, когда рисунок расположен в ячейке один и не сопровождается ни текстом, ни какими-либо иными объектами, это не важно. В противном случае, отсутствие выравнивания становится заметным и может испортить весь дизайн. Дело в том, что тег рисунка (изображения) не наследует параметров выравнивания ячейки, он только подчиняется им, как любой другой объект в ячейке. Поэтому, например, при любом выравнивании в ячейке, текст обязательно "уйдет" под изображение. Но вы же хотите, чтобы текст его "обтекал"? В данном случае, необходимо указать в теге IMG параметр выравнивания ALIGN равный LEFT или RIGHT. Тогда изображение будет мягко "окружено" текстом.

Также имеет смысл указать параметры вертикального и горизонтального отступов от изображения VSPACE и HSPACE, так как отступы, заданные для ячейки также не наследуются. В некоторых случаях, необходимо, чтобы часть текста выводилась сбоку от изображения, а остальная уходила под него. При этом, "водораздел" должен быть очень хорошо заметен. В этом случае, используются два варианта. Либо в теге <BR> используется параметр CLEAR=LEFT или CLEAR=RIGHT соответственно, и в этом случае часть текста после тега <BR> будет уходить под изображение, а в выравнивании последнего можно использовать свойство MIDDLE, либо, используя, опять таки, табличные ячейки, поместить изображение в одну, "боковой" текст в соседнюю, а "нижний" - соответственно, в ячейку, расположенную в нижестоящей строке и развернутую на всю эту строку (COLSPAN=2). Разумеется, последний способ громоздок, зато гарантировано, что подобное размещение правильно интерпретирует любой браузер, понимающий таблицы.

Второй распространенной ошибкой является несоответствие размеров ячеек с размерами вставляемого изображения. Это опасно, когда размеры изображения превышают размеры ячейки. В этом случае ячейка безжалостно растягивается, что, безусловно, влияет на расположение соседних элементов на странице. Например, использование графической линии в качестве разделительной черты, вместо <BR>, без согласования с размерами ячейки-«носителя», может привести к искажению размеров всей таблицы.

И ещё один момент. Фон ячейки можно задать поместив внутри неё картинку, но гораздо практичнее использовать параметр BACKGROUND. В этом случае мы можем вставить в одну ячейку два различных самостоятельных изображения, одно поверх другого, создав иллюзию их послойного размещения. Одно будет задано параметром BACKGROUND тега <TD>, а другое тегом <IMG>. Надо только не забыть, что размеры ячейки должны совпадать с размерами изображения (тогда не появится эффект "размножения" картинки или её "обрезания"), размещенного в фон, а самостоятельное изображение должно быть значительно меньше фонового, иначе теряется весь смысл подобного дизайна.

Таким же образом можно группировать изображение и текст, что небесполезно при дизайне, например, ссылок (только в этом случае шрифт должен быть фиксированной величины). Не бесполезно это и просто при использовании относительно больших законченных изображений (например, групповых фотографий) в качестве фона...

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