Розділ 12 ТАБЛИЦІ
Мета: навчитись представляти інформацію у HTML-документі у вигляді таблиць.
Табличні теги мови HTML дозволяють подавати дані у зручній для сприйняття формі.
Основним структурним елементом таблиці є комірка, яка містить елемент даних таблиці або заголовок стовпчика даних. Логічно пов'язані комірки групуються разом у рядок таблиці. Рядки, в свою чергу, складають таблицю.
Для створення таблиці використовують тег <TABLE> і відповідний йому закриваючий тег </TABLE>. Між ними розташовані всі теги, необхідні для створення таблиці.
Комірка, яка містить елемент даних, задається парою тегів <TD> і </TD>.
Теги для побудови таблиці
Тег
Призначення
<CAPTION> ...</CAPTION>
заголовок до таблиці
<TABLE> ...<TABLE>
визначає початок таблиці
_<TR>... </TR>
визначає рядок таблиці
!<TD>... </TD>
визначає елемент даних таблиці
Тег <TABLE> може мати атрибут рамки BORDER=n, який ство-Рює рамку шириною п пікселів. За замовчуванням таблиця не ок-Реслена рамкою. У тегу <TABLE> можна використати атрибут BORDERCOLOR для кольору рамки таблиці. Атрибут BORDERCOLOR дорівнює шістнадцятковому RGB або англійській Назві кольору.
У тегу <TD> можна використати атрибут BGCOLOR, який задає Колір фону комірки таблиці.
Оскільки таблиці будуються з рядків, між тегами <TR> і </TR> Розташовуються всі елементи, необхідні для створення рядка таблиці.
Для створення заголовків стовпчиків даних використовуються теги <ТН> і </ТН>, текст в яких автоматично виводиться жирним шрифтом з вирівнюванням по центру.
Атрибут COLSPAN (Column Span) дозволяє здійснювати об'єднання стовпчиків. Якщо необхідно створити яку-небудь комірку, ширшу, від верхньої чи нижньої, за допомогою атрибута COLSPAN= ц можна розтягнути над будь-якою кількістю звичайних комірок.
ПРИКЛАД:
<TR>
<TD BGCOLOR=WHITE COLSPAN=2>
Приклад застосування атрибута об'єднання комірок
</TD>
</TR>
Атрибут UNIT= тега <TABLE> визначає одиниці вимірювання, які використовуються при зазначенні розмірів як всієї таблиці, так і окремих стовпчиків. Атрибут UNIT= може приймати такі значення:
UNIT=EN - це значення надається за замовчуванням і визначає одиницю вимірювання, яка дорівнює еп-пробілу. En-пробіл – це друкарська одиниця вимірювання, яка дорівнює ширині літери <п>. Реальний розмір пробілу залежить від обраного шрифту. Як правило, en-пробіл дорівнює половині розміру шрифту;
UNIT=RELATTVE - використовується для визначення відносної ширини стовпчиків у процентах від загальної ширини таблиці;
UNIT=PIXELS - це значення використовується, якщо необхідно точно визначити ширину стовпчика на екрані. Наприклад, тег <TABLE UNIT=PIXELS WIDTH=340> сформує таб- 1 лицю шириною 340 пікселів.
Атрибут CELLPADDING= визначає ширину порожнього просто- ; ру між вмістом комірки і її межами, тобто задає поля всередині комірки.
ПРИКЛАД
<TABLE BORDER CELLPADDING=20>
<TR>
<TD>TeKCT або дані</ГО>
</TR>
ПРИКЛАД
файл у форматі HTML:
<HTML>
<HEAD>
<ТІТЬЕ>Моя перша НТМЬ-сторінка</ТІТЬЕ>
</HEAD>
<BODY>
<CAPTION>
<H2><P AL1GN=CENTER> НАРОДНІ ЗНАННЯ </Р></Н2>
</CAPTION>
<TABLE BORDER=1>
<TR>
<ТН>Система народних знань</ТН>
<ТН>Зміст</ТН>
</TR>
<TR>
<TD ALIGN=CENTER>
<В><І>Народнаастрономія</В></І></ГО>
<TD ALIGN=LEFT>Астрономія як наука була відома в Україні ще у XVII ст. і викладалась у братських школах. Самобутня астрономічна номенклатура українців засвідчує їхню добру обізнаність з основними сузір'ями. </TD>
</TR>
<TR>
<TD ALIGN=CENTER>
<B> <I> Народна метеорологія </В></І>
</TD>
<TD ALIGN=LEFT> Одна з найдавніших галузей народних знань, що обіймає систему прикмет, раціональних спостережень і достовірних передбачень про погодні зміни на близький чи віддалений час. Широко побутували прикмети, що дозволяли прогнозувати погодні зміни протягом найближчого часу за особливостями сходу і заходу Сонця, його кольору, за виглядом нічного неба, яскравістю зірок і Місяця тощо.
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Відображення файла програмою-броузером:
Розширені можливості розмітки таблиці
ОБ'ЄДНАННЯ РЯДКІВ ТА СТОВПЧИКІВ Використання атрибуту ROWSPAN для об'єднання рядків
ROWSPAN=n (n - ціле число, за замовчуванням п=1) визначає кількість рядків таблиці, які перекриває комірка.
ПРИКЛАД 1
Тема 1 _ о Тема З Тема 2
Тема 4 Тема 5
Фрагмент файла у форматі HTML:
<TABLE BORDER> <TR>
<TD>TeMa 1</TD>
<TD ROWSPAN=2>TeMa 2</TD>
<TD>TeMa 3</TD> </TR> <TR>
<TD>TeMa 4</TD> <ТБ>Тема 5</TD> </TR> </TABLE>
ПРИКЛАД 2
Г Тема 2 Тема 3 Тема 4
(Тема 1
Тема 5 Тема 6 Тема 7
Фрагмент файла у форматі HTML:
<TABLE BORDER> <TR>
<TD ROWSPAN=2>TeMa 1</TD>
<ТБ>Тема 2</TD> <TD>Tem 3</TD> <ТБ>Тема 4</ТD> </TR> <TR>
<TD>TeMa 5</TD> <TD>TeMa 6</TD> <TD>TeMa 7</TD> </TR> </TABLE>
Використання атрибуту COLSPAN для об'єднання стовпчиків
COLSPAN=n (n - ціле число, за замовчуванням п=1) визначає кількість стовпчиків таблиці, які перекриває комірка.
ПРИКЛАД і
РГемаї Тема 2
Тема 3 Тема 4 Тема 5 \
Фрагмент файла у форматі HTML:
<TABLE BORDER> <TR>
<ТБ>Тема 1</TD> <TD COLSPAN=2>TeMa 2</TD> </TR> <TR>
<TD>TeMa 3</TD> <TD>TeMa 4</TD> <ТБ>Тема 5<ДБ> </TR> </TABLE>
ПРИКЛАД 2
Тема 1 Тема 2 Тема З
Тема 4 Тема 5
Тема 6 Тема 7
Фрагмент файла у форматі HTML:
<TABLE BORDER> <TR>
<TD>TeMa K/TD><TD>TeMa 2</D><TD>TeMa 3</TD> </TR>
<TR>
<TD>Te\ia 4</TD>
<TD C0LSPAN-2>TeMa 5</TD> </TR> <TR>
<TD C0LSPAN=2>TeMa 6</TD> <TD>TeMa 7</TD> </TR> </TABLE>
Одночасне використання ROWSPAN ma COLSPAN
ПРИКЛАД
Фрагмент файла у форматі HTML:
<TABLE BORDER> <TR>
<TD ALIGN=center ROWSPAN=2 COLSPAN=2>A</TD> <TD>K/TD>
<TD>2</TD> </TR> <TR>
<TD>3</TD>
<TD>4</TD> </TR> <TR>
<TD ALIGN=center ROWSPAN=2 C0LSPAN=2>C</TD> <TD ALIGN=center R0WSPAN=2 COLSPAN=2>D</TD> </TR> <TR>
</TR>
</TABLE>
Створення в таблицях заголовків для стовпчиків Для розмітки заголовків у таблицях слід використовувати тег <ТН>. При використанні цього тегу заголовок буде виділено жирним шрифтом та відцентровано в межах комірки.
ПРИКЛАД
(Заголовок 1 {Заголовок 2 {Заголовок З
[Шин ІДва |Три
[Чотири [П'ять (Шість
Фрагмент файла у форматі HTML:
<TABLE BORDER> <TR>
<ТН>Заголовок1</ТН> <ТН>Заголовок 2</ТН>
<ТН>Заголовок 3</ТН> </TR> <TR>
<ТО>Один</ТО> <ТО>Два</ТО> <TD>Tpn</TD> </TR> <TR>
<TD>4orapH</TD> <ТО>П'ять</ТО> <TD>micrb</TD>
</TR> </TABLE>
ОДНОЧАСНЕ ВИКОРИСТАННЯ ЗАГОЛОВКІВ ДЛЯ СТОВПЧИКІВ ТА ОБ'ЄДНАННЯ СТОВПЧИКІВ
ПРИКЛАД
Заголовок 1 Заголовок 2
Один Два Три Чотири і П'ять Шість |Сім Вісім
Фрагмент файла у форматі HTML:
<TABLE BORDER> <TR>
<TH COLSPAN=2> ЗаголовокК/ТН> <TH COLSPAN=2> Заголовок2</ТН> </TR> <TR>
<TD>Ohhh</TD> <ТВ>Два</ТБ> <TD>TpH</TD> <TD>4othPh</TD> </TR> <TR>
<TD>n'm-b</TD> <TD>micTb</TD> <TD>CiM</TD> <TD>BidM</TD>
</TR> </TABLE>
Багаточисельні заголовки стовпчиків та об'єднання стовпчиків ПРИКЛАД
фрагмент файла у форматі HTML:
STABLE BORDER> <TR>
<TH COLSPAN=2>3anMOBOKl</TH> <ТН СОЬ8РАК=2>Заголовок2</ТН> </TR> <TR>
<ТН> Заг 3</ТН> <ТН> Заг 4</ТН> <ТН> Заг 5</ТН> <ТН> Заг 6</ТН> </TR> <TR>
<ТБ>Один</ГО> <ТБ>Два</ТО> <TD>TpH<^D> <TD>4othph</TD> </TR> <TR>
<TD>n'HTb</TD> <TD>micTb</TD> <TD>Om</TD> <TD>BiciM</TD>
</TR> </TABLE>
Бокові заголовки ПРИКЛАД
Фрагмент файла у форматі HTML:
<TABLE BORDER>
<TR><TH>Зaгoлoвoк 1</ТН>
<TD>Texia 1</TD> <TD>Te\ia 2</TD> <ТБ>Тема З </TDx/TR>
<TR><TH>Зaгoлoвoк2</TH>
<TD>Te\fa 4</TD> <TD>TeMa 5</TD> <ТБ>Тема 6 </TDx/TR>
<TR><TH>ЗaгoлoвoкЗ</TH>
<TD>Te.\ia 7</TD> <TD>TeMa 8</TD> <ТБ>Тема 9 </TD></TR> </TABLE>
Бокові заголовки та об'єднання рядків (ROWSPAN) ПРИКЛАД
Фрагмент файла у форматі HTML:
<TABLEBORDER>
<TR><TH ROWSPAN=2>3aiwiOBOKl</TH>
<TD>Te\ia 1</TD> <TD>TeMa 4</TD> <TD>Te\ia 7</TD> 1 <TD>Te\ia 10</TD> </TR>
<TR><TD>TeMa 2</TD> <ТБ>Тема 5</TD> <TD>TeMa 8 </TD> <TD>TeMa 11</TD> </TR> <TR><TH>Зaгoлoвoк2</TH>
<ТБ>Тема 3</TD> <TD>Te\m 6</TD> <TD>Tewa 9</TD> <TD>TeMa 12</TD>
</TR> </TABLE>
Використання різних заголовків та об'єднання рядків та стовпчиків ПРИКЛАД
Фрагмент файла у форматі HTML:
<TABLE BORDER>
<TR> <TD> </TD><TH ftOWSPAN-2> fC/TH>
<TH COLSPAN=2>Cepe4Hi</TH>
</TR>
<TR> <TD> </TD><a4H>3pin</rfI><TH>Baia</ll i>
</TR>
<TR> <TH ROWSPAN=2> Стагь</ТН>
<ТН>Чоловіки</ГНхТО> t .9</ГО><ТТ»0.003</Т D>
</TR>
<TR> <ТН>Жінки<ТО>1.7</TD><TD>0.002</Tt)>
</TR> <ЯАВЬЕ> <TABLEBORDER>
ВИРІВНЮВАННЯ, ВІДСТУПИ, РАМКИ Таблиця без рамки
ПРИКЛАД
Тема 1 „ _ Тема З
Тема 2Тема 4 ГІ ема 5
Фрагмент файла у форматі HTML:
<TABLE>
<TR> <TD>TeMa 1</TD> <TD ROWSPAN=2>TeMa 2</TO> <TD>TeMa3</TD>
</TR>
<TR> <TD>Te\ia 4</TD> <TD>Te\m 5</TD>
</TR> </TABLE>
Таблиця з рамкою
Ширина рамки регулюється в тегу <TABLE> за допомогою атрибуту BORDER=n (n - ціле число, дорівнює ширині рамки в піксе-їях).
Фрагмент файла у форматі HTML:
<TABLE BORDER=10>
<TR> <ТБ>Тема 1</TD> <TD> Тема 2</TD> </TR>
<TR> <TD>TeMa 3</TD> <ТБ>Тема 4</TD> </TR> </TABLE>
Відстань між комірками таблиці та відстань між вмістом комірки і її рамкою
Проміжок між вмістом комірки та рамкою навкруги комірки регулюється в тегу <TABLE> за допомогою атрибуту CELLPADDING=n (n - ціле число пікселів).
ПРИКЛАД 1
Фрагмент файла у форматі HTML:
<TABLE BORDER CELLPADDING=10 CELLSPACING=O> <TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE>
Для зміни відстані між комірками таблиці слід в тезі <TABLE> використовувати атрибут CELLSPACING=n (n - ціле число, дорівнює кількості пікселів між комірками таблиці).
ПРИКЛАД 2
Фрагмент файла у форматі HTML:
<TABLE BORDER CELLPADDING=O CELLSPACINGS 0> <TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE>
ПРИКЛАД З
Фрагмент файла у форматі HTML:
<TABLE BORDER CELLPADDING=10 CELLSPACING» 10> <TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR> <TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR> </TABLE>
ПРИКЛАД 4
Фрагмент файла у форматі HTML:
<TABLE BORDER=5 CELLPADDING=10 CELLSPACING=10> <TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE>
Розташування інформації в комірках таблиці у декілька рядків ПРИКЛАД
Січень Лютий Березень
Це перша Друга Інша комірка,
комірка комірка третя
- - - - ... - -.. ; .. . ¦
Четверта комірка епеРце Шоста комірка
п ята комірка ^ :
Фрагмент файла у форматі HTML:
<TABLE BORDER> <TR>
<ТН>Січень</ТН> <ТН>Лютий</ТН> <ТН>Березень</ТН> </TR>
<TR>
<TD>IJ,e перша KOMipKa</TD> <ТБ>Друга комірка</ТО> <ТБ>Інша комірка,<Ьг> третя</ТБ>
</TR>
<TR>
<ТО>Четверта KOMipKa</TD> <TD>Tenep це<Ьг>п'ята комірка</ГО> <TD>IUocTa комірка</ТО>
</TR> </TABLE>
Горизонтальне вирівнювання інформації
Вирівнювання інформації в комірках таблиці визначається за допомогою атрибуту ALIGN=LEFT|RIGHT|CENTER, який може приймати значення LEFT (ліворуч), CENTER (по центру), RIGHT (праворуч). Атрибут горизонтального розташування інформації в комірці ALIGN може застосовуватись до окремих комірок, до всього рядка або до всієї таблиці. Залежно від того, де використано цей атрибут (в <TABLE>, <TR> або <TD>) відповідно буде проведено вирівнювання інформації у всій таблиці, у рядку або у окремій комірці.
ПРИКЛАД
Фрагмент файла у форматі HTML:
<TABLE BORDER> <TR>
<ТН>Січень</ТН> <ТН>Лютий</ТН>
<ТН> Березень</ТН> </TR>
<TR ALIGN=center>
<TD>Becb рядок <ВИ>розташовано по <BR>4eHTpy</TD> <ТО>Друга комірка</ТО> <TD>lHina комірка,<Ьг>третя</ТО> </TR> <TR>
<TD ALIGN=right>Po3TamoBaHO <BR>npaBOpV4</TD> <TD ALIGN=center>Po3TamoBaHO по центру</ГО> <TD> За замовчуванням,<Ьг> розташовано ліворуч</ТО> </TR> </TABLE>
Вертикальне вирівнювання інформації
Вертикальне вирівнювання інформації в комірках таблиці визначається за допомогою атрибуту VALIGN=TOP|BOTTOM|MIDDLE, який може приймати значення ТОР (догори), BOTTOM (донизу), MIDDLE (по середині). Атрибут вертикального розташування інформації в комірці VALIGN може застосовуватись до окремих комірок, до всього рядка або до всієї таблиці. Залежно від того, де використано цей атрибут (в <TABLE>, <TR> або <TD>) відповідно буде проведено вирівнювання інформації у всій таблиці, у рядку або в окремій комірці.
ПРИКЛАД
Січень
Лютий
Березень
Всі комірки рядка
Друга
Третя комірка
розташовані
комірка
зверху
Розташовано
зверху
За замовчуванням,
розташовано по
Розташовано
центру
знизу
Фрагмент файла у форматі HTML:
<TABLEBORDER> <TR>
<ТН>Січень</ТН> <ТН>Лютий</ТН> <ТН>Березень</ТН> </TR> <TR VALIGN-top>
<ТО>Усі комірки рядка <br> розташовані зверху <br><br><br></TD>
<ТО>Друга<Ьг>комірка</ТО> <ТО>Третя комірка</ГО> </TR> <TR>
<TD VALIGN=top> Розташовано 3Bepxy</TD> <TD VALIGN=bottom>Po3TamoBaHO<br> знизу</ТО>
<TD>3a замовчуванням, <br> розташовано по центру <br><br><br></TD>
</TR> </TABLE>
Заголовок таблиці
Для визначення заголовка таблиці призначається тег <CAPTION>, який слід розташовувати посередині контейнеру <TABLE>...</TABLE>.
Тег <CAPTION> може містити атрибут ALIGN=TOP|BOTTOM, який визначає розташування заголовка відносно таблиці (зверху або знизу таблиці, за замовчуванням - зверху)
ПРИКЛАД
Заголовок зверху
! ! \
Лютий
Березень
;Перша
Друга
!Інша комірка,
їкомірка
комірка
[третя
Фрагмент файла у форматі HTML:
<TABLE BORDER>
<CAPTION ALIGN=top> Заголовок 3Bepxy</CAPTION> <TR>
<ТН>Січень</ТН> <ТН>Лютий</ТН> <ТН>Березень</ТН> </TR> <TR>
<TD>Ilepnia KOMipKa</TD> <ТО>Друга KOMipKa</TD> <TD>lHiua комірка,<Ьг> третя</ГО> </TR> </TABLE>
ПРИКЛАД
Вкладені таблиці
Теги <TD> та <ТН> можуть містити всередині блоковий елемент. Це означає, що мова HTML дозволяє розмічати вкладені
таблиці, тобто припустимою є конструкція <TD> <TABLE>
</TABLE> </TD>-
ПРИКЛАД
Таблиця ABCD знаходиться всередині таблиці 123456
Фрагмент файла у форматі HTML:
<TABLE BORDER>
<CAPTION ALIGN=bottom> Заголовок знизу</САРТІО№> <TR>
<ТН>Січень</ТН>
<ТН>Лютий</ТН>
<ТН>Березень</ТН> </TR> <TR>
<TD>Ilepma комірка</ТВ>
<TD> Друга комірка</ТО>
<TD> Інша комірка,<Ьг> iperH</TD> </TR> </TABLE>
Фрагмент файла у форматі HTML:
<TABLE BORDER>
<TR> <!- Рядок 1, Таблиця 1 -> <TD>K/TD> <TD>2</TD> <TD>3 <TABLE BORDER>
<TR> <!- Рядок І, Таблиця 2 -> <TD>A</TD> <TD>B</TD> </TR>
<TR> <!- Рядок 2, Таблиця 2 -> <TD>C</TD> <TD>D</TD> </TR> </TABLE> </TD> </TR>
<TR> <!- Рядок 2, Таблиця 1 -> <TD>4</TD> <TD>5</TD>
<TD>6</TD> </TR> </TABLE>
Визначення ширини таблиці
Визначення ширини таблиці або окремих її стовпчиків здійснюється за допомогою атрибуту WIDTH=n (n - число або проценти). Атрибут WIDTH може застосовуватись до окремих стовпчиків (визначається в <TD>) або до всієї таблиці (визначається в <TABLE>). Якщо атрибут WIDTH використано в <TABLE>, то він визначає ширину всієї таблиці у вікні броузера (якщо значення визначено у пікселях, то ширина таблиці не залежить від розмірів вікна броузера, якщо значення визначено у відсотках, то таблиця буде займати саме цю частину вікна броузера). Атрибут WIDTH тега <TD> використовується броузером, якщо він не конфліктує з вимогами до ширини сусідніх комірок цього ж стовпчика.
ПРИКЛАД 1
(Таблиця займає 50% ширини екрану, кожний стовпник - 50% ширини таблиці)
ПРИКЛАД 2
(Таблиця займає 50% ширини екрана, ширина стовпчиків не визначається)
Ширина таблиці - 50% ширини екрана 2З І
Фрагмент файла у форматі HTML:
<TABLE BORDER WIDTH=«50%»>
<TR><TD> Ширина таблиці - 50% ширини екрана</ТО> <TD>2</TD>
</TR>
<TR><TD>3</TD><TD>4</TD>
</TR> </TABLE>
ПРИКЛАД З
(Таблиця займає 100% ширини екрана, ширина стовпчиків не визначається)
Фрагмент файла у форматі HTML:
<TABLE BORDER WIDTH=«50%»>
<TR><TD WIDTH=«50%»>UlHpnHa стовпчика - 50% ширини таблиці</ТО>
<TD WIDTH=«50%»>IllHpHHa стовпчика - 50% ширини таблиці</ТО> </TR>
<TR><TD>3</TD><TD>4</TD> </TR> </TABLE>
Фрагмент файла у форматі HTML:
<TABLE BORDER WIDTH=«100%>»
<TR><TD>UInpnHa стовпчика залежить від обсягу інформації в комірках CTOBn4iiKa</TD><TD>Другий стовпчик таблиці </TD>
</TR> <TR><TD>3</TD><TD>4</TD>
</TR> </TABLE>
Ширина таблиці та вкладені таблиці ПРИКЛАД
Фрагмент файла у форматі HTML:
<TABLE BORDER WIDTH=«50%>»
<TR><TD>TeMa K/TD><TD>TeMa 2</TD>
</TR>
<TR><TD>
<TABLE BORDER WIDTH=100%>
<TR><TD>TeMa A</TD><TD>TeMa B</TD> </TR> </TABLE> </TD>
<TD>TeMa 4</TD> </TR> </TABLE>
Центрування таолиці на сторінці
Для центрування таблиці у вікні броузера використовується тег <CENTER>, який необхідно відкрити до початку розмітки таблиці тегом <TABLE> і закрити після </TABLE>
ПРИКЛАД
Фрагмент файла у форматі HTML:
<CENTER>
<TABLE BORDER WIDTH=«50%>» <TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR> </TABLE> </CENTER>
Висота таблиці та її рядків
Атрибут HEIGHT використовується для визначення висоти таблиці (якщо він є атрибутом тегу <TABLE>) або для визначення висоти рядка відносно висоти таблиці (якщо він є атрибутом тегу <TR>).
ПРИКЛАД
Фрагмент файла у форматі HTML:
<TABLE BORDER WIDTH=«80%» HEIGHT=«80%»>
<TR><TH НЕГСНТ=50%>Розділи довідника</ТО>
<TH WIDTH=«75%»>Ha3Ba розділу</ТО> </TR>
<TR><TD>Poздiл 1.</ТО><ТО>ТРАДИЦІЙНЕ ЖИТ-ЛО</ТБ>
</TR>
<TR><TD>Poздiл 2.</ГО><ТО>НАРОДШ ЗНАННЯ </TD>
</TR>
<TR><TD>Poздiл 3.</TD><TD>yKPAIHCbKA КУХ-НЯ</ТБ>
</TR>
<TR><TD>Poздiл 4.</ТО><ТО>НАРОДНІ ВІРУВАН-НЯ</ГО>
</TR> </TABLE>
Наведений фрагмент розмічає таблицю, яка займає 80% ширини та 80% висоти вікна броузера. Перший її рядок займає 50% висоти таблиці, всі інші рядки розподіляють інші 50% висоти таблиці у Рівних долях. Ширина другого стовпчика таблиці - 75% ширини таблиці.
Відображення файла програмою-броузером:
<FONT SIZE=5><B>Tnnii поселень</В></РОКТ></А> <BRX/TD>
<ТО>Поселення землеробської людності України, які складалися з будівель, пристосованих для життя, різноманітних підсобних занять, утримання свійських тварин та зберігання продуктів, сягають глибини BiKiB.</TD></TR>
<TR>
<TD><IMGSRC=«BUT1_UP.GIF» WIDTH-60 ALT=« »x/TD>
<TD><A HREF=«2.HTM»>
<FONT SIZE=5><B> Типи народного житла</В></РОМТ></А> </TD>
<TD>B основі типології традиційного сільського житлового комплексу також лежить поділ території України на зони, проте він більш розгалужений і детальніший.</TD></TR></TABLE>
</BODY>
</HTML>
Відображення файла програмою-броузером:
Зображення у таблиці
Комірки таблиці можуть містити зображення. Наприклад, графічні маркери можна розташувати в комірках таблиці (приклад взято з Розділу 10. Графіка).
ПРИКЛАД
Файл у форматі HTML:
<HTML> <HEAD>
<ТІТЬЕ>Моя перша НТМЬ-сторінка</ТІТЬЕ> </HEAD> <BODY>
<Н2 ALIGN-CENTER>IIOCEnEHHH, ЖИТЛО, ЗАБУДОВА </Н2>
<HR SIZE=8 WIDTH=40% COLOR=RED>
<TABLEBORDER=1>
<TR>
<TD><IMGSRC=«BUT1_UP.GIF» WIDTH=60 ALT =« »></TO^
<TD><A HREF=«1.HTM>»
Управління кольором елементів таблиці
Атрибути управління кольором: BORDERCOLOR - колір рам-*и і BGCOLOR - колір фону, використовуються для тегів: ^TABLE>, <TR>, <TH>, <TD>. Відповідно областю їх дії може бути Вся таблиця, рядок або окрема комірка.
Наприклад:
<TABLE BORDER BORDERCOLOR=RED BGCOLOR= YELLOW>...</TABLE> - колір всієї таблиці.
<TR BORDERCOLOR=RED BGCOLOR=YELLOW></TR> -
колір рядка.
<TD BORDERCOLOR=RED BGCOLOR=YELLOW></TD> -
колір комірки.
За допомогою таблиць можна створювати виділені цитати. Цитата вміщується в таблицю між двома горизонтальними лініями. Завдяки атрибуту ALIGN тега <TABLE> текст, який слідує за таблицею, починає її «обтікати». Основний текст розташовується праворуч від таблиці і «обтікає» цитату після того, як перевищить її по висоті. Для виступів тексту від меж сторінки можна застосувати тег <BLOCKQUOTE> (навіть декілька разів). Атрибут BORDER в даному випадку використовувати не слід.
ПРИКЛАД
Файл у форматі HTML:
<HTML>
<BODY>
<Н2 ALIGN=CENTER>ICTOPm КУЛЬТУРИ</Н2>
<TABLE ALIGN=LEFT>
<TR>
<TD ALIGN=CENTER>
<HR>
<В>...Той, хто не знає свого минулого,<BR> не вартий майбутнього...<ВІІ> М.Рильський </B><HR></TD>
</TR>
</TABLE>
<BLOCKQUOTE><BLOCKQUOTE><BLOCKQUOTE>
<P ALIGN=JUSTIFY> Звертання до традицій зовсім не означає нехтування сьогоденням. Тільки осмисливши минуле, пізнавши витоки своєї культури та історії, можна чіткіше зрозуміти сьогодення і уявити майбутнє. Традиційна етнокультурна інформація може зберігатися тільки передаючись від батьків до дітей та онуків
</BLOCKQUOTE></BLOCKQUOTE></BLOCKQUOTE>
</BODY>
</HTML>
Відображення файла програмою-броузером:
