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