Простые и вложенные таблицы

ИСПОЛЬЗОВАНИЕ ТАБЛИЦ В HTML-ДОКУМЕНТАХ

В результате изучения темы студент должен:

знать:

- принципы создания различных таблиц в HTML-документах;

уметь:

- создавать таблицы в HTML-документах.

Простые и вложенные таблицы

Одним из наиболее мощных и широко применимых средств в HTML-документах являются таблицы. В HTML таблицы применяются не только как средство представления данных, но и как средство форматирования Web-страниц.

Первая версия языка HTML не предусматривала специальных средств для создания таблиц, так как была предназначена для написания простого текста. Создание документов, содержащих выровненные данные или таблицы, осуществлялось с использованием тэгов преформатированного текста <PRE>.

<PRE>

+---------+-------+-----------+

| Номер | Число | Символ |

+---------+--------+----------+

| 1 | 123 | d |

+---------+--------+----------+

| 2 | 234 | f |

+---------+--------+----------+

</PRE>

Рассмотрим для начала минимальный набор тэгов для создания таблицы. Описание таблицы должно располагаться внутри раздела документа <BODY>. Документ может содержать любое количество таблиц, причём допускается вложенность таблиц друг в друга. Каждая таблица должна начинаться тэгом <TABLE> и завершаться тэгом </TABLE>. Внутри этой пары тэгов располагается описание содержимого таблицы. Любая таблица состоит из одной или нескольких строк, в каждой из которых задаются данные для отдельных ячеек.

Каждая строка начинается с тэга <TR> (Table Row) и завершается тэгом </TR>. Отдельная ячейка таблицы в строке обрамляется парой тэгов: <TD> и </TD> (Table Data) или <TH> и </TH> (Table Header). Тэг <TH> используется для ячеек‑заголовков таблицы, а <TD> – для ячеек-данных. Различие между этими двумя тэгами заключается лишь в типе шрифта по умолчанию, при помощи которого отображается содержимое ячейки. Содержимое ячейки типа <TH> отображается полужирным шрифтом и располагается по центру в вертикальном и горизонтальном направлениях. Ячейки, определённые тэгом <TD>, по умолчанию отображаются обычным шрифтом, выровненные влево по горизонтали и по центру по вертикали.

Закрывающие тэги </TR>, </TH>, </TD> могут быть опущены – в этом случае концом описания строки или элемента ячейки будет следующий встреченный открывающий тэг. Завершающий тэг таблицы <TABLE> не может быть опущен.

Количество строк в таблице определяется числом открывающих тэгов <TR>, а количество столбцов – максимальным количеством тэгов <TD> или <TH> среди всех строк. Если одна или несколько ячеек в конце строки не содержат данных, то их описание можно опустить, так как браузер сам добавит нужное число ячеек при отображении таблицы. Отсюда следует, что построение таблиц, в которых в разных строках разное число столбцов одинакового размера, не допускается.

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

<CAPTION>Заголовок таблицы</CAPTION>

<TR>

<TH>Заголовок ячейки 1</TH>

<TH>Заголовок ячейки 2</TH>

</TR>

<TR>

<TD>Ячейка 1</TD>

<TD>Ячейка 2</TD>

</TR>

<TR>

<TD>Ячейка 3</TD>

<TD>Ячейка 4</TD>

</TR>

</TABLE>

Выравнивание таблицы в HTML-документе

Рассмотрим назначение различных параметров, которые могут использоваться в тэгах, описывающих таблицы.

Тэг заголовка таблицы имеет два допустимых параметра: ALIGN и VALIGN. Первый параметр поддерживается всеми браузерами, а второй – только IE. Эти параметры устанавливают нужное выравнивание заголовка таблицы. Параметр ALIGN имеет два допустимых значения: TOP и BOTTOM, соответственно отвечающие за расположение заголовка таблицы над или под ней. Браузер IE вводит три дополнительных значения этого параметра: LEFT, CENTER и RIGHT. Т.е. заголовок может быть выровнен в горизонтальном направлении по левому краю таблицы, по её центру и по её правому краю. Кроме того, браузер IE вводит новый параметр VALIGN, который позволяет дополнительно указать месторасположение заголовка сверху или снизу таблицы. По умолчанию заголовок располагается сверху таблицы по её середине.

<CAPTION ALIGN=LEFT VALIGN=BOTTOM>Заголовок снизу, слева</CAPTION>

Тэг <TABLE> может использовать следующие параметры.

BORDER – управляет отображением рамки вокруг таблицы. В качестве значения этого параметра задаётся ширина рамки.

WIDTH – принудительно задаёт ширину таблицы в пикселях или в процентах от ширины экрана.

HEIGHT – принудительно задаёт высоту таблицы, поддерживается только IE.

ALIGN – определяет горизонтальное расположение таблицы в области просмотра. Может иметь значения LEFT, CENTER или RIGHT.

BGCOLOR – задаёт цвет фона для таблицы.

BACKGROUND – задаёт фоновый рисунок для таблицы.

CELLSPACING – задаёт расстояние между смежными ячейками как по горизонтали, так и по вертикали. А точнее, это расстояние между ограничивающими линиями для двух смежных ячеек. По умолчанию значения этого параметра равно 2. Если задать значение 0, то границы ячеек сольются в единую линию.

CELLPADDING – задаёт расстояние между рамкой ячейки и помещённым в неё текстом. По умолчанию значение этого параметра равно 1. Каждую отдельную ячейку таблицы можно рассматривать как область для независимого форматирования. Внутри ячеек допустимо использовать практически все элементы HTML, которые могут появиться внутри тела документа <BODY>. Область действия тэгов, заданных внутри отдельной ячейки, ограничивается пределами этой ячейки независимо от наличия завершающего тэга. Для форматирования данных внутри ячеек таблицы предусмотрены следующие параметры:

ALIGN – параметр горизонтального выравнивания, может принимать значения LEFT, CENTER и RIGHT.

VALIGN – параметр вертикального выравнивания, может принимать значения TOP, BOTTOM, MIDDLE и BASELINE. Последнее значение обеспечивает привязку текста отдельных ячеек строки к единой линии.

NOWRAP – отключает возможность автоматического разбиения текста ячейки на строки. Перенос слов осуществляется только по пробелам, и в ряде случаев для запрещения разрыва текста в отдельных местах, например между значением и единицами измерения, вместо символа пробела можно применить неразрывный пробел   (NonBreaking SPace).

WIDTH и HEIGHT – значения этих параметров, определяют ширину и высоту ячейки таблицы. Если в колонке значение ширины задано для нескольких ячеек, то выбирается максимальное значение ширины и все ячейки колонки принимают эту максимальную ширину.

COLSPAN, ROWSPAN – позволяют объединять несколько смежных ячеек по горизонтали и по вертикали соответственно. В качестве значения этих параметров выступает число, которое указывает, на сколько ячеек нужно расширить данную ячейку.

</TR>

</TR>

</TR>

</TR>

</TABLE>