Автор статьи: Головин Андрей
Таблицы используются в 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 корректно работает только с таблицами в целом.
