Таблицы

8.2. Таблицы.

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

Авторам предоставляется возможность работы над структурой и компоновкой таблицы (например, использование группы столбцов или колонок текста). Возможность дизайнеров рекомендовать ширину столбцов позволяет агентам пользователей отображать данные таблицы постепенно (по мере их получения) и не ждать всю таблицу до создания изображения в окне браузера.

Структура таблиц в HTML включает строки и столбцы, которые могут иметь заголовки (headers - имена, титулы, объяснения). Заголовок (элемент CAPTION), предоставляет краткое описание таблицы. Можно также указать и более длинное описание (с помощью атрибута summary) для удобства людей, использующих агенты на базе азбуки Бройля или речи.

Таблица в обычном варианте представляется в естественном виде, с согласованно расположенными столбцами. В HTML табличные элементы обычно называют ячейками, чтобы избежать смешивания с табличным элементом (TABLE element), который в описании HTML соответствует всей таблице.

Строки таблицы могут группироваться в разделы заголовков, нижних заголовков и тела, с помощью элементов THEAD, TFOOT и TBODY, соответственно. Группы строк convey несут дополнительную структурную информацию и могут генерироваться агентами пользователей различными способами, отображающими эту структуру. Агенты пользователей могут использовать подразделение на заголовки/тело/нижние заголовки для поддержки прокрутки тела независимо от заголовков. При печати длинных таблиц информация из заголовков может повторяться на каждой странице таблицы.

Более того, авторы могут объявлять свойства столбцов в начале определения таблицы (с помощью элементов COLGROUP и COL) таким образом, который позволяет агентам пользователей генерировать таблицу последовательно, а не ждать считывания всех данных таблицы перед тем, как начать генерацию.

Элементы построения таблиц.

Таблица имеет заголовки, в которых указано, что содержится в строках и столбцах. Строки содержат информацию, ячейки - отдельные ее позиции. Рассмотрим основные элементы (теги, управляющие коды) обеспечивающие формирование таблицы и ее компонент в HTML 4.0.

Элемент <TABLE> ...</TABLE> - определяет таблицу HTML и обрамляет всю табличную спецификацию. Все элементы таблицы должны находиться внутри этих двух элементов. По умолчанию таблица не имеет обрамления и разделителей. Обрамление добавляется атрибутом BORDER, т.е. если присутствует параметр BORDER, браузер визуализирует таблицу в рамке. Начальный и конечный тег: обязательны.

Необязательный элемент <CAPTION> ... </CAPTION> специфицирует текст заголовка (имя) таблицы. Положение заголовка по умолчанию - сверху по центру таблицы. Для помещения заголовка в нижнюю часть таблицы используется параметр ALIGN=BOTTOM. В заголовке может использоваться дескриптор любого типа. Начальный и конечный тег: обязательны.

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

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

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

Начальный тег Th или TD: обязателен, Конечный тег: не обязателен.

Группы строк: элементы THEAD, TFOOT и TBODY.

Элемент <THEAD> </THEAD> - заголовок таблицы.

Элемент <TFOOT> </TFOOT> - нижний заголовок таблицы;

Начальный тег: обязателен, конечный тег: необязателен.

Элемент < TBODY> </TBODY> - тело таблицы.

Каждая группа строк должна содержать, по крайней мере, одну строку, определяемую элементом TR. Разделы THEAD, TFOOT и TBODY должны содержать одинаковое число столбцов.

Начальный и конечный тег: необязательны.

Группы столбцов: элементы COLGROUP и COL. Элемент <COLGROUP> </COLGROUP> - группа столбцов таблицы. Начальный тег: обязателен, Конечный тег: необязателен

Элемент <COL> </COL> позволяет авторам использовать одни и те же атрибуты в различных столбцах, не используя структурной группировки. Начальный тег: обязателен, Конечный тег: запрещен

Группы столбцов позволяют создавать структурные подразделения внутри таблицы. Авторы могут выделять такую структуру с помощью таблиц стилей или атрибутов HTML

Ниже приведен пример порядка и структуры заголовков таблицы, нижних заголовков и тела с иcпользованием элементов HTML.

