Примечание 4 страница

< IMG src = «pointer.gif» usemap = «someserver. com/mysite. html#map1»>

Изображение‑ карта из примера 6. 3 выглядит так, как показано на рис. 6. 4.

Рис. 6. 4. Изображение-карта

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

6. 3. Добавление фоновой музыки

Сейчас будет кратко рассмотрен HTML‑ элемент, позволяющий добавить музыку, которая будет проигрываться при открытии HTML‑ документа, – элемент BGSOUND. Он задается при помощи одиночного тега < BGSOUND> и имеет следующие атрибуты:

• src – URI аудиофайла (поддерживаются только форматы WAV и MID);

• loop – задает количество повторений (значения 0 или –1 используются при необходимости бесконечного воспроизведения, значения меньше –1 интерпретируются как 1), по умолчанию используется значение 1;

• volume – задает громкость воспроизведения; значения от –10 000 (минимальная громкость) до 0 (максимальная громкость, используется по умолчанию);

• balance – задает значение стереобаланса, принимает значения от –10 000 (левый баланс) до 10 000 (правый баланс); по умолчанию используется значение 0 (центральный баланс).

Ниже приведен пример 6. 4, представляющий собой простейший HTML‑ документ, при открытии которого начинает проигрываться музыка из файла bgsound. wma.

Пример 6. 4. Проигрывание музыки при просмотре HTML-документа

< TITLE> Проигрывание музыки< /TITLE>

< BODY>

< BGSOUND src = " bgsound. wma" volume = -1000>

Текст HTML-документа...

< /BODY>

Как можно было убедиться, элемент BGSOUND позволяет очень легко добавить звуковое оформление HTML‑ документа. Жаль только, что этот элемент не является стандартным HTML‑ элементом. К тому же он поддерживается только браузером Internet Explorer.

6. 4. Простое проигрывание видео

Браузер Internet Explorer поддерживает также ряд нестандартных дополнительных атрибутов элемента IMG, при помощи которых можно очень просто организовать проигрывание видео в окне браузера. Рассмотрим эти атрибуты:

• dynsrc – URI видеофайла (поддерживается только стандарт AVI);

• loop – задает количество повторений видеоролика (полностью аналогичен атрибуту loop рассмотренного выше элемента BGSOUND).

Если задано значение атрибута src (адрес статичного изображения), то указанное изображение показывается во время загрузки видеофайла. Ниже приведен простой пример 6. 5, содержащий HTML‑ документ, при загрузке которого начинается воспроизведение видеоролика из файла clip. avi, причем область воспроизведения занимает все окно браузера.

Пример 6. 5. Проигрывание видео в окне браузера

< TITLE> Проигрывание видео< /TITLE>

< BODY>

< IMG dynsrc = " clip. avi" loop = 1 height = " 100%" width = " 100%" >

< /BODY>

6. 5. Внедрение объектов

В текст HTML‑ документа могут быть добавлены не только линейки, рисунки, видео и звук. Можно внедрить документы множества других приложений, построенных с использованием технологии OLE, а также элементы управления ActiveX.

Для внедрения объектов в документ используется элемент OBJECT (задается парными тегами < OBJECT> и < /OBJECT> ). При внедрении объектов с помощью OBJECT используются следующие атрибуты:

• classid – при внедрении ActiveX‑ компонентов задает уникальный идентификатор класса (CLSID), строка вида clsid: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx; при внедрении других объектов может содержать URI внедряемого объекта или другие сведения для идентификации объекта (см. приведенный далее пример с апплетом);

• codetype – если задан, то означает тип объекта, на который указывает classid; позволяет браузеру избежать загрузки объекта неподдерживаемого типа (значения см. у атрибута type);

• data – позволяет указать URI данных, необходимых для объекта; зависит от конкретного внедряемого объекта;

• type – тип данных, указанных в атрибуте data (так называемый MIME‑ тип);

