Таблицы. Таблицы в HTML организуются как набор столбцов и строк

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

Синтаксис определения таблицы в общем, виде:

<TABLE BORDER=... WIDTH=... >

<TR>

<TD параметры =… > 1-я клетка 1-ой строки </TD>

<TD параметры =... > 2-я клетка 1-ой строки </TD>

</TR>

<TR>

<TD> 1-я клетка 2-ой строки </TD>

...

</TR>

Где таблица: <TABLE>...</TABLE>. Это основные тэги, описывающие таблицу. Все элементы таблицы должны находиться внутри этих двух тэгов. По умолчанию таблица не имеет обрамления и разделителей. Обрамление добавляется атрибутом BORDER. Строка таблицы: <TR>...</TR>. Количество строк таблицы определяется количеством встречающихся пар тэгов <TR>..</TR>. Строки могут иметь атрибуты ALIGN и VALIGN, которые описывают визуальное положение содержимого строк в таблице. Ячейка таблицы: <TD>...</TD>. Описывает стандартную ячейку таблицы. Ячейка таблицы может быть описана только внутри строки таблицы. Каждая ячейка должна быть пронумерована номером колонки, для которой она описывается. Если в строке отсутствует одна или несколько ячеек для некоторых колонок, то браузер отображает, пустую ячейку. Расположение данных в ячейке по умолчанию определяется атрибутами ALIGN=left и VALIGN=middle. Данное расположение может быть исправлено как на уровне описания строки, так и на уровне описания ячейки.

... </TABLE>

Заголовок таблицы: <TH>...</TH>. Ячейка заголовка таблицы имеет ширину всей таблицы; текст в данной ячейке имеет атрибут BOLD и ALIGN=center.

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

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

ALIGN. Если атрибут ALIGN присутствует внутри тэгов <CAPTION> и </CAPTION>, то он определяет положение подписи для таблицы (сверху или снизу). По умолчанию ALIGN=top. Если атрибут ALIGN встречается внутри <TR>, <TH> или <TD>, он управляет положением данных в ячейках по горизонтали. Может принимать значения left (слева), right (справа) или center (по центру).

VALIGN — встречается внутри тэгов <TR>, <TH> и <TD>. Он определяет вертикальное размещение данных в ячейках. Может принимать значения top (вверху), bottom (внизу), middle (по середине) и baseline (все ячейки строки прижаты кверху).

NOWRAP — говорит о том, что данные в ячейке не могут логически разбиваться на несколько строк и должны быть представлены одной строкой.

COLSPAN — указывает, какое количество ячеек будет объединено по горизонтали для указанной ячейки. По умолчанию — 1.

ROWSPAN — указывает, какое количество ячеек будет объединено по вертикали для указанной ячейки. По умолчанию — 1.

COLSPEC — позволяет задавать фиксированную ширину колонок либо в символах, либо в процентах, например COLSPEC="20 %".

CELLSPACING — задает расстояние между ячейками таблицы (по умолчанию 2 пиксела).

CELLPADDING — определяет расстояние между рамкой ячейки и ее содержимым (по умолчанию 1 пиксел).

WIDTH — задает ширину таблицы либо в абсолютных единицах, либо в процентах относительно размера экрана. Используя внутри тэга <TD>, можно указывать ширину ячейки.

HEIGHT — то же, что и WIDTH, но определяет высоту таблицы.

FRAME — позволяет описывать внешние рамки таблицы. Может принимать следующие значения:

- VOID — нет рамки;

- ABOVE — отображает внешнюю часть рамки;

- BELOW — отображает нижнюю часть рамки;

- HSIDES — отображает верхнюю и нижнюю части рамки;

- LHS — отображает левую часть рамки;

- RHS — отображает правую часть рамки;

- VSIDES — отображает левую и правую части рамки;

- BOX или BORDER — отображает все части рамки.

- RULES — описывает рамки внутри таблицы. Может принимать следующие значения:

- NONE — нет рамок;

- GROUPS — отображает горизонтальные части рамки между группами таблицы;

- ROWS — отображает горизонтальные части рамки внутри таблицы;

- COLS — отображает вертикальные части рамки внутри таблицы;

- ALL — отображает все части рамки внутри таблицы;

- BGCOLOR — задает цвет фона таблицы;

- BORDERCOLOR — задает цвет рамки;

- BORDERCOLORLIGHT — задает цвет светлой части трехмерной рамки;

- BORDERCOLORDARK — задает цвет темной части трехмерной рамки.
Верхние и нижние колонтитулы таблицы задаются контейнерами

<THEAD>, <TFOOT>.

Иногда требуется поместить в таблицу пустые ячейки. Это можно сделать, поместив в ячейку пробел (&#32), неразрывный пробел (&nbsp) или тэг <br>.

Пример:

<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>

В браузере это будет выглядеть следующим образом:

Рисунок 12 – Таблица

Списки

Существует три основных вида списков в HTML-документе: нумерованный, ненумерованный, список определений.

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

Для создания заголовка списка используется контейнер <LH>.

В нумерованном списке браузер автоматически вставляет номера элементов по порядку. Если удалить произвольное количество элементов нумерованного списка, то остальные номера автоматически будут пересчитаны.

Нумерованный список заключается в контейнер <OL>. Каждый элемент списка начинается с тэга <LI>.

Пример:

<OL>

<LI> Первый пункт списка

<LI> Второй пункт списка

<LI>...

</OL>

Тэг <OL> может иметь параметры:

<OL TYPE=A|a|I|i|1 START=n>

Где

TYPE — вид счетчика: A — большие латинские буквы (A,B,C...); a — маленькие латинские буквы (a,b,c...); I — большие римские цифры (I,II,III...); i — маленькие римские цифры (i,ii,iii...); 1 — обычные цифры (1,2,3...). Используется по умолчанию.

START=n — число, с которого начинается отсчет.

Для ненумерованных списков браузер обычно использует маркеры для пометки элемента списка. Вид маркера, как правило, настраивает пользователь браузера.

Ненумерованный список заключается в контейнер <UL>. Как и в случае нумерованного списка, каждый элемент начинается с тэга <LI>.

Пример:

<UL>

<LI> Первый пункт списка

<LI> Второй пункт списка

<LI>...

</UL>

Тэг <UL> может иметь параметр:

<UL TYPE=disc|circle|square>

Тип тэга <UL> определяет внешний вид маркера как вид по умолчанию (disc), круглый (circle) или квадратный (square).

Список определений заключается в контейнер <DL>. Список состоит из двух частей: термина и его описания. Каждый термин начинается тэгом <DT>, а описание — тэгом <DD>. Пример:

<DL>

<DT> Отдел маркетинга

<DD> Данный отдел занимается продвижением продуктов и услуг

<DT> Финансовый отдел

<DD> Данный отдел занимается всеми финансовыми операциями

<DT> Отдел кадров

<DD> Данный отдел занимается учетом и набором новых сотрудников фирмы, распределением отпусков, отслеживанием больничных листов.

</DL>

Пример:

<ol> <li><p style="margin-top: 0; margin-bottom: 0">132123213213</p></li> <li><p style="margin-top: 0; margin-bottom: 0">2132132131</p></li>

</ol><ol type="I"> <li><p style="margin-top: 0; margin-bottom: 0">132123213213</p></li> <li><p style="margin-top: 0; margin-bottom: 0">2132132131</p></li>

</ol><ol type="A"> <li><p style="margin-top: 0; margin-bottom: 0">132123213213</p></li> <li><p style="margin-top: 0; margin-bottom: 0">2132132131</p></li>

</ol><ul> <li><p style="margin-top: 0; margin-bottom: 0">23213213123</p></li> <li><p style="margin-top: 0; margin-bottom: 0">123213123</p></li>

</ul>

В браузере это будет выглядеть следующим образом:

Рисунок 13 – Списки

Контрольные вопросы

1) Каким образом указать конкретное число повторений мультимедиа файлов;

2) Как указать программе просмотра проиграть файл автоматически;

3) Как можно проигрывать мультимедиа в в ONLINE режиме;

4) Как указать текст, который будет отображен браузером, не поддерживающим отображение графики;

5) Каким образом запретить разбиение данных в ячейке таблицы, т.е. представить единой строкой

6) Как сделать, чтобы в таблице отсутствовали рамки;

7) Как указать для списка номер первого пункта;

8) Как задать вид счетчика для списков, или указать внешний вид маркера.

Тесты

1) Какие форматы графических файлов наиболее часто применяются в HTML?

а) BMP;

б) JPG;

в) PNG;

г) GIF.

2) Какие основные значения атрибута ALIGN используются для определения положения изображения относительно окружающего текста? а) Left;

б) Right;

в) Top;

г) Bottom;

д) Baseline.

3) В каких тэгах возможно применение картинок?

а) IMG;

б) INPUT;

в) TABLE;

г) BODY.

4) Что будет отображать браузер не поддерживающий изображения, или у которого выключено отображение графики?

а) ничего;

б) выделит место под картинку;

в) будет ALT тэга IMG.

5) Что происходит, если у изображения не указаны атрибуты WIDTH, HEIGHТ?

а) не отображается;

б) отображается в исходном размере картинки;

в) показывается в виде иконки.

6) С помощью каких тэгов описывается таблица?

а) <TABLE>;

б) <TR>;

в) <OL>;

г) <TD>;

д) <BODY>.

7) Что определяет атрибут BORDER у элемента разметки TABLE?

а) расстояние между ячейками;

б) расстояние от содержания до границы;

в) ширину ячейки;

г) ширину границы;

д) вид границы.