Про таблицы в web-дизайне

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

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

Прежде чем приступить к изучению приемов и хитростей создания таблиц, остановимся вкратце на том, как вообще создать таблицу в HTML. Любая таблица создается по следующей схеме:

<ОТКРЫВАЮЩИЙ ТЕГ ТАБЛИЦЫ>

<ОТКРЫВАЮЩИЙ ТЕГ РЯДА>

<ОТКРЫВАЮЩИЙ ТЕГ ЯЧЕЙКИ>
Текст,картинки или таблицы
<ЗАКРЫВАЮЩИЙ ТЕГ ЯЧЕЙКИ>

<ЗАКРЫВАЮЩИЙ ТЕГ РЯДА>

</ЗАКРЫВАЮЩИЙ ТЕГ ТАБЛИЦЫ>

Любая таблица состоит из рядов, которые состоят из ячеек (столбцов). Внутри ячеек содержится информация, выводимая внутри таблицы. Как видно из приведенной схемы для создания простой таблицы, состоящей из одного ряда и одной ячейки нужно открыть таблицу, открыть ряд, открыть ячейку, а затем закрыть ячейку, закрыть ряд и закрыть таблицу. Чтобы создать таблицу состоящую из одного ряда, в котором находятся две ячейки, нужно просто между открывающим и закрывающим тегами ряда таблицы вставить два тега ячеек (открывающий и закрывающий) вместо одного.

Основные тэги таблиц:

Таблица: <TABLE>...</TABLE>

Это основноые тэги, описывающие таблицу. Все элементы таблицы должны находиться внутри этих двух тэгов. По умолчанию таблица не имеет обрамления и разделителей. Обрамление добавляется атрибутом BORDER.

Атрибуты тега TABLE:

Наименование	Описание
BGCOLOR	Цвет фона в таблице или ячейке
BACKGROUND	Фоновая графика (рисунок в формате GIF или JPEG). В некоторых случаях некорректно обрабатывается Netscape Navigator.
WIDTH	Ширина таблицы. Задает минимальную ширину таблицы. Если какой-либо элемент (очень часто это случается с элементами <PRE></PRE> и <IMG>) не может быть отображен в этой ширине, то ширина таблицы увеличивается, чтобы вместить этот элемент. Задается в единицах длины (пиксели, пункты и т.п.) или в процентах доступного пространства.
HEIGHT	Высота таблицы. Так же задает минимальную высоту таблицы. Очень часто искажается в зависимости от содержания.
BORDER	Толщина рамки таблицы. Если данный атрибут присутствует, граница таблицы прорисовывается для всех ячеек и для таблицы в целом.
BORDERCOLOR	Цвет рамки таблицы (IE)
BORDERCOLORDARK, BORDERCOLORLIGHT	Темный цвет рамки, светлый цвет рамки (IE). Используется для изменения цвета сетки с дополнительным эффектом трехмерности. Если установлены эти аттрибуты, ваша таблица выглядит трехмерной.
VALIGN	Задает вертикальное размещение данных в ячейках. Может принимать значения top (вверху), bottom (внизу), middle (по середине) и baseline (все ячейки строки прижаты кверху). Если этот атрибут опущен, то содержимое выравнивается по центру.
ALIGN	Выравнивание по горизонтали (left, center, right)
CELLSPACING	Расстояние между ячейками таблицы
CELLPADDING	Расстояние между содержимым ячейки и рамкой

Для тэга <TABLE> закрывающий тэг </TABLE> является обязательным. Внутри этой пары тэгов располагаются ряды ячеек. Ряд ячеек заключается в тэги <TR> закрывающий тэг </TR>. Количество строк таблицы определяется количеством встречающихся пар тэгов <TR>..</TR>.

Атрибуты тэга <TR>

Наименование	Описание
VALIGN="TOP | MIDDLE | BOTTOM | BASELINE"	Задает выравнивание содержимого ячеек в ряду.
ALIGN="LEFT|RIGHT"	Задает выравнивание содержимого ячеек ряда относительно границ ячейки
BGCOLOR="#rrggbb | название цвета"	Задает цвет фона ряда

