Таблицы

Таблицы предназначены для упорядоченного размещения информации, выводимой на 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.

Фреймы

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

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

Но вставка в Web-страницу фреймов приводит к сокращению области визуализации остальных данных. Поэтому необходимо искать оптимальный вариант представления данных в Web-странице, в том числе и с использованием фреймов.

Фреймовая структура определяет способ организации экрана с фреймами и указывает, где находится начальное содержимое каждого фрейма. Для всех фреймов задаются URL-адреса, описывающие местонахождение данных. Как правило, на Web-странице с фреймовой структурой нет содержимого фреймов. Такая страница обычно описывает только кадровую структуру экрана.

HTML-документ, включающий фреймы, отличается от HTML-документа без фреймов. Стандартный HTML-документ имеет один раздел HEAD и один раздел BODY. Документ с фреймами имеет раздел HEAD и раздел FRAMESET, который заменяет раздел BODY.

В разделе FRAMESET задается расположение фреймов в основном окне агента пользователя. Кроме того, в разделе FRAMESET может присутствовать элемент NOFRAMES с альтернативным содержимым для агентов пользователей, не поддерживающих или не показывающих фреймы.

Управляющие элементы, обычно помещаемые в раздел BODY, не должны присутствовать до первого элемента FRAMESET. Иначе элемент FRAMESET будет игнорироваться.

При создании HTML-документа с фреймами используются следующие управляющие элементы языка HTML и их атрибуты:

<FRAMESET></ FRAMESET> - документ с фреймами (вместо BODY).

<FRAMESET ROWS=,,,></ FRAMESET> - высота строк в пикселах или %.

<FRAMESET ROWS=*></ FRAMESET> - относительный размер высоты строк.

<FRAMESET COLS=,,,></ FRAMESET> - ширина колонок в пикселах или %.

<FRAMESET COLS=*></ FRAMESET> - относительный размер ширины колонок.

<FRAMESET BORDER=?> - ширина окантовки.

<FRAMESET FRAMEBORDER="yes|no"> - наличие окантовки.

<FRAME> - определить фрейм (содержание отдельного фрейма).

<FRAME SCR="URL"> - документ.

<FRAME NAME="***"|blank| _self|parent| top> - имя фрейма.

<FRAME MARGINWIDTH=?> - ширина границы (правая и левая).

<FRAME MARGINHEIGHT=?> - высота границы (верхняя и нижняя).

Элемент FRAMESET. Этот элемент создает документ с фреймами. Фактически он разделяет окно на прямоугольные области заданного автором размера.

Элемент FRAMESET определяет макет основного окна пользователя в виде совокупности прямоугольных пространств.

Строки и столбцы. Установка атрибута rows определяет число горизонтальных отрезков пространства в наборе фреймов. Установка атрибута cols определяет число вертикальных отрезков. Для создания сетки можно установить оба атрибута одновременно.

Если атрибут rows не установлен, каждый столбец занимает всю длину страницы. Если атрибут cols не установлен, каждая строка занимает всю ширину страницы. Если не установлен ни один из этих атрибутов, фрейм занимает всю страницу.

Фреймы создаются в направлении слева направо для столбцов и сверху вниз для строк. Если указаны оба атрибута, разделы окон создаются слева направо в верхней строке, слева направо во второй строке и т.д.

Дата добавления: 2015-08-09