Таблицы

Таблицы имеют очень большое значение при создании web-страниц. Для отображения некоторых данных удобно использовать таблицы. Кроме того, профессиональные web- мастера используют таблицы, как средство для создания правильной структуры сайта и отображения информации (здесь применяются, так называемые, невидимые таблицы, которые играют роль, своего рода, верстальной сетки для размещения элементов web-страницы). Отметим еще одно свойство таблиц, которое может Вам пригодиться: содержимое ячеек таблицы, как правило, отображается браузерами, только по достижению конца таблицы, т.е. когда таблица полностью загрузиться.

Таблицы в HTML организуются как набор столбцов и строк, т.е. структура представления таблиц, примерно такая же, как и в текстовых процессорах типа Microsoft Word. Ячейки таблицы могут содержать любые HTML- элементы: обычный тест, заголовки, списки, абзацы, графику, формы, вложенные таблицы и т.д.

Таблица определяется тегами <TABLE> и </TABLE>, внутри которых и должны находиться все элементы и данные таблицы. Этот основополагающий тег может иметь множество атрибутов, о которых мы поговорим позже.

<CAPTION> и </CAPTION> - определяют название таблицы: (подпись). Тэг <CAPTION> должен присутствовать внутри <TABLE> и </TABLE>, но снаружи описания какой-либо строки или ячейки. По умолчанию <CAPTION> имеет атрибут ALIGN=top (подпись вверху перед таблицей), но может быть явно установлен в ALIGN=bottom (подпись внизу после таблицы). Атрибут ALIGN определяет, где - сверху или снизу таблицы - будет поставлена подпись. Подпись всегда центрирована в рамках ширины таблицы.

<TR> и </TR> - определяют строку таблицы. Количество строк всей таблицы определяется количеством встречающихся пар тэгов <TR> и </TR>. Новая строка определяется тегом <TR>, а ее закрытие тегом </TR>. Строки могут иметь атрибуты ALIGN и VALIGN, которые описывают визуальное положение содержимого строк (горизонтальное и вертикальное выравнивание) в таблице.

<TD> и </TD> - определяют ячейку таблицы. Ячейка таблицы может быть описана только внутри строки таблицы (!), т.е. в своеобразный контейнер, образуемый тегами <TR> и </TR>, вкладываются столько тегов <TD> и </TD>, сколько необходимо получить ячеек (а для таблицы в целом это будут колонки) в данной строке. Количество ячеек в каждой строке должно быть одинаково, в противном случае возможно не совсем корректное отображение страницы браузером! Для объединения (слияния) нескольких ячеек (строк или столбцов) используются специальные атрибуты, о которых мы также скажем позже. Расположение данных в ячейке определяется атрибутами ALIGN и VALIGN, действие которых аналогичны таковым для тега <TR>. Они применяются в ситуации, когда горизонтальное или вертикальное выравнивание в какой-либо одной ячейке отличается от выравнивания, заданного для всей строки.

<TH> и </TH> - определяют ячейку таблицы также как и <TD> и </TD>, с небольшими отличиями: текст в данной ячейке будет выделен жирным эффектом, а данные будут позицироваться по центру ячейки. Как правило, применяется, когда необходимо создать что то типа заголовка для строки или столбца данной таблицы.

Для понимания механизма построения таблиц в HTML, приведем практический пример (для наглядного восприятия результата укажем в теге TABLE атрибут border=2, смысл которого раскроем позже):

Пример:

<TABLE border=2>

  <CAPTION>Таблица</CAPTION>

    <TR> <!-- определяем начало 1 строки таблицы --
>

        <TD>A ячейка</TD>

        <TD>B ячейка</TD>

        <TD>C ячейка</TD>

    </TR> <!-- определяем конец 1 строки таблицы --
>

    <TR> <!-- определяем начало 2 строки таблицы --
>

        <TD>D ячейка</TD>

        <TH>E ячейка</TH>

        <TD>F ячейка</TD>

    </TR> <!-- определяем конец 2 строки таблицы --
>

 </TABLE>

Результат:

Таблица
A ячейка	B ячейка	C ячейка
D ячейка	E ячейка	F ячейка

Итак, мы создали таблицу, состоящую из 2-ух срок. Каждая строка содержит 3 ячейки, таким образом, таблица в целом имеет 3 колонки. Название выведено перед таблицей. E-ячейка немного отличается от других ячеек, потому что она создана при помощи тегов <TH> и </TH>. Заметьте также, что при написании html-кода теги, отвечающие за строки и ячейки, немного смещают вправо для удобства редактирования данных через время.

Дополнительные атрибуты

Теперь более подробно рассмотрим атрибуты, которые могут использоваться при создании таблиц:

BORDER – определяет толщину обрамления элементов таблицы в пикселах. Данный атрибут используется в теге <TABLE>. Если он присутствует, то граница таблицы прорисовывается для всех ячеек и для таблицы в целом. Если атрибут не установлен или его значение равно 0, таблица показывается без рамки (невидимая таблица). BORDER принимает числовые значения, которые определяют ширину границы в пикселях, например BORDER=3.

ALIGN – горизонтальное выравнивание данных в элементах таблицы. Если атрибут ALIGN присутствует внутри тегов <CAPTION> и </CAPTION>, то он определяет положение подписи для таблицы значениями top и bottom соответственно для подписи сверху и снизу. Если атрибут ALIGN встречается внутри <TR>, <TH> или <TD>, он управляет положением данных в ячейках по горизонтали. Может принимать следующие значения:

left – выравнивание по левому краю;
right – выравнивание по правому краю;
center – выравнивание по центру;

VALIGN - определяет вертикальное выравнивание данных в элементах таблицы. Данный атрибут используется внутри тегов <TR>, <TH> и <TD>. Он определяет вертикальное выравнивание данных в ячейках строки (параметр находится внутри <TR>) или в конкретной ячейке (параметр находится внутри <TD> или <TH>). Может принимать следующие значения:

top – выравнивание по верхнему краю;
bottom – выравнивание по нижнему краю;
middle – выравнивание по центру;
baseline – выравнивание по базовой линии: данные ячейки прижаты к верху;

Примечание: все дополнительные атрибуты являются необязательными и могут применяться по мере необходимости.

Остальные дополнительные атрибуты, используемые при создании таблиц, мы рассмотрим во второй части.