Таблицы - это, пожалуй, то, без чего очень сложно обойтись при создании сайтов. Они представляют собой мощное и широко распространенное средство форматирования страниц. Данный сайт, например, создан с помощью таблиц, вложенных друг в друга. Это видно, если просмотреть исходный код страницы.
Начнем с простейших таблиц.
Таблица описывается тэгом-контейнером <TABLE></TABLE>. Завершающий тэг обязателен для исключения ошибок. Внутри этой пары размещается описание таблицы, состоящей из произвольного количества строк и столбцов. Каждая строка начинается тэгом <TR> и заканчивается </TR>. Отдельная ячейка определяется тэгами <TD></TD>(Table Data) или <TH> <TH> (Table Header). Последнее используется в качестве заголовка таблицы, но принципиального различия в этих двух видах ячеек нет. Просто в ячейках заголовка по умолчанию используется жирный шрифт и данные выравниваются по центру.
Таблица может иметь заголовок, описываемый тэгом <CAPTION></CAPTION>. Оно располагается внутри пары <TABLE></TABLE>, но вне описания строк и ячеек, обычно сразу после <TABLE>.
| ячейка | ячейка | ячейка |
| ячейка | ячейка | ячейка |
| ячейка | ячейка | ячейка |
Имеет единственный параметр ALIGN, который может принимать значения TOP или BOTTOM, определяет где будет находиться текст заголовка - над или под таблицей. Некоторые браузеры позволяют применять параметр ALIGN со значениями LEFT, RIGTH и CENTER, но в этом случае для вертикального выравнивания применяется параметр VALIGN.
В принципе, в заголовке допускается использование любого тэга, допустимого в разделе <BODY>
В этом тэге набор допустимых параметров зависит от браузера. Спецификация HTML определяет следующие параметры, каждый из которых может быть пропущен: BORDER, CELLSPACING, CELLPADDING, WIDTH, ALIGN. Кроме того можно использовать HEIGHT и BGCOLOR.
Атрибут BORDER задает отображение рамки вокруг ячеек и вокруг всей таблицы. По умолчанию рамки не рисуются. Для задания рамки необходимо указать толщину рамки в пикселях либо просто указать <TABLE BORDER>, <TABLE BORDER=3>. Рамка толщиной в 3 рх будет вокруг всей таблицы, на рамки ячеек это значение не влияет. Тощину рамок вокруг ячейки можно определить только с помощью таблицы стилей.
Атрибут CELLSPACING определяет расстояние между смежными ячейками таблицы. Задается целым числом пикселей. При указании CELLSPACING=0 рамки смежных ячеек сольются в одну.
Атрибут CELLPADDING определяет отступ от рамки ячейки до ее содержимого. Задается аналогично CELLSPACING.
Если все три атрибута установить в ноль (BORDER=0,CELLSPACING=0, CELLPADDING=0), то ячейки будут расположены вплотную друг к другу. Такой прием используется для соединения "разрезанного" рисунка. Части такой мозаики помещают в смежные ячейки и создается впечатление цельности картинки.
При отображении таблиц их высота и ширина вычисляются автоматически и зависят от множества факторов. Но иногда, требуется принудительное задание этих параметров для точного позиционирования элементов. Для этого и существуют атрибуты WIDTH и HEIGHT. В них задаются ширина ширина и высота таблицы в пикселях или процентах от ширины окна. Надо учесть, что если задана ширина в 100 рх, то это не значит то именно той ширины таблица выведется на экран. Если содержимое таблицы сможет разметиться в 100 рх, то хорошо. А если нет, то таблица будет иметь минимально возможную ширину. И наооборот, если бы таблица имела размер 150 рх по умолчанию, а разработчик определил ширину в 250 рх, то браузер растянет таблицу до ширины в 250 рх, пропрционально расширив каждую колонку.
Эти же параметры могут применятся для отдельных ячеек. Значения задаются в пикселях или в процентах от размера таблицы.
Конкретные алгоритмы настройки таблиц для различных браузеров сильно отличаются.
Определяет горизонтальное расположение таблиц в области просмотра. Допустимые значения LEFT, RIGTH. По умолчанию таблица выравнена по левому краю. Это же определяет стиль обтекания текстом таблицы. Для более точно управления обтканием следует использовать тэг
с параметром CLEAR также как и для IMG. Если параметр ALIGN опущен, то место справа и/или слева всегда будет пустым независимо от ее ширины.
Каждую отдельную ячейку внутри таблицы можно рассматривать как область для независимого форматирования. Внутри нее возможно использование всех тэгов, допустимых в разделе BODY. Область действия тэгов, заданных внутри отдельной ячейки распространяются только на эту ячейку независимо от наличия завершающего тэга. Параметры выравнивания содержимого ячеек ALIGN и VALIGN. Параметр горизонтального выравнивания ALIGN может принимать значения LEFT, RIGTH, CENTER. Параметр вертикального выравнивания VALIGN принимает значение TOP (по верхнему краю), BOTTOM (по нижнему краю), MIDDLE (по середине), BASELINE (по базовой линии). По умолчанию MIDDLE. Задание параметров в тэге <TR> определяет выравнивание для всех ячеек строки, при этом в каждой отдельной ячейке параметры могут быть переопределены.
Отключает возможность автоматического разбиения текста ячейки на строки. Может применятся для тэгов <TR>,<TD>, <TH>
Для сложных таблиц имеется возможность объединения нескольких смежных ячеек в одну, которая реализуется с помощью параметров COLSPAN и ROWSPAN. Значение параметра целое число, определяющее насколько столбцов следует расширить текущую ячейку по горизонтали или на сколько строк по вертикали. Допустимо одновременное задание обоих параметров для одной ячейки.
| ячейка, захватывающая 3 столбца | ||
| ячейка | ячейка, захватывающая 2 строки | ячейка |
| ячейка | ячейка | |
<THEAD>, <TBODY>, <TFOOT> применяются для более точного описания структуры таблицы, выделяя заголовок таблицы, основную часть и итоговую строку. <THEAD> и <TFOOT> используется для описания верхнего и нижнего колонтитулов, встречаются в таблице только один раз.
Тэг <TBODY> может встречаться многократно в таблице. Требует закрывающего тэга. Для этих тэгов можно использовать все параметры, допустимые для тэга <TABLE>. А также появляется возможность более гибкого управления прорисовкой рамок вокруг и внутри таблицы.
Управление прорисовкой рамок вокруг таблицы осуществляется параметром FRAME тэга <TABLE>, а линии сетки параметром RULES. Становиться возможным провести только вертикальные линии между колонками и вместо рамки вокруг всей таблицы дать горизонтальные линии сверху и снизу.