Лабораторна робота №9

Тема: ТАБЛИЦІ

Мета: Навчитись представляти інформацію у HTML-документі у вигляді таблиць.

Теоретичні відомості.

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

Теги для побудови таблиці

Тег	Призначення
<САРТЮМ> ...</CAPTION>	заголовок до таблиці
<TABLE> ...<TABLE>	визначає початок таблиці
<TR>... <RR>	визначає рядок таблиці
<TD>... </TD>	визначає елемент даних таблиці

Для створення таблиці використовують тег <TABLE> і відповідний йому закриваючий тег </TABLE>. Між ними розташовані всі теги, необхідні для створення таблиці. Комірка, яка містить елемент даних, задається парою тегів <TD> і </ТВ>.

Тег <TABLE> може мати атрибут рамки BORDER=n, який створює рамку шириною n пікселів. За замовчуванням таблиця не окреслена рамкою. У тегу <TABLE> можна використати атрибут BORDERCOLOR для кольору рамки таблиці. Атрибут BORDERCOLOR дорівнює шістнадцятковому RGB або англійській назві кольору.

у тегу <TD> можна використати атрибут BGCOLOR, який задає колір фону комірки таблиці.

Оскільки таблиці будуються з рядків, між тегами <TR> і </TR> (розташовуються всі елементи, необхідні для створення рядка таблиці.

Для створення заголовків стовпчиків даних використовуються теги <ТН> і </TH>, текст в яких автоматично виводиться жирним шрифтом з вирівнюванням по центру.

Атрибут COLSPAN (Column Span) дозволяє здійснювати об'єднання стовпчиків. Якщо необхідно створити яку-небудь комірку, ширшу, від верхньої чи нижньої, за допомогою атрибута COLSPAN= її можна розтягнути над будь-якою кількістю звичайних комірок. ПРИКЛАД: <TR>

<TD BGCOLOR=WHITE COLSPAN=2> Приклад застосування атрибута об'єднання комірок </TD> </TR>

Атрибут UNIT= тега <TABLE> визначає одиниці вимірювання, які використовуються при зазначенні розмірів як всієї таблиці, так і окремих стовпчиків. Атрибут UNIT= може приймати такі значення:

- UNIT=EN - це значення надається за замовчуванням і визначає одиницю вимірювання, яка дорівнює еn-пробілу. En-пробіл - це друкарська одиниця вимірювання, яка дорівнює ширині літери <n>. Реальний розмір пробілу залежить від обраного шрифту. Як правило, еп-пробіл дорівнює половині розміру шрифту;

- UNIT=RELATIVE - використовується для визначення відносної ширини стовпчиків у процентах від загальної

ширини таблиці;

- UNIT=PIXELS - це значення використовується, якщо необхідно точно визначити ширину стовпчика на екрані. Наприклад, тег <TABLE UNIT=PIXELS WIDTH=340> сформує таблицю шириною 340 пікселів.

Атрибут CELLPADDING= визначає ширину порожнього простору мок вмістом комірки і її межами, тобто задає поля всередині комірки.

Розширені можливості розмітки таблиці

ОБ'ЄДНАННЯ РЯДКІВ ТА СТОВПЧИКІВ Використання атрибуту ROWSPAN для об'єднання рядків

ROWSPAN-n (n - ціле число, за замовчуванням n=1) визначає кількість рядків таблиці, які перекриває комірка.

ПРИКЛАД 1

Тема 1	Тема 2	ТемаЗ
Тема 4		Тема 5

Фрагмент файла у форматі HTML:

<TABLE BORDER> <TR>

<ТD>Тема 1</TD> <TD ROWSPAN=2>Teмa 2</TD>

<ТD>Тема 3</TD>

</TR> <TR>

<ТD>Тема 4</TD><ТD>Тема 5</TD> </TR>

</TABLE>

Використання атрибуту COLSPAN для об'єднання стовпчиків

COLSPAN=n (n - ціле число, за замовчуванням n=1) визначає кількість стовпчиків таблиці, які перекриває комірка.

ОДНОЧАСНЕ ВИКОРИСТАННЯ ЗАГОЛОВКІВ ДЛЯ СТОВПЧИКІВ ТА ОБ'ЄДНАННЯ СТОВПЧИКІВ ПРИКЛАД

Заголовок 1		Заголовок 2
Один	Два	Три	Чотири •
П'ять	Шість	Сім	Вісім

Фрагмент файла у форматі HTML:

<TABLE BORDER> <TR>

<TH COLSPAN=2> Заголовок1</ТН>

<TH COLSPAN=2> Заголовок2</ТН>

</TR>

<TR>

<ТD>Один</ТD><ТD>Два</ТD>

<TD>Tpи</TD> <ТD>Чотири</ТD>

</TR> <TR>

<ТD>П'ять</TD> <TD>Шість</TD> <TD>Сім</TD> </TR>

<ТD>Вісім</ТD>

</ТR>

</TABLE>

Таблиця з рамкою

Ширина рамки регулюється в тегу <TABLE> за допомогою атрибуту BORDER=n (n - ціле число, дорівнює ширині рамки в пікселях).

<TABLE BORBER=5 CELLPADDING=H 0

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>

<ТН>Січвнь</TН>

<ТН>Лютий</TН>

<ТН> Березень</TН>

</TR>

<TR>

<ТD>Це перша комірка</TD>

<TD> Друга комірка</TD>

<ТD>Інша комірка,<BR> третя</TD>

</TR>

<TR>

<ТD>Четверта комірка</TD>

<TD>Teпep це<BR>п'ята комірка </TD>

<ТD>Шоста комірка</TD>

<TR>

</TABLE>

Горизонтальне вирівнювання інформації

Вирівнювання інформації в комірках таблиці визначається за допомогою атрибуту

ALIGN=LEFT|RIGHT|CENTER, який може приймати значення LEFT (ліворуч), CENTER (по центру), RIGHT (праворуч). Атрибут горизонтального розташування інформації в комірці ALIGN може застосовуватись до окремих комірок, до всього рядка або до всієї таблиці. Залежно від того, діє використано цей атрибут (в <TABLE>, <TR> або <TD>) відповідно буде проведено вирівнювання інформації у всій таблиці, у рядку або у окремій комірці. Вертикальне вирівнювання інформації Вертикальне вирівнювання інформації в комірках таблиці визначається за допомогою атрибуту VALIGN*TOP|BOTTOM|MIDDLE, який може приймати значення ТОР (догори), BOTTOM (донизу), MIDDLE (посередині). Атрибут вертикального розташування інформації в комірці VALIGN може застосовуватись до окремих комірок, до всього рядка або до всієї таблиці. Залежно від того, де використано цей атрибут (в <TABLE>, <TR> або <TD>) відповідно буде проведено вирівнювання інформації у всій таблиці, у рядку або в окремій комірці.

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

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

Тег <CAPTION> може містити атрибут ALIGN=TOP|BOTTOM₁ який визначає розташування заголовка відносно таблиці (зверху або знизу таблиці, за замовчуванням - зверху)

Вкладені таблиці

Теги <ТВ> та <ТН> можуть містити всередині блоковий елемент. Це означає, що мова HTML дозволяє розмічати вкладені таблиці, тобто припустимою є конструкція <TD> <TABLE>......</TABLE></TD>/

Визначення ширини таблиці

Визначення ширини таблиці або окремих її стовпчиків здійснюється за допомогою атрибуту WIDTH=n (n - число aбо проценти). Атрибут WIDTH може застосовуватись до окремих стовпчиків (визначається в <TD>) або до всієї таблиці (визначається в <TABLE>). Якщо атрибут WIDTH використано в <TABLE>, то він визначає ширину всієї таблиці у вікні броузера (якщо значення визначено - у пікселях, то ширина таблиці не залежить від розмірів вікна броузера, якщо значення визначено у відсотках, то таблиця буде займати саме цю частину вікна броузера), Атрибут WIDTH тега <TD> використовується броузером, якщо він не конфліктує з вимогами до ширини сусідніх комірок цього ж стовпчика..

ПРИКЛАД 1

(Таблиця займає 50% ширини екрану, кожний стовпчик - 50% ширини таблиці)

Фрагмент файла у форматі HTML:

<TABLE BORDER WIDTH=«50%»>

<TR><TD WIDTH =«50%»>Ширина стовпчика -50% ширини таблиці</TD>

<TD WIDTH=«50%»> Ширина стовпчика - 50%ширини таблиці</TD> </TR>

<TR><TD>3</TD><TD>4</TD>

</TR> </TABLE>

Центрування таблиці на сторінці

Для центрування таблиці у вікні броузера використовується тег <CENTER>, який необхідно відкрити до початку розмітки таблиці тегом <TABLE> і закрити після </TABLE>

Висота таблиці та її рядків

Атрибут HEIGHT використовується для визначення висоти таблиці (якщо він є атрибутом тегу <TABLE>) або Для визначення висоти рядка відносно висоти таблиці якщо він є атрибутом тегу

Управління кольором елементів таблиці

Атрибути управління кольором: 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>ICTOPIH КУЛЬТУРИ</Н2>

<TABLE ALIGN=LEFT>

<TD ALIGN=CENTER>

<HR>

<В>...Той, хто не знає свого минулого, <BR> не вартий майбутнього... <BR> М.Рильський </B><HR></TD>

</TR>

<ATABLE>

<BLOCKQUOTE><BLOCKQUOTE><BLOCKQUOTE>

<P ALIGN=JUSTIFY> Звертання до традицій зовсім не означає і нехтування сьогоденням. Тільки осмисливши минуле, пізнавши витоки своєї культури та історії, можна чіткіше зрозуміти сьогодення і уявити майбутнє. Традиційна етнокультурна інформація може зберігатися тільки передаючись від батьків до дітей та онуків

</BLOCKQUOTE></BLOCKQUOTE></BLOCKQUOTE>

</BODY>

</HTML>