ЗАГОЛОВОК
1 Подання таблиць на Web-сторінці
1.1 Завдання параметрів таблиці
1.2. Формування таблиці
1.3. Використання CSS для завдання параметрів таблиць
2 Завдання рухомих елементів на Web-сторінці
Приклад №1
1 Подання таблиць на Web-сторінці
HTML володіє великими можливостями для подання на Web-сторінці різних таблиць. Необхідно відзначити, що засоби формування таблиць використовуються в HTML не тільки і, напевно, не стільки для зображення власне таблиць, як для розміщення елементів Web сторінки на екрані. У цьому випадку екран браузера представляється у вигляді таблиці з невидимими межами, і окремі елементи Web сторінки поміщаються в ту або іншу комірку таблиці.
1.1 Завдання параметрів таблиці
Таблиці HTML вказується за допомогою тега-контейнера <TABLE> . . . </TABLE>. Загальні параметри таблиці задаються в тегу <TABLE> , який містить наступні параметри:
- ALIGN - вирівнювання таблиці:
- left - по лівому краю;
- center - по центру;
- right - по правому краю.
- WIDTH - ширина таблиці зазначається або в пікселях, або у відсотках від ширини екрана (за замовчуванням береться мінімально необхідної для представлення даних).
- HEIGHT - висота таблиці зазначається або в пікселях, або у відсотках від висоти екрану (за замовчуванням береться мінімально необхідної для представлення даних).
- BORDER - ширина обмежують ліній (або просто кордонів) таблиці, вказується в мілісекундах і за замовчуванням дорівнює 0 - в цьому випадку кордонів таблиці не видно;
- BORDERCOLOR - колір межі таблиці;
- BGCOLOR - колір фону таблиці;
- CELLSPACING - відстань у точках між сусідніми осередками таблиці (обмежують лінії включаються в комірку), за замовчуванням дорівнює 2;
- CELLPADDING - відстань у точках між кордоном комірки і її вмістом, за замовчуванням дорівнює 1.
Заголовок таблиці, якщо він необхідний, задається за допомогою тега-контейнера <CAPTION> . . . </CAPTION>, який містить параметр ALIGN:
- ALIGN - завдання розташування заголовку таблиці:
- top - зверху таблиці;
- bottom - знизу таблиці.
прикладі № 1 показано завдання параметрів таблиці.
1.2 Формування таблиці
Після завдання параметрів і заголовку таблиці виконується формування її структури та вмісту.
Побудова таблиці здійснюється по рядках з допомогою тегів-контейнерів <TR> . . . </TR> (- TR Table Row, рядок таблиці).
Формування кожного рядка виконується за комірок рядка зліва направо з допомогою тегів-контейнерів <TH> . . . </TH> (TH - Table Head, заголовок таблиці), які задають назви (заголовки) стовпців таблиці, і тегів-контейнерів <TD> . . . </TD> (TD - Table Data, дані таблиці), які задають значення елементів таблиці.
Обидва тега <TH> <TD> задають параметри і вміст комірки. Відмінність між ними полягає в тому, що <TH> за замовчуванням містить жирний текст і вирівняно по центру, а <TD> - містить звичайний текст і вирівняно по лівому краю.
Теги <TR>, <TD> <TH> можуть мати ті ж параметри, що й тег <TABLE>, але область дії значень цих параметрів обмежується відповідно рядком або осередком таблиці.
Ці теги поряд з горизонтальним вирівнюванням (параметр ALIGN) мають можливість вирівнювання вмісту осередків по вертикалі з допомогою параметра VALIGN:
- VALIGN - вертикальне вирівнювання елементів таблиці:
- top - вирівнювання по верхньому краю комірки;
- middle - вирівнювання по середині комірки;
- bottom - вирівнювання по нижньому краю комірки.
Для об'єднання комірок по стовпцях та рядками теги TH> <TD> можуть також мати параметри COLSPAN і ROWSPAN, які задають відповідно число об'єднаних стовпчиків або об'єднаних рядків.
прикладі № 1 показано побудова таблиці з використанням об'єднання по стовпцях та рядками.
1.3 Використання CSS для завдання параметрів таблиць
І при побудові таблиці можуть бути задіяні розширені можливості CSS. Для цих цілей підходять властивості, які задають параметри кордонів елементів Web-сторінок. Вони можуть бути використані для визначення меж таблиці. Каскадні листи стилів мають такі властивості завдання параметрів кордонів елементів:
- border color- - вказує колір кордону, може бути задано від одного до чотирьох значень:
- якщо задано одне значення - воно застосовується до всіх чотирьох кордонів;
- якщо задано два значення - перше відноситься до верхньої і нижньої кордонів, друге - до лівої і правої межі;
- якщо задано три значення - перше застосовується до верхньої межі, друге відноситься до лівої і правої кордоні, третє - до нижньої межі.
- border-style - вказує стиль кордону:
- none - кордон не видно (значення, що приймається за замовчуванням);
- solid - суцільна лінія;
- double - подвійна суцільна лінія;
- dotted - лінія у вигляді точок;
- dashed - пунктирна лінія;
- groove - тривимірна увігнута кордон;
- ridge - тривимірна опукла кордон;
- inset - тривимірна кордон "сходинка вгору";
- outset - тривимірна кордон "сходинка вниз".
- border-width - вказує товщину меж, може бути задано від одного до чотирьох значень:
- якщо задано одне значення - воно застосовується до всіх чотирьох кордонів;
- якщо задано два значення - перше відноситься до верхньої і нижньої кордонів, друге - до лівої і правої межі;
- якщо задано три значення - перше застосовується до верхньої межі, друге відноситься до лівої і правої межі, третє - до нижньої межі.
Товщина кордонів може бути задана з допомогою числового значення пікселі, а також можна використовувати при предоопределенных значення:
- thin - тонка лінія;
- medium - лінія середньої товщини (значення, що приймається за замовчуванням);
- thick - товста лінія;
- border-collapse - вказує чи будуть межі комірок таблиці і межі самої таблиці зливатися в одну (застосовується тільки для тегу <TABLE>):
- separate - розділяє кордон таблиці і межі її осередків (значення, що приймається за замовчуванням);
- collapse - об'єднує їх.
Параметри кордону, як і параметри шрифту можна вказувати в скороченій формі. Наприклад, замість завдання властивостей кордону у вигляді:
<TD STYLE="border-color:green; border-style:dotted; border-width:6">
можна використати таку форму:
<TD STYLE="border:green dotted 6">
Якщо при цьому вказані не всі властивості кордону, то інші успадковуються або приймаються за замовчуванням.
Крім завдання властивостей відразу декількох кордонів елемента CSS мають можливість завдання властивостей тільки однієї кордону:
- border-top - верхньої межі;
- border-bottom - нижньої межі;
- border-left - лівої межі;
- border-right - правої межі.
Для вказівки відразу кількох властивостей кожної з цих кордонів можна використовувати скорочену форму завдання значень, як наведено вище. Для завдання одного з властивостей кордону можна скористатися одним з наступних властивостей:
- border-top-style - завдання стилю верхньої межі;
- border-top-width - завдання ширини верхньої межі;
- border-top-color - завдання кольору верхньої межі;
- border-bottom-style - завдання стилю нижньої межі;
- border-bottom-width - завдання ширини нижньої межі;
- border-bottom-color - завдання кольору нижній кордону;
- border-left-style - завдання стилю лівої межі;
- border-left-width - завдання ширини лівої межі;
- border-left-color - завдання кольору лівої межі;
- border-right-style - завдання стилю правої межі;
- border-right-width - завдання ширини правої межі;
- border-right-color - завдання кольору правій границі.
прикладі № 1 показано використання властивостей CSS при построеним таблиці.
2 Завдання рухомих елементів на Web-сторінці
Для завдання рухомих елементів на Web-сторінці використовується тег-контейнер <MARQUEE> . . . </MARQUEE>. Рухомий елемент (в якості якого може бути використаний текст, малюнок, таблиця та інші елементи Web сторінки) розміщується всередині контейнера, тобто між тегами <MARQUEE> </MARQUEE>. Тег <MARQUEE> має наступні параметри:
- SCROLLDELAY - вказує затримку в мілісекундах;
- SCROLLAMOUNT - вказує кількість пікселів на яку переміщується елемент (швидкість його переміщення);
- BEHAVIOR - вказує характер руху:
- scroll - елемент переміщається в одну сторону (задається за замовчуванням);
- alternate - елемент переміщається по черзі то в один бік, то в іншу;
- slide - елемент переміщується до краю і зупиняється.
- DIRECTION - вказує напрямок руху елементу;
- left - справа наліво (задається за замовчуванням);
- right - зліва направо;
- up - знизу вгору;
- down - зверху вниз;
- LOOP - вказує кількість повторень, якщо 0 або infinite - нескінченно (задається за замовчуванням).
як приклад побудови таблиці на Web-сторінці наведемо наступний HTML документ:
Приклад 1
<&HTMLgt;
<HEAD>
<TITLE> Таблиці html </TITLE>
<LINK REL=STYLESHEET HREF="my.css">
<STYLE>TABLE{font: italic 6mm; color:#00A}</STYLE>
</HEAD>
<BODY>
<H1> ТАБЛИЦІ НА WEB-СТОРІНЦІ </H1>
<TABLE BORDER=2 BORDERCOLOR=RED BGCOLOR=#E0E0E0 CELLSPACING=4 CELLPADDING=3
ALIGN=center WIDTH=105%>
<CAPTION ALIGN=bottom> ТАБЛИЦЯ 1 </CAPTION>
<TR BGCOLOR=aqua>
<TH COLSPAN=3> Заголовок стовпця 1-3 <TH> Стовпчик 4
<TR>
<TD ALIGN=right> 1/1
<TD ALIGN=center STYLE="border-width:thick medium"> 1/2
<TD ROWSPAN=2 VALIGN=top>
<MARQUEE SCROLLAMOUNT=2 BEHAVIOR=slide DIRECTION=down> 1-2/3 </MARQUEE><TD> 1/4
<TR>
<TD COLSPAN=2 BGCOLOR=#E0E0FF STYLE="font-size:8mm; border:blue 10 dotted">
<MARQUEE BEHAVIOR=alternate SCROLLAMOUNT=10
LOOP=4> 2/1-2 </MARQUEE>
<TD VALIGN=bottom ALIGN=center
STYLE="font-size:2cm; border-left: #F00 dashed 16 " > 2/4
</TABLE>
</BODY>
</HTML>
