Таблицы . Основы . | www.kasperinfo.narod.ru......................................

Таблицы. Основы. Таблицы используются в web-дизайне не только, как средство представления данных, но и как инструмент расположения элементов на странице. Чего можно добиться с помощью таблиц? Как известно, страница может просматриваться с различным разрешением. В настоящее время основными являются разрешения 640х480, 800х600 и 1024х768. Для того, чтобы страница одинково смотрелась во всех разрешениях необходимо ограничить ширину содержания минимальным разрешением. Сделать это проще всего с помощью таблиц. Хотя W3C не рекомендует использовать таблицы для расположения элементов страницы, так как это может вызвать искажения при отображении на "non-visual" (имеются ввиду браузеры на основе речевого или Брайль-интерфеса), но они так и сотаются единственным средством точно расположить элементы во всех "visual" браузерах, так как поддержка CSS (которые рекомендуется использовать) сильно отличается на разных браузерах. Позднее мы рассмотрим как это сделать. А теперь разберем принципы создания таблиц.

Атрибуты тэга "TABLE"

Наименование	Описание
WIDTH="[ширина]"	Ширина таблицы. Задает минимальную ширину таблицы. Если какой-либо элемент (очень часто это случается с элементами "PRE" "/PRE" и "IMG") не может быть отображен в этой ширине, то ширина таблицы увеличивается, чтобы вместить этот элемент. Задается в единицах длины (пиксели, пункты и т.п.) или в процентах доступного пространства. "/TD"
HEIGHT="[ширина]"	Высота таблицы. Так же задает минимальную высоту таблицы. Очень часто искажается в зависимости от содержания.
VALIGN="TOP\|BOTTOM"	Задает выравнивание содержимого ячеек. Если этот атрибут опущен, то содержимое выравнивается по центру.
ALIGN="LEFT\|RIGHT"	Задает выравнивание таблицы в потоке, как и у изображений.
CELLPADDING="[отступ]"	Отступ от границы ячейки до ее содержимого.
CELLSPACING="[расстояние]"	Расстояние между ячейками.
BACKGROUND="[путь]"	Задает изображение фона таблицы. В некоторых случаях некорректно обрабатывается Netscape Navigator.
BGCOLOR="#цвет"	Задает цвет фона таблицы

Для тэга "TABLE" закрывающий тэг "/TABLE" является обязательным. Внутри этой пары тэгов располагаются ряды ячеек. Мы не будем здесь рассматривать специализированные ячейки типа "THEAD", "TFOOT" и пр. При необходимости вы сможете прочитать о них в официальых рекомендациях по стандарту HTML 4.0 на сайте W3C.
Ряд ячеек заключается в тэги <TR> закрывающий тэг </TR>. И может иметь следующие атрибуты:

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

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

Содержимое ячеек заключается в тэги <TD> и </TD>. Данный тэг может содержать следующие атрибуты:

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

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

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

© 2002 PRENT Design Studio™