Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
ОБЩИЙ_файл_ПОСОБИЕ.doc
Скачиваний:
0
Добавлен:
01.05.2025
Размер:
22.69 Mб
Скачать

Застосування таблиць

Важливими елементами HTML є таблиці. В цій мові вони мають подвійне призначення: 1) звичайне – для структурування та упорядкування даних; 2) специфічне – для розробки Web-документів. Нижче розглядається перший варіант, тобто таблиці як носії упорядкованих даних. За структурою таблиця представляється, як сукупність комірок, об’єднаних в рядки.

Для визначення таблиці в HTML використовується елемент TABLE, котрий задається парними тегами <TABLE> і </TABLE>. Таблиця зазвичай має назву. Для назви використовується елемент CAPTION у вигляді подвійного тега : <CAPTION> і </CAPTION>. Елемент CAPTION повинен подаватись слідом за елементом TABLE.

Рядки задаються елементами TR, котрі також представляються парними тегами <TR> і </TR>.

Комірки подаються елементами двох типів: TH І TD. Елементи TH стосуються комірок заголовків стовпців і рядків і задаються парними тегами <TH> і </TH>, а елементи TD – тегами звичайних комірок з даними. Вони також задаються парними тегами <TD> і </TD>.

Закриваючі теги </TR>, </TH>, </TD> не є обов’язковими і їх можна опускати. Структура таблиці в HTML в найпростішому вигляді може бути представлена так:

<TABLE>

<CAPTION> Назва таблиці </CAPTION>

<TR>…<TH>…<TH>…

<TR>…<TD>…<TD>…

</TABLE>.

На місці крапок записуються відповідні дані. Нижче подано приклад створення таблиці “Звіт про доходи фірм” на HTML-мові:

<HTML>

<HEAD>

<Title> Приклад створення таблиці </TITLE>

</HEAD>

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

<CAPTION align=top> <B> Звіт про доходи фірм </CAPTION>

<!-- Створення першого рядка шапки таблиці -->

<TR align=center>

<TD rowspan=2 <B> Назва фірми </B>

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

<TD colspan=3 <B> 2-й квартал </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> Азот <TD> 150000 <TD> 140000 <TD> 130000 <TD> 140000 <TD> 155000 <TD> 145000

<TR align=right> <TD align=left> Призма <TD> 100000 <TD> 120000 <TD> 95000 <TD> 110000 <TD> 115000 <TD> 110000

<TR align=right> <TD align=left>Гарант <TD> 150000 <TD> 140000 <TD> 150000 <TD> 150000 <TD> 130000 <TD> 160000

<TR align=right> <TD align=left> Спорт <TD> 80000 <TD> 75000 <TD> 90000 <TD> 100000 <TD> 80000 <TD> 90000

</TABLE>

</HTML>.

Згідно наведеного тексту програми броузер Internet Explorer відобразить таблицю, подану на рис. 9.5.

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

Елементам таблиці зазвичай присвоюються атрибути.

Рисунок 9.5. Відображення таблиці в броузері

Атрибуту TABLE притаманні наступні атрибути:

align (left, center, right) – задає положення таблиці на екрані;

width (число, число в %) – ширина таблиці в пікселах або в %;

border (число) – ширина зовнішньої рамки;

bgcolor (#RRGGBB) – колір фону за шістнадцятковою системою;

bordercolor (число) – колір рамки за шістнадцятковою системою;

cellspacing (число) – відстань між зовнішньою рамкою таблиці і комірками;

cellpadding (число) – відстань між рамками комірок і їх вмістом.

Для елемента TABLE атрибути не обов’язково указувати в програмі, бо їх установить броузер за умовчанням. Проте бажано це робити хоч би тому, що броузер відобразить таблицю без рамки.

Для ряду інших елементів таблиці основні атрибути такі:

align (таблиця, заголовок, рядок, комірка) – вирівнювання таблиці по горизонталі, вирівнювання даних по горизонталі, розміщення заголовка таблиці над або під таблицею;

valign (рядок, комірка) – вирівнювання по вертикалі;

width (таблиця, комірка) – ширина;

height (комірка) – висота;

colspan (комірка) – об’єднання в стовпцях;

rowspan (комірка) – – об’єднання в рядках;

bgcolor (таблиця, комірка) – колір фону;

cellspacing (таблиця) – відстань між комірками;

cellpadding (комірка) – відстань між рамками комірок і їх вмістом

border (таблиця, комірка) – відображення товщини ліній рамок комірок і рамки таблиці.

Стосовно елемента CAPTION атрибут align може приймати наступні значення:

top – заголовок поміщується над таблицею;

bottom – заголовок поміщується під таблицею;

left – заголовок поміщується зліва від таблиці;

right – заголовок поміщується справа від таблиці.