• codebase – задает базовый URI, относительно которого разрешаются все относительные URI, задаваемые для этого элемента OBJECT; например, если codebase равен " http: //www. someserver. com/images", то значение " img1.gif", заданное для атрибута data, означает " http: //www. someserver. com/images/ img1.gif ";

• standby – задает текст, который отображается браузером до окончания загрузки объекта;

• height – задает высоту внедренного объекта;

• width – задает ширину внедренного объекта.

Для элемента OBJECT поддерживаются также другие атрибуты, задающие положение и оформление объекта, аналогичные атрибутам элемента IMG. Если не указать размер в атрибутах height и width, то внедренный объект будет невидимым. Текст, заключенный между тегами < OBJECT> и < /OBJECT>, выводится браузером в случае невозможности загрузить заданный объект.

При необходимости внедрения какого‑ либо конкретного ActiveX‑ компонента его CLSID можно посмотреть в документации для этого компонента реестра Windows или в разделе HKEY_CLASSES_ROOT\CLSID (например, CLSID компонента RichText (компонент для редактирования текста в RTF‑ формате, содержащего форматирование, рисунки и прочие объекты) равен 3B7C8860-D78F-101B-B9B5-04021C009402). Рассмотрим пример внедрения такого текстового поля в HTML‑ документ (пример 6. 6).

Пример 6. 6. Внедрение компонента текстового поля в HTML-документ

< TITLE> Внедрение текстового поля RichEdit< /TITLE>

< BODY>

< OBJECT classid = " clsid: 3B7C8860-D78F-101B-B9B5-04021C009402"

width = " 400" height = " 300" >

Не удалось внедрить RichEdit

< /OBJECT>

< /BODY>

Результат внедрения текстового поля RichText в HTML‑ документ (со вставленным фрагментом из редактора Microsoft Word) приведен на рис. 6. 5.

Рис. 6. 5. Внедренный компонент RichEdit

При помощи элемента OBJECT документы некоторых распространенных приложений могут быть также легко внедрены в HTML‑ документ. Для этого достаточно указать значения атрибутов data и type, не используя атрибут classid. Например, для внедрения на страницу документа Microsoft Word достаточно следующего фрагмента (пример 6. 7).

Пример 6. 7. Внедрение документа Microsoft Word

< TITLE> Внедренный документ Microsoft Word< /TITLE>

< BODY>

< OBJECT data = " word. doc" type = " application/msword" width = " 70%"

height = " 50%" border = " 1" >

Не удалось внедрить документ

< /OBJECT>

< /BODY>

Результат внедрения документа Microsoft Word показан на рис. 6. 6.

Рис. 6. 6. Внедренный документ Microsoft Word

Таким же образом можно внедрить видео, изображения и пр. Только нужно указать расположение внедряемого файла и его MIME‑ тип (список некоторых наиболее распространенных MIME‑ типов приведен в табл. 6. 2).

Таблица 6. 2. Некоторые MIME-типы

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

Элемент PARAM задается одиночным тегом < PARAM>, который может использоваться только внутри элемента OBJECT. Элемент PARAM имеет следующие атрибуты:

• name – имя свойства; список доступных имен зависит от конкретного объекта;

• value – значение свойства;

• valuetype – тип значения свойства; для этого атрибута доступны следующие варианты значений:

· data – указывает, что value содержит значение, которое может быть представлено в виде строки и в таком виде передано внедренному объекту (значение по умолчанию);

· ref – показывает, что value содержит URI какого‑ то ресурса;

· object – указывает, что value содержит идентификатор (значение атрибута id) другого объекта, внедренного в страницу при помощи элемента OBJECT;

• type – если атрибуту valuetype присвоено значение ref, то задает тип (MIME‑ тип) ресурса, на который указывает заданный в атрибуте value URI.

