Автор статьи: Головин Андрей
Таблицы используются в web-дизайне не только, как средство представления данных, но и как инструмент расположения элементов на странице. Чего можно добиться с помощью таблиц? Как известно, страница может просматриваться с различным разрешением. В настоящее время основными являются разрешения 640х480, 800х600 и 1024х768. Для того, чтобы страница одинково смотрелась во всех разрешениях необходимо ограничить ширину содержания минимальным разрешением. Сделать это проще всего с помощью таблиц. Хотя >W3C не рекомендует использовать таблицы для расположения элементов страницы, так как это может вызвать искажения при отображении на “non-visual” (имеются ввиду браузеры на основе речевого или Брайль-интерфеса), но они так и сотаются единственным средством точно расположить элементы во всех “visual” браузерах, так как поддержка CSS (которые рекомендуется использовать) сильно отличается на разных браузерах. Позднее мы рассмотрим как это сделать. А теперь разберем принципы создания таблиц.
Тэг <TABLE> использует следующие основные атрибуты:
Атрибуты тэга <TABLE>
Наименование | Описание |
---|---|
WIDTH=”[ширина]” | Ширина таблицы. Задает минимальную ширину таблицы. Если какой-либо элемент (очень часто это случается с элементами
и ) не может быть отображен в этой ширине, то ширина таблицы увеличивается, чтобы вместить этот элемент. Задается в единицах длины (пиксели, пункты и т.п.) или в процентах доступного пространства. |
HEIGHT=”[ширина]” | Высота таблицы. Так же задает минимальную высоту таблицы. Очень часто искажается в зависимости от содержания. |
VALIGN=”TOP|BOTTOM” | Задает выравнивание содержимого ячеек. Если этот атрибут опущен, то содержимое выравнивается по центру. |
ALIGN=”LEFT|RIGHT” | Задает выравнивание таблицы в потоке, как и у изображений. |
CELLPADDING=”[отступ]” | Отступ от границы ячейки до ее содержимого. |
CELLSPACING=”[расстояние]” | Расстояние между ячейками. |
BACKGROUND=”[путь к картинке]” | Задает изображение фона таблицы. В некоторых случаях некорректно обрабатывается Netscape Navigator. |
BGCOLOR=”#rrggbb|название цвета” | Задает цвет фона таблицы |
Здесь представлены основные атрибуты тэга <TABLE>. Остальные атрибуты мы рассмотрим позже, хотя этих должно быть достаточно на первое время.Для тэга <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 корректно работает только с таблицами в целом.