ТАБЛИЦЫ.
Таблицы в HTML организуются как набор столбцов и строк. Ячейки таблицы могут содержать любые HTML-элементы, такие, как заголовки, списки, абзацы, фигуры, графику, а также элементы форм.
Основные тэги таблицы
Таблица: <TABLE>...</TABLE>
Это основные тэги, описывающие таблицу. Все элементы таблицы должны находиться внутри этих двух тэгов. По умолчанию таблица не имеет обрамления и разделителей. Обрамление добавляется атрибутом BORDER. Ширина таблицы задается атрибутом WIDTH в пикселях или в процентах от ширины экрана. Атрибуты CELLPADDING и CELLSPACING определяют расстояние в пикселях между границей клетки и ее содержимым и между клетками соответственно. Атрибут ALIGN задает положение таблицы относительно документа. Может принимать значения left (слева), right (справа) или center (по центру).
Строка таблицы: <TR>...</TR > (Table Row)
Количество строк таблицы определяется количеством встречающихся пар тэгов <TR>..</TR>. Строки могут иметь атрибуты ALIGN и VALIGN, которые описывают визуальное положение содержимого строк в таблице.
Ячейка таблицы: <TD>...</TD > (Table Data)
Описывает стандартную ячейку таблицы. Ячейка таблицы может быть описана только внутри строки таблицы. Каждая ячейка должна быть пронумерована номером колонки, для которой она описывается. Если в строке отсутствует одна или несколько ячеек для некоторых колонок, то браузер отображает пустую ячейку. Расположение данных в ячейке по умолчанию определяется атрибутами ALIGN=left и VALIGN=middle. Данное расположение может быть исправлено как на уровне описания строки, так и на уровне описания ячейки.
Ячейки заголовка таблицы: <TH>...</TH > (Table Header)
Ячейка заголовка таблицы отличается от ячейки данных только внешним представлением; текст в данной ячейке отображается полужирным (BOLD) шрифтом и имеет атрибуты выравнивания ALIGN=center и VALIGN=middle.
|
|
Тэги <TD> и <TH> не могут появляться вне описания строки таблицы <TR>.
Завершающие коды </TR>, </TD> и </TH> могут быть опущены. В этом случае
концом описания строки или ячейки является начало следующей строки
или ячейки, или конец таблицы. Завершающий тэг таблицы </TABLE> не
может быть опущен.
Подпись: <CAPTION>...</CAPTION>
Данный тэг описывает название таблицы (заголовок). Тэг <CAPTION> должен присутствовать внутри <TABLE>...</TABLE>, но снаружи описания какой-либо строки или ячейки. По умолчанию <CAPTION> имеет атрибут ALIGN=top, но может быть явно установлен в ALIGN=bottom. ALIGN определяет, где - сверху или снизу таблицы - будет поставлена подпись. Подпись всегда центрирована в рамках ширины таблицы. Некоторые браузеры допускают использование параметров ALIGN=left и ALIGN= right. Тогда заголовок располагается сверху и прижимается к соответствующему краю и для расположения внизу следует использовать параметр VALIGN= bottom.
Пример.
<HTML>
<HEAD>
<ТIТLЕ>Пример простейшей таблицы</ТIТLЕ>
</HEAD>
<BODY>
<TABLE>
<TR>
<ТD>Ячейка 1 строки 1</TD>
<ТD>Ячейка 2 строки 1</TD>
</TR>
<TR>
<ТD>Ячейка 1 строки 2</TD>
<ТD>Ячейка 2 строки 2</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Основные параметры таблицы
Параметры тэга <TABLE>
Согласно спецификации HTML в тэге <TABLE> могут использоваться следующие параметры: BORDER, CELLSPACING, CELLPADDING, WIDTH, ALIGN. Некоторые браузеры допускают использовать параметры HEIGHT и BGCOLOR.
|
|
BORDER
Данный атрибут используется в тэге TABLE. Если данный атрибут присутствует, граница таблицы прорисовывается для всех ячеек и для таблицы вцелом. BORDER может принимать числовое значение, определяющее ширину границы, например BORDER=3. Обычно по умолчанию BORDER=1. Отсутствие рамки может задаваться BORDER=0. У некоторых браузеров отсутствие BORDER влечет отсутствие рамки.
CELLSPACING
Форма записи параметра: CELLSPACING =num, где num — численное значение параметра в пикселах, которое не может быть опущено. Величина num определяет расстояние между смежными ячейками (точнее между рамками ячеек) как по горизонтали, так и по вертикали. По умолчанию значение принимается равным двум. Заметим, что традиционно в издательских системах смежные ячейки таблицы имеют общую границу. В HTML-таблицах по умолчанию между ними оставляется место. При задании CELLSPACING=0 рамки смежных ячеек сольются и создадут впечатление единой сетки таблицы.
CELLPADDING
Форма записи параметра аналогична CELLSPACING. Величина num определяет размер свободного пространства (отступа) между рамкой ячейки и данными внутри ячейки. По умолчанию значение принимается равным единице. Установка параметра CELLPADDING равным нулю может привести к тому, что некоторые части текста ячейки могут касаться ее рамки, что выглядит не очень эстетично.
WIDTH и HEIGHT
При отображении таблиц их ширина и высота автоматически вычисляются браузером и зависят от многих факторов. Расчет размеров таблиц выполняется автоматически, при этом делается попытка представить таблицу в наиболее удобном виде, чтобы она помещалась в окне просмотра. Большинство HTML-браузеров автоматически форматируют текст так (если возможно), чтобы длина строк не превосходила ширину окна просмотра. Это позволяет избежать необходимости горизонтальной прокрутки документа. Можно сделать вывод, что ширина таблиц является более важным, первостепенным параметром, расчет которого выполняется в первую очередь по сравнению с высотой.
|
|
В большинстве случаев динамическое определение размеров таблицы дает в результате эстетически соразмерное изображение с эффективным использованием реальной площади окна просмотра. Однако бывает необходимо принудительно указывать ширину или высоту таблицы. Для этой цели используются параметры WIDTH (ширина таблицы) и HEIGHT (высота таблицы) тэга <TABLE>. Форма записи: WIDTH = num или WIDTH = num %, где num — численное значение ширины всей таблицы в пикселах или в процентах от всего размера окна. Заметим, что допустимо задавать значения, большие 100%, хотя трудно представить себе случай, где это необходимо.
Задание конкретного значения параметра, например WIDTH=200, не означает, что таблица в любом случае будет иметь указанную ширину, а лишь определяет рекомендуемую ширину, которая будет выдержана по возможности.
ALIGN
Данный параметр тэга <TABLE> определяет горизонтальное расположение таблицы в области просмотра. Допустимые значения — LEFT (выравнивание влево) и RIGHT (выравнивание вправо). По умолчанию таблицы выровнены по левому краю. Заметим, что среди допустимых значений нет типичного значения для параметра выравнивания — CENTER. Дело в том, что присутствие параметра ALIGN в тэге <TABLE> не только определяет месторасположение таблицы, но и разрешает выполнить обтекание таблицы текстом с противоположной стороны аналогично обтеканию картинок. Обтекание таблицы текстом с двух сторон не предусматривается ни в каких случаях. Для более точного управления обтеканием следует использовать тэг <BR> с параметром CLEAR (значения: left, right, all) так же, как это выполняется для <IMG>. Если параметр ALIGN опушен, то место справа и/или слева от таблицы всегда будет пустым независимо от ее ширины.
Форматирование данных внутри таблицы
Внутри ячейки допустимо использование практически всех элементов HTML, которые могут появляться внутри тела документа <BODY>. Для форматирования данных внутри ячеек таблицы предусмотрены следующие параметры.
ALIGN и VALIGN
Могут применяться в кодах <TR>, <TD> и <TH>. Параметр горизонтального выравнивания ALIGN может принимать значения LEFT, RIGHT и CENTER (по умолчанию LEFT для <TD> и CENTER для <TH>). Параметр вертикального выравнивания VALIGN может принимать значения ТОР (по верхнему краю), BOTTOM (по нижнему краю), MIDDLE (посередине), BASELINE (по базовой линии). По умолчанию — MIDDLE.
NOWRAP
Отключает возможность автоматического разбиения текста ячейки на строки. Может применяться в кодах <TR>, <TD> и < TH >.
WIDTH и HEIGHT
Могут применяться в кодах <TD> и <TH>. Их синтаксис аналогичен синтаксису этих параметров для тэга <TABLE>. Их значение определяет ширину или высоту ячейки, для которой записаны данные параметры. Значения могут задаваться в пикселях или в процентах от размеров всей таблицы.
Поскольку таблица представляет собой связную структуру, состоящую из строк и колонок, то задание ширины для какой-либо ячейки влияет на ширину всей колонки, в которой расположена ячейка, а задание высоты влияет на всю строчку. Если в колонке значение ширины указано лишь в одной ячейке, то данное значение становится шириной всей колонки. Если таких указаний несколько, то выбирается максимальное значение. Те же свойства характерны и для строк.
COLSPAN
Указывает, какое количество ячеек будет объединено по горизонтали для указанной ячейки. По умолчанию - 1. Применяется в кодах <TD> и <TH>.
ROWSPAN
Указывает, какое количество ячеек будет объединено по вертикали для указанной ячейки. По умолчанию - 1. Применяется в кодах <TD> и <TH>.
BGCOLOR
Цвет фона. Может встречаться в тэгах <TABLE>, <TR>, <TD> и < TH >.
Дополнительные параметры тега <TABLE>
BORDERCOLOR
Цвет рамки.
FRAME
Этот атрибут указывает, какие стороны кадра, окружающего таблицу, будут видимы. Возможные значения:
void - сторон нет (по умолчанию);
above - только верхняя часть;
below - только нижняя часть;
hsides - только верхняя и нижняя часть;
vsides - только левая и правая части;
lhs - только левая часть;
rhs - только права часть;
box - все четыре части;
border - все четыре части.
RULES
Этот атрибут указывает, какие границы будут отображаться между ячейками. Генерация границ зависит от браузера пользователя. Возможные значения:
none - нет rules (по умолчанию);
groups - между группами строк (см. THEAD, TFOOT, TBODY) и группами столбцов (см. COLGROUP и COL);
rows - между строками;
cols - между столбцами;
all - между строками и столбцами.
Настройка border="0" подразумевает frame="void" и, если не указано другое, rules="none".
Другие значения border предполагают frame="border" и, если не указано другое, rules="all". Значение "border" в начальном теге элемента TABLE должно интерпретироваться как значение атрибута frame. Предполагается, что rules="all" и используется некоторое стандартное значение (не нулевое) для атрибута border.
Пример таблицы
<TABLE BORDER=5>
<CAPTION ALIGN=bottom> Таблица №1 </CAPTION>
<TR><TD ROWSPAN=2></TD><TH COLSPAN=2>Среднее значение</TH></TR>
<TR><TH>Рост</TH><TH>Вес</TH></TR>
<TR><TD>Мужчины</TD><TD ALIGN=center>174</TD><TD ALIGN=center>78</TD></TR>
<TR><TD>Женщины</TD><TD ALIGN=center>165</TD><TD ALIGN=center>56</TD></TR>
</TABLE>
| Среднее значение | ||
| Рост | Вес | |
| Мужчины | ||
| Женщины | ||
| Таблица №1 |
< COLGROUP> и < COL>
Теги < COLGROUP> и < COL> определяют общие свойства столбцов таблицы, объединяя атрибуты отдельных клеток команды TD. Тег <COLGROUP> является контейнером и имеет закрывающий тег </COLGROUP>. Внутри него может находиться несколько тегов < COL>. Если несколько < COLGROUP> идут друг за другом, закрывающий тег можно опустить.