Описать все возможные свойства объектов, доступных для внедрения в HTML‑ документы, просто невозможно. Таких объектов множество, да и каждый из них имеет свой собственный набор свойств. В любом случае, если вам понадобится использовать какой‑ то объект, придется разыскать или примеры его использования, или документацию. Здесь же мы ограничимся небольшим примером, а именно внедрением в документ Проигрывателя Window Media с заданием значений трех его свойств (пример 6. 8).

Пример 6. 8. Внедрение Проигрывателя Windows Media

< TITLE> Внедрение объекта и присвоение значений его свойствам< /TITLE>

< BODY>

<! –Внедрение проигрывателя Windows Media Player–>

< OBJECT CLASSID=" CLSID: 6BF52A52-394A-11d3-B153-00C04F79FAA6"

width = " 300" height = " 225" >

< PARAM name = " URL" value = " Clip. avi" >

< PARAM name = " autoStart" value = " True" >

< PARAM name = " uiMode" value = " none" >

Не удалось внедрить Проигрыватель Media Player

< /OBJECT>

< /BODY>

Как можно увидеть из текста примера, CLSID компонента проигрывателся равен 6BF52A52-394A-11d3-B153-00C04F79FAA6. В примере при помощи HTML‑ элемента PARAM задаются значения трех свойств:

• URL – файл для открытия в проигрывателе (в нашем случае это файл Clip. avi, расположенный в той же папке, что и HTML‑ документ);

• autoStart – установив значение в True, заставляем проигрыватель автоматически начинать воспроизведение;

• uiMode – установив значение этого свойства в none, убираем элементы управления проигрывателя, так что в документе будет показано только проигрываемое видео.

Кстати, этот пример хорошо показывает универсальность HTML‑ элемента OBJECT, позволяющую в реальной практике отказаться от использования нестандартных возможностей элементов IMG и BGSOUND, рассмотренных выше в этой главе.

Глава 7 Таблицы

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

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

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

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