<TABLE>

<THEAD>

<TR> …заголовок…

</THEAD>

<TFOOT>

<TR> …нижний заголовок…

</TFOOT>

<TBODY>

<TR> …первая строка данных блока 1…

<TR> …вторая строка данных блока 1…

</TBODY>

<TBODY>

<TR> …первая строка данных блока 2…

<TR> …вторая строка данных блока 2…

<TR> …третья строка данных блока 2…

</TBODY>

</TABLE>

Атрибуты элементов. Каждый из казанных выше элементов поддерживается определенным набором атрибутов, характеризующих свойства элемента и связанной с ним информации. Например, для элемента <TABLE> используются следующие атрибуты: summary, align, width и т.д.

Атрибут summary = текст предоставляет краткую информацию о назначении и структуре таблицы для агентов пользователей, выполняющих генерацию для невизуальных средств, таких как синтезаторы речи или азбуки Бройля.

Атрибут align = left|center|right задает положение таблицы относительно документа. Допустимые значения:

left: таблица размещается в левой части документа.

center: таблица находится в центре документа.

right: таблицы расположена в правой части документа.

Атрибут width = [длина] определяет необходимую ширину всей таблицы и предназначен для визуальных объектов пользователей. Если значение указано в процентах, это означает долю в процентах от доступного горизонтального пространства. Если ширина не указана, она определяется агентом пользователя.

Атрибут border = [толщина] обеспечивает формирование рамки таблицы линией заданной толщины.

Атрибуты, определяемые в любом другом месте:

- id, class (идентификаторы в пределах документа),

- lang (информация о языке),

- dir (направление текста),

- title (заголовок элемента),

- style (встроенная информация о стиле),

- onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (внутренние события),

- bgcolor (цвет фона),

- frame, rules, border (границы и rules),

- cellspacing, cellpadding (поля в ячейках).

Строчный элемент TR имеет следующие атрибуты:

- %cellhalign - горизонтальное выравнивание в ячейках,

- %cellvalign - вертикальное выравнивание в ячейках,

- id, class (идентификаторы в пределах документа),

- lang (информация о языке),

- dir (направление текста),

- title (заголовок элемента),

- style (встроенная информация о стиле )

- onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown,onkeyup (внутренние события),

- align, char, charoff, valign (выравнивание в ячейках).

Атрибуты элементов TH и TD:

- headers = idrefs. В этом атрибуте указывается список ячеек заголовков, предоставляющих заголовочную информацию для текущей ячейки данных. Значением этого атрибута является разделенный пробелами список названий ячеек. Имена ячейкам должны даваться с помощью атрибута id. Авторы обычно используют атрибут headers с целью помочь невизуальным агентам пользователей в генерации заголовков ячеек данных (например, заголовок произносится перед прочтением данных ячейки), но этот атрибут может также использоваться вместе с таблицами стилей

- scope = имя области действия. Этот атрибут определяет набор ячеек данных, для которых заголовочная информация задается текущим заголовком. Этот атрибут может использоваться вместо атрибута a href="tables.html#adef-headers" class="noxref">headers, особенно в простых таблицах. Если этот атрибут используется, он должен иметь одно из следующих значений:

- row: В ячейке представлена заголовочная информация для оставшейся части строки, в которой содержится эта ячейка.

- col: В текущей ячейке представлена заголовочная информация для оставшейся части столбца, в котором содержится эта ячейка.

- rowgroup: В ячейке представлена заголовочная информация для оставшейся группы строк, в которой содержится эта ячейка.

- colgroup: В ячейке представлена заголовочная информация для оставшейся группы столбцов, в которой содержится эта ячейка.

- abbr = текст. Этот атрибут используется для представления сокращенной формы содержимого ячейки. Он может генерироваться агентами пользователей в подходящий момент вместо содержимого ячейки. Сокращенные имена должны быть короче, и агенты пользователей могут повторять их. Например, синтезаторы речи могут генерировать сокращенные заголовки, относящиеся к определенной ячейке, перед генерацией содержимого ячейки.

