69695

ТАБЛИЦІ

Лекция

Информатика, кибернетика и программирование

Мета: навчитись представляти інформацію у HTML-документі у вигляді таблиць. Табличні теги мови HTML дозволяють подавати дані у зручній для сприйняття формі. Основним структурним елементом таблиці є комірка, яка містить елемент даних таблиці або заголовок стовпчика даних.

Украинкский

2014-10-08

462.5 KB

0 чел.

Тема 15: Розділ 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>&nbsp</TD><TH ftOWSPAN-2>&nbspfC/TH>

<TH COLSPAN=2>Cepe4Hi</TH>

</TR>

<TR>    <TD>&nbsp</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>

Відображення файла програмою-броузером:


 

А также другие работы, которые могут Вас заинтересовать

62955. Злочини і покарання. Вбивство. Герундій 38.38 KB
  The old English rule extended this concept to include not only intentional or deliberate killings but also accidental killings in the course of some other serious crime (such as robbery or rape).
62956. Типи злочинів. Інші види злочинів 164.24 KB
  The European Court of Human Rights was established by the European Convention (домовленість, угода) for the Protection (захист) of Human Rights and Fundamental Freedoms and was set up in Strasbourg in 1959.
62957. Види покарання 52.17 KB
  here are several kinds of punishment available to the courts. In civil cases, the most common punishment is a fine, but specific performance and injunctions may also be ordered.