Содержимое ячеек заключается в тэги <TD> и </TD>. Ячейка таблицы может быть описана только внутри строки таблицы. Каждая ячейка должна быть пронумерована номером колонки, для которой она описывается. Если в строке отстутствует одна или несколько ячеек для некоторых колонок, то броузер отображает пустую ячейку. Расположение данных в ячейке по умолчанию определяется атрибутами ALIGN=left и VALIGN=middle. Данное расположение может быть исправлено как на уровне описания строки, так и на уровне описания ячейки. Данный тэг может содержать следующие атрибуты:

Атрибуты тэга <TD>

Наименование	Описание
VALIGN="TOP | MIDDLE | BOTTOM | BASELINE"	Задает выравнивание содержимого в ячейке по верткали ( по умолчанию идёт выравнивание по центру ).
ALIGN="LEFT | RIGHT | CENTER"	Задает выравнивание содержимого ячейки по горизонтали ( по умолчанию идёт выравнивание по левому краю ).
WIDTH="[ширина]"	Задает минимальную ширину ячейки. Необходимо иметь ввиду, что ширина ячейки в колонке определяется максимальной шириной ячеек в колонке. Имеет различные последствия если используется в Netscape Navigator совместно с аттрибутом WIDTH, указанном в тэге <TABLE>
HEIGHT="[высота]"	Задает минимальную высоту ячейки.
NOWRAP	Данный атрибут говорит о том, что данные в ячейке не могут логически разбиваться на несколько строк и должны быть представлены одной строкой. Будьте особо внимательны при использовании этого атрибута, так как он может привести к появлению очень широких ячеек.
BGCOLOR="#rrggbb | название цвета"	Задает цвет фона ячейки
COLSPAN	Охватываемые ячейкой столбцы
ROWSPAN	Охватываемые ячейкой строки
BACKGROUND	Фоновая графика

К сожалению атрибуты размеров ячеек и рядов некорректно поддерживаются всеми браузерами, так как тэг <TABLE>, описаный в рекомендациях W3C предполагает различные интерпретации. По этой причине каждый раз, когда вам необходимо точно отследить взаимные размеры ячеек, я предлагаю использовать вложенные таблицы, так как атрибут WIDTH корректно работает только с таблицами в целом.

Заголовок таблицы: <TH>...</TH>

Ячейка заголовка таблицы имеет ширину всей таблицы; текст в данной ячейке имеет атрибут BOLD и ALIGN=center. Атрибуты дескриптора такие-же, как и у <TD>, за исключением того, что содержимое заголовка по умолчанию выравнивается по центру, а ячейки данных - по левому краю.

Подпись: <CAPTION>...</CAPTION>

Данный тэг описывает название таблицы (подпись). Тэг <CAPTION> должен присутствовать внутри <TABLE>...</TABLE>, но снаружи описания какой-либо строки или ячейки. По умолчанию <CAPTION> имеет атрибут ALIGN=top, но может быть явно установлен в ALIGN=bottom. ALIGN определяет, где - сверху или снизу таблицы - будет поставлена подпись. Подпись всегда центрирована в рамках ширины таблицы.

Пример таблицы

<TABLE BORDER=5>
<CAPTION ALIGN=bottom> Таблица №1 </CAPTION>
<TR>
<TD ROWSPAN=2></TD>
<TH COLSPAN=2>Среднее значение</TH>
</TR>
<TR><TH>Рост</TH><TH>Вес</TH></TR> <TR>
<TD>Мужчины</TD>
<TD ALIGN=center>174</TD>
<TD ALIGN=center>78</TD>
</TR>
<TR>
<TD>Женщины</TD>
<TD ALIGN=center>165</TD>
<TD ALIGN=center>56</TD>
</TR>
</TABLE>

Таблица №1

	Среднее значение
	Рост	Вес
Мужчины	174	78
Женщины	165	56

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

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