- axis = cdata. Этот атрибут может использоваться вместо ячейки в концептуальных категориях. Агенты пользователей могут давать пользователям доступ к этим категориям (например, пользователь может запрашивать у агента все ячейки, принадлежащие к определенной категории, агент пользователя может представлять таблицу в форме оглавления и т.д.). Значением этого атрибута является список имен категорий, разделенных запятыми.

- rowspan = число. Этот атрибут определяет число строк, текущей ячейки. По умолчанию используется значение один (1).

- colspan = число. Этот атрибут определяет число столбцов, текущей ячейки. По умолчанию используется значение один ("1").

Оставшиеся элементы HTML также имеют свои атрибуты, которые здесь не рассматриваются. Некоторые из этих атрибутов являются общими для различных элементов. Например, атрибут align описывают свойства таких элементов как TABLE, TR, TD,TH. Атрибуты id, class, lang, dir, stule применяются к элементам TABLE, TR, и т.д.

Общий вид таблицы. В общем виде формат таблицы без использования групповых элементов выглядит следующим образом:

<TABLE> начало определения таблицы

<CAPTION> содержание заголовка </CAPTION> - описание заголовка

<TR> - начало описания первой строки первой ячейки

<TH> содержимое ячейки </TH> - первая ячейка в строке 1 (заголовок)

………………….

<TH> содержимое ячейки </TH> - последняя ячейка в строке 1 (заголовок)

</TR> - конец описания первой строки

<TR> - начало описания второй строки

<TD> содержимое ячейки </TD> - первая ячейка в строке 2

…………………

<TD> содержимое ячейки </TD> - последняя ячейка в строке 2

</TR> - конец описания второй строки

……………………….

<TR> - начало описания первой строки

<TD> содержимое ячейки </TD> - первая ячейка в последней строке ...

<TD> содержимое ячейки </TD> - последняя ячейка в последней строке

</TR> - конец описания последней строки

</TABLE> - конец описания таблицы

Описание таблицы должно располагаться между дескрипторами <TABLE> и </TABLE>. Первый элемент в таблице - CAPTION, является необязательным. Далее может располагаться любое количество строк, описываемых дескрипторами <TR> и </TR>. В строке может располагаться любое число ячеек, описываемых дескрипторами <TD>...</TD> или <TH>...</TH>. Важно помнить, что каждая строка таблицы форматируется отдельно от предыдущей и последующей.

Создание таблицы. Рассмотрим пример создания таблицы, используя элементы языка HTML.

При помощи атрибута border элемента <TABLE> формируется рамка таблицы:

Далее при помощи элемента <TR> (Table Row - строка таблицы) создается первая строка таблицы. Значение атрибута ALIGN элемента <TR> указывает, что в данном примере текст должен быть выровнен по центру каждой ячейки:

В первой строке таблицы должен содержаться заголовок таблицы, который устанавливается с помощью элемента <ТН> (Table Header — заголовок таблицы) и выводится в окне программы просмотра полужирным шрифтом. Для объединения всех столбцов в заголовке таблицы используется атрибут colspan элемента <ТН>:

<ТН colspan=3>Это таблица

</ТН>

На этом заканчивается заголовок таблицы, размещенный в первой строке таблицы. Код HTML необходимо завершить закрывающим элементом </TR>:

<ТН colspan=3>Это таблица

</ТН>

</TR>

Создадим вторую строку таблицы:

<ТН colspan=3>Это таблица

</ТН>

</TR>

Содержимое каждой ячейки с данными задается с помощью тэга <TD> (Table Data - данные таблицы). В таблицу добавим третью строку::

<ТН colspan=3>Это таблица

</ТН>

</TR>

<TD>ячейки</TD>

<ТD>для</ТD>

</TR>

<ТD>данных</ТD>

<ТD>таблице</ТD>

</TR>

</TABLE>

Создание таблицы завершаться элементом </TABLE>

Вид созданного HTML - файла в окне браузера представлен на рис. 8.8.

Рис 8.8 Вид таблицы в Internet Explorer 4.0.