Итак, учитывая приведенные выше сведения, можно добавить в документ простейшую таблицу, например, как показано ниже (пример 7. 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>

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

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

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

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

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

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

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

Если используется заголовок таблицы, то элемент CAPTION должен быть задан непосредственно после тега < TABLE> нужной таблицы. Кроме того, для любой таблицы может быть создан только один заголовок. Пример создания таблицы с заголовком приведен ниже (пример 7. 2).

Пример 7. 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 способов форматирования, чтобы хоть как-то можно было отличить заголовок таблицы от обычного текста. Таблица, приведенная в примере 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. Настроенная таблица

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

< TABLE align = center border = 5 bgcolor = green bordercolor = yellow cellpadding = " 5" width = «50%»>

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

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

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

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

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

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

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

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

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

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

< TITLE> Настройка отображения строк таблицы< /TITLE>

< TABLE align = center border = 5 bgcolor = green bordercolor = yellow cellpadding = " 5" width = " 50%" >

< CAPTION align = top> < B> Простая таблица, но уже с заголовком и оформлением< /B> < /CAPTION>

< TR align = right bgcolor = white> < TD> 1< TD> 11< TD> 111< TD> 1111

< TR align = center bordercolor = black> < TD> 2< TD> 22< TD> 222< TD> 2222

< TR bgcolor = white> < TD> 3< TD> 22< TD> 333< TD> 3333

< TR bordercolor = black> < TD> 4< TD> 44< TD> 444< TD> 4444

< /TABLE>

Таблица, формируемая браузером при обработке данного кода, показана на рис. 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. Таблица с объединенными ячейками

< TITLE> Таблица с объединенными ячейками< /TITLE>

< TABLE align = center border = 3 bordercolor = black>

< CAPTION align = top> < B> Доходы от продаж за второе полугодие XXXX года< /B> < /CAPTION>

<! –формирование первой строки шапки таблицы–>

< TR align = center>

< TD rowspan = 2> < B> Филиал\Период< /B>

< TD colspan = 3> < B> 3 квартал< /B>

< TD colspan = 3> < B> 4 квартал< /B>

<! –формирование второй строки шапки (названия месяцев)–>

< TR align = center>

< TD> < B> Июль< /B> < TD> < B> Август< /B> < TD> < B> Сентябрь< /B>

< TD> < B> Октябрь< /B> < TD> < B> Ноябрь< /B> < TD> < B> Декабрь< /B>

<! –далее следуют строки с данными (первая ячейка каждой строки – название филиала–>

< TR align = right> < TD align = left> Филиал 1< TD> 123123< TD> 323233

< TD> 323453< TD> 231423< TD> 323212< TD> 243673

< TR align = right> < TD align = left> Филиал 2< TD> 223523< TD> 225243

< TD> 314423< TD> 212445< TD> 373812< TD> 274673

< TR align = right> < TD align = left> Филиал 3< TD> 183123< TD> 186834

< TD> 323453< TD> 231423< TD> 323212< TD> 243673

< TR align = right> < TD align = left> Филиал 4< TD> 125163< TD> 334343

< TD> 123553< TD> 167423< TD> 254412< TD> 132367

< /TABLE>

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

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

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

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

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

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

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

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

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

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

< TITLE> Применение ячеек заголовков< /TITLE>

< TABLE align = center border = 3 bordercolor = black>

< CAPTION align = top> < B> Доходы от продаж за второе полугодие XXXX

года< /B> < /CAPTION>

<! –формирование первой строки шапки таблицы–>

< TR>

< TH rowspan = 2> Филиал\Период

< TH colspan = 3> 3 квартал

< TH colspan = 3> 4 квартал

<! –формирование второй строки шапки (названия месяцев)–>

< TR>

< TH> Июль< TH> Август< TH> Сентябрь

< TH> Октябрь< TH> Ноябрь< TH> Декабрь

<! –далее следуют строки с данными (первая ячейка каждой строки – название филиала–>

...

< /TABLE>

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

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

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

Группировка строк

В любой добавляемой в HTML‑ документ таблице можно выделить три логически цельных части: шапка, тело таблицы и «футер» (нижняя часть таблицы, footer). Эти части состоят из строк, то есть строки таблицы можно сгруппировать в шапку, тело и футер.

Рассматриваемые части таблицы задаются следующим образом: шапка обозначается HTML‑ элементом THEAD (< THEAD> и < /THEAD> ), тело задается элементом TBODY (< TBODY> и < /TBODY> ), а футер – элементом TFOOT (< TFOOT> и < /TFOOT> ). Все закрывающие теги являются необязательными. Внутри этих HTML‑ элементов (между задающими их тегами) помещаются строки, относящиеся к соответствующим частям таблицы (пример 7. 6).

Пример 7. 6. Задание частей таблицы

< TABLE>

< THEAD>

< TR> Первая строка шапки...

< TR> Вторая строка шапки...

< /THEAD>

< TBODY>

< TR> Строка данных...

...

< /TBODY>

< TFOOT>

< TR> Строка футера...

< /TFOOT>

< /TABLE>

Данные таблицы задаются с использованием элементов TH и TD. В приведенном примере закрывающие теги элементов THEAD, TBODY и TFOOT можно опустить. Задавая различные значения атрибутам align, valign, bgcolor в открывающих тегах рассматриваемых HTML‑ элементов, можно управлять отображением сразу всех ячеек той или иной части таблицы.

Любая таблица может содержать несколько частей, обозначенных элементом TBODY. Нужно также отметить, что принадлежность строк к телу таблицы подразумевается по умолчанию, то есть если в таблице есть строки, перед определением которых в тексте HTML‑ документа не было ни < THEAD>, ни < TFOOT>, то такие строки считаются заданными внутри элемента TBODY.

⇐ Предыдущая 1 2 3 4 567 8 9 10 Следующая ⇒