Лабораторна робота №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|BOTTOM1 який визначає розташування заголовка відносно таблиці (зверху або знизу таблиці, за замовчуванням - зверху)
Вкладені таблиці
Теги <ТВ> та <ТН> можуть містити всередині блоковий елемент. Це означає, що мова 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>