HTML: Популярный самоучитель — страница 9 из 26

7.1. Структура простейшей таблицы

Таблица в HTML представляется множеством ячеек, которые заключены в строки. Совокупность же всех строк и образует целую таблицу. Для обозначения таблицы используется HTML‑элемент TABLE, который задается парными тегами

и .

Строки таблицы задаются HTML‑элементом TR (парные теги и , закрывающий тег может отсутствовать). Ячейки в простейшем случае задаются HTML‑элементом TD (парные теги и , закрывающий тег может отсутствовать).

Итак, учитывая приведенные выше сведения, можно добавить в документ простейшую таблицу, например, как показано ниже (пример 7.1).

Пример 7.1. Создание простейшей таблицы

1	11	111	1111
2	22	222	2222
3	22	333	3333
4	44	444	4444

Таблица из приведенного примера выглядит так, как показано на рис. 7.1.

Рис. 7.1. Простейшая таблица

Приведенная на рисунке таблица выглядит не очень привлекательно. Но это всего лишь потому, что при ее создании не использовались никакие атрибуты элементов TABLE, TR и TD. Браузер применил к приведенной таблице настройки внешнего вида по умолчанию (даже не нарисовал ее границы).

7.2. Элементы таблицы

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

Заголовок таблицы

Для каждой таблицы имеется возможность создать заголовок, используя HTML‑элемент CAPTION (задается парными тегами и ), помещенный после тега

.

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

нужной таблицы. Кроме того, для любой таблицы может быть создан только один заголовок. Пример создания таблицы с заголовком приведен ниже (пример 7.2).

Пример 7.2. Таблица с заголовком

Простая таблица, но уже с заголовком

1	11	111	1111
2	22	222	2222
3	22	333	3333
4	44	444	4444

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

Рис. 7.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.

В качестве значений атрибутов, задающих размер таблицы, можно использовать как абсолютные значения в пикселах, так и процентные значения, означающие долю от ширины окна браузера, занимаемую таблицей.

На рис. 7.3 показана все та же простейшая таблица. Однако теперь ее отображение настроено при помощи атрибутов HTML‑элемента TABLE.

Рис. 7.3. Настроенная таблица

Согласитесь, что теперь эта таблица выглядит несколько симпатичнее. Кстати, она занимает сейчас ровно половину окна браузера. Для настройки отображения приведенной таблицы использовалось задание значений атрибутов следующим образом:

Параметры отображения строк таблицы

Для настройки особого отображения отдельных строк таблицы используются атрибуты HTML‑элемента TR (он объединяет отдельные ячейки в строки таблицы). Список основных атрибутов элемента TR:

• align – задает горизонтальное выравнивание текста ячеек строки, может принимать значения left, right, center или justify;

• valign – определяет вертикальное выравнивание текста ячеек строки, может принимать значения top, bottom, middle или baseline;

• bgcolor – задает цвет фона ячеек строки;

• bordercolor – определяет цвет рамки ячеек строки (если рамка отображается);

• height – позволяет указать рекомендуемую высоту ячеек строки;

• width – дает возможность указать рекомендуемую ширину ячеек строки.

Далее приведен небольшой пример оформления строк таблицы с использованием некоторых атрибутов HTML‑элемента TR совместно с использованием ранее рассмотренных атрибутов элемента TABLE (пример 7.3).

Пример 7.3. Оформление строк таблицы

Простая таблица, но уже с заголовком и оформлением

1	11	111	1111
2	22	222	2222
3	22	333	3333
4	44	444	4444

Таблица, формируемая браузером при обработке данного кода, показана на рис. 7.4.

Рис. 7.4. Настройка отображения строк таблицы

Параметры отображения ячеек. Слияние ячеек

Теперь рассмотрим самое мощное средство настройки отображения данных таблицы – настройку параметров отображения отдельных ячеек таблицы. Итак, для задания внешнего вида содержимого ячейки используются следующие атрибуты HTML‑элемента TD:

• align – задает горизонтальное выравнивание текста ячейки, может принимать значения left, right, center или justify;

• valign – определяет вертикальное выравнивание текста ячейки, может принимать значения top, bottom, middle или baseline;

• bgcolor – задает цвет фона ячейки;

• bordercolor – определяет цвет рамки ячейки (если рамка отображается);

• height – позволяет указать рекомендуемую высоту ячейки;

• width – дает возможность указать рекомендуемую ширину ячейки;

• colspan – задает количество столбцов для слияния;

• rowspan – определяет количество строк для слияния.

Все указанные атрибуты, кроме двух последних, должны быть вам знакомы. Последние два атрибута элемента TD используются для объединения нескольких ячеек при создании более сложных таблиц. Рассмотрим реализацию именно объединения нескольких ячеек на примере таблицы отчетности некоторого предприятия (пример 7.4 демонстрирует также возможность применения форматирования к тексту ячеек таблицы).

Пример 7.4. Таблица с объединенными ячейками

Доходы от продаж за второе полугодие XXXX года

Филиал\Период	3 квартал			4 квартал
	Июль	Август	Сентябрь	Октябрь	Ноябрь	Декабрь
Филиал 1	123123	323233	323453	231423	323212	243673
Филиал 2	223523	225243	314423	212445	373812	274673
Филиал 3	183123	186834	323453	231423	323212	243673
Филиал 4	125163	334343	123553	167423	254412	132367

Внешний вид таблицы представлен на рис. 7.5.

Рис. 7.5. Таблица с объединенными ячейками

Вообще, задание параметров отображения каждой ячейки таблицы вручную является операцией довольно трудоемкой и применяется в основном при использовании таблиц для формирования внешнего вида HTML‑документа. Исключение могут составить особые случаи, к которым, например, относится необходимость слияния только некоторых ячеек таблицы.

В примере 7.4 использовалось форматирование текста внутри ячеек для выделения тех из них, которые относят к шапке таблицы. Такое выделение ячеек шапки приведено только в качестве примера и является нежелательным в реальной практике. Для выделения заголовочных ячеек (например, относящихся к шапке таблицы) используется HTML‑элемент TH, рассматриваемый далее. Кроме того, слияние ячеек в некоторой степени можно реализовать, применяя другие средства HTML, – группировку строк и столбцов.

В этой главе говорится только о тексте внутри ячеек. Но это совсем не значит, что в ячейках таблиц могут содержаться только текстовые данные. Каждая ячейка таблицы может включать графику, внедренные объекты, списки, вложенные таблицы – практически все, что можно поместить в тело HTML‑документа. Именно возможность помещения в ячейки таблицы любых данных используется в примере описываемой в конце главы страницы, целиком построенной на использовании таблицы.

Ячейки заголовков

В предыдущем примере для визуального выделения ячеек заголовков таблицы использовалось форматирование текста внутри HTML‑элемента TD вручную. Как можно было заметить, такой способ выделения ячеек является отнюдь не самым удобным. Да и к тому же использовать такое форматирование текста крайне не рекомендуется.

Чтобы избавиться от необходимости задания текста заголовочных ячеек вручную (да и для того, чтобы лучше структурировать содержимое HTML‑документа), можно использовать элемент TH. Этот HTML‑элемент задается парными тегами и (закрывающий тег необязателен). Использование TH аналогично использованию элемента TD. При этом не нужно заботиться о внешнем виде текста заголовочных ячеек: браузер автоматически выделит их содержимое.

Итак, для использования возможностей HTML‑элемента TH рассмотренный ранее пример 7.4 можно переписать следующим образом (многоточие – строки с данными, аналогичными из примера 7.4) (пример 7.5).

Пример 7.5. Таблица с заголовочными ячейками

Доходы от продаж за второе полугодие XXXX

года

Филиал\Период	3 квартал			4 квартал
	Июль	Август	Сентябрь	Октябрь	Ноябрь	Декабрь ...

При обработке браузером приведенного HTML‑документа получится результат, аналогичный показанному на рис. 7.5.

7.3. Структурирование таблицы