3.1. Структура простейшей таблицы
Для построения простейшей таблицы нам понадобятся как минимум три элемента:
TABLE- Элемент для созданияhtml таблицы. Обязательно должен иметь начальный и конечный теги. По умолчанию html таблица печатается без рамки, а разметка осуществляется автоматически в зависимости от объема содержащейся в ней информации. Сразу скажем, что естьатрибут BORDER который задает толщину рамки таблицы в пикселах.
TR(Table Row) - Создает новый ряд таблицы. Закрывающий тег обязателен.
TD(Table Data) - Начинает и заканчивает каждую ячейку ряда html таблицы. Обязателен закрывающий тег.
Итак, учитывая приведенные выше сведения, можно добавить в документ простейшую таблицу, например, как показано ниже (пример 3.1).
Пример 7.1. Создание простейшей таблицы
<TITLE>Простейшая таблица</TITLE>
<TABLE>
<TR><TD>1<TD>11<TD>111<TD>1111
<TR><TD>2<TD>22<TD>222<TD>2222
<TR><TD>3<TD>22<TD>333<TD>3333
<TR><TD>4<TD>44<TD>444<TD>4444
</TABLE>
Таблица из приведенного примера выглядит так, как показано на рис. 3.1.
Рис. 3.1. Простейшая таблица
Теперь рассмотрим, какие же возможности настройки внешнего вида таблиц предоставляет HTML, а также некоторые дополнительные HTML элементы, используемые при создании таблиц.
Заголовок таблицы
Для каждой таблицы имеется возможность создать заголовок, используя HTML элемент CAPTION (задается парными тегами <CAPTION> и </CAPTION>), помещенный после тега <TABLE>.
Пример создания таблицы с заголовком приведен ниже (пример 3.2).
Пример 3.2. Таблица с заголовком
<TITLE>Заголовок таблицы</TITLE>
<TABLE>
<CAPTION><B>Простая таблица, но уже с заголовком</B>
</CAPTION>
<TR><TD>1<TD>11<TD>111<TD>1111
<TR><TD>2<TD>22<TD>222<TD>2222
<TR><TD>3<TD>22<TD>333<TD>3333
<TR><TD>4<TD>44<TD>444<TD>4444
</TABLE>
К тексту элемента CAPTION может применяться любой из рассмотренных в гл. 3 способов форматирования, чтобы хоть как-то можно было отличить заголовок таблицы от обычного текста.
Таблица, приведенная в примере 3.2, выглядит так, как показано на рис. 3.2.
Рис. 3.2. Заголовок таблицы
Для элемента CAPTION можно задать атрибут, определяющий положение заголовка относительно таблицы, – align. Этот атрибут может принимать следующие значения:
• top – заголовок показывается сверху таблицы (используется по умолчанию);
• bottom – под таблицей;
• left – слева от таблицы;
• right – справа от таблицы.
Здесь приведен официальный список (согласно спецификации HTML 4.01) функций, которые ассоциированы с каждым значением атрибута align. Однако в действительности поведение браузеров при отображении заголовка с заданным выравниванием может отличаться. Например, Internet Explorer при использовании значений left или right показывает заголовок таблицы все равно сверху, лишь изменяя горизонтальное выравнивание текста.
Параметры отображения таблицы
Многие параметры отображения таблицы задаются установкой соответствующих значений атрибутов элемента TABLE. Рассмотрим наиболее используемые атрибуты:
• align – задает положение таблицы в окне браузера (left, right или center);
• bgcolor – задает цвет фона таблицы;
• border – задает толщину внешней границы таблицы;
• bordercolor – цвет границ таблицы (цвет внешней границы и цвет границ ячеек);
• cellpadding – размер пустого пространства между границами и содержимым ячеек таблицы;
• cellspacing – размер пустого пространства между ячейками таблицы;
• frame – задает отображаемые части внешней рамки таблицы, может принимать одно из перечисленных ниже значений;
? void – рамка не отображается (используется по умолчанию);
? above – отображается только верхняя граница;
? below – показывается только нижняя граница;
? hsides – отображаются верхняя и нижняя границы;
? vsides – показываются правая и левая границы;
? lhs – отображается только левая граница;
? rhs – показывается только правая граница;
? box – рамка отображается полностью;
? border – то же самое, что и box;
• rules – задает, какие именно границы между ячейками должны отображаться, может принимать одно из следующих значений:
? none – границы между ячейками не отображаются (используется по умолчанию);
? group – показывать границы только между группами строк и столбцов (группировка строк и столбцов будет рассмотрена ниже);
? rows – отображать только границы между строками таблицы;
? cols – показывать границы только между столбцами таблицы;
? all – отображать все границы между ячейками;
• height – задает рекомендуемую высоту таблицы;
• width – определяет рекомендуемую ширину таблицы.
Используя атрибуты border, frame и rules, следует помнить, что при установке значения атрибута border вручную значения атрибутов frame и rules считаются равными border и all соответственно (если другие значения этих атрибутов задаются вручную в том же элементе, то учитываются заданные вручную значения, а не border и all). Это значит, что для того чтобы просто показать рамку вокруг таблицы, достаточно задать только значение атрибута border.
В качестве значений атрибутов, задающих размер таблицы, можно использовать как абсолютные значения в пикселах, так и процентные значения, означающие долю от ширины окна браузера, занимаемую таблицей.
На рис. 3.3 показана все та же простейшая таблица. Однако теперь ее отображение настроено при помощи атрибутов HTML элемента TABLE.
Рис. 3.3. Настроенная таблица
Согласитесь, что теперь эта таблица выглядит несколько симпатичнее. Кстати, она занимает сейчас ровно половину окна браузера. Для настройки отображения приведенной таблицы использовалось задание значений атрибутов следующим образом:
<TABLE align = center border = 5 bgcolor = green bordercolor = yellow cellpadding = "5" width = «50%»>