Лабораторна робота 2: Частина 1: Робота із таблицями Теорія: використання таблиць в html
Теги HTML для створення таблиць спочатку призначалися для подання рядків і стовпців табульованого даних. Проте дизайнери навчилися з їх допомогою керувати розміткою Web-сторінок: створювати стовпці тексту, задавати інтервали між елементами і змінювати зовнішній вигляд тексту способами, недоступними іншим тегам форматування HTML.
Таблиці в мові HTML завжди мають прямокутний вигляд і складаються з рядків, які в свою чергу, складаються з комірок. Всі мовні конструкції, що описують компоненти створюваної таблиці, укладаються між тегами <TABLE> і </TABLE>.
Заповнення таблиці відбувається порядково; для позначення рядка використовується пара тегів <TR>... </TR>. Рядок складається з комірок, для завдання яких використовують або теги <TH>... </TH>, якщо ці осередки містять заголовки стовпців, або теги <TD>... </TD>. Заголовки виводяться напівжирним шрифтом і розташовуються по центру осередки. Дані мають звичайний шрифт і вирівнюються по лівій стороні клітинки. Для завдання заголовка всієї таблиці використовуються теги <CAPTION> і </CAPTION>.
Приклад
<TABLE>
<CAPTION>Заголовок таблиці</CAPTION>
<TR><TH>Заголовок 1</TH><TH>Заголовок 2</TH></TR>
<TR><TD>Комірка 1</TD><TD>Комірка 2</TD></TR>
<TR><TD>Комірка 3</TD><TD>Комірка 4</TD></TR>
</TABLE>
Наявність в осередках даних не обов'язково. Створити порожню клітинку можна двома способами: нічим не заповнювати її контейнер ( <TD> </TD>), або помістити в неї символ нерозривного пробілу, що задається спеціальної послідовністю символів - (тобто створити комірку виду <TD> </TD>).
Немає потреби окремо створювати порожні клітинки, якщо планується, що всі залишилися в рядку клітинки не будуть заповнені. Так як тег <TR> сигналізує про початок нового рядка, порожні клітинки будуть додані браузером автоматично. Основні атрибути тега <TABLE>
Призначення основних атрибутів тега <TABLE> і значення, які вони можуть брати перераховані в таблиці.
Атрибут |
Призначення |
BORDER=n |
Визначає ширину рамки таблиці (У пікселях), наприклад, BORDER=1; значення, рівне нулю, означає відсутність рамки |
WIDTH=n |
Визначає ширину всієї таблиці у пікселях, або у відсотках від ширини вікна браузера |
HEIGHT=n |
Визначає висоту всієї таблиці у пікселях, або у відсотках від висоти вікна браузера |
ALIGN |
Задає горизонтальне вирівнювання таблиці у вікні браузера; має значення left, center і right (За замовчуванням - left) |
CELLPADDING=n |
Додає вільний простір між даними всередині комірки і її межами, первісне значення дорівнює 2 |
CELLSPACING=n |
Додає вільний простір між осередками всередині всієї таблиці, первісне значення дорівнює 2 |
HSPACE=n |
Задає області вільного простору вказаної ширини (у пікселях) ліворуч і праворуч від таблиці |
VSPACE=n |
Задає області вільного простору заданої висоти (у пікселях) зверху і знизу від таблиці |
BGCOLOR=колір |
Встановлює колір фону всієї таблиці |
BACKGROUND=URL |
Вказує фонове зображення для таблиці, де URL - адреса джерела (назва файлу із зображенням) |
Приклад
Змінимо вміст документа, створеного в попередньому прикладі, додавши атрибути BORDER і ALIGN в тег <TABLE>:
<TABLE BORDER=1 ALIGN=center>
Тепер комірки таблиці будуть обрамлені рамкою, a таблиця вирівняна по центру вікна браузера.
Вирівнювання даних у клітинках
За допомогою атрибутів ALIGN і VALIGN можна по-різному розміщувати дані щодо меж осередку. Ці атрибути використовуються спільно з тегами <CAPTION>, <TR>, <TH> і<TD> у самих різних комбінаціях. Нижче наведені значення атрибутів для перерахованих елементів.
Тег |
Призначення атрибуту |
<TR> |
Атрибут ALIGN може приймати значення left, center і right (за замовчуванням - left для даних і center для заголовків); він визначає горизонтальне вирівнювання даних у комірках і діє на весь рядок, якщо не скасовується тим же атрибутом в окремій клітинці Атрибут VALIGN може мати значення top, bottom, middle і baseline (за замовчуванням - middle); він регулює положення даних щодо верхньої і нижньої кордонів осередку і впливає на весь рядок, якщо не скасовується таким же атрибутом в окремої клітинки. baseline застосовується до всіх елементів рядка і вирівнює їх по базовій лінії |
<TH> |
Атрибут ALIGN може приймати значення left, center і right (за замовчуванням - center) Атрибут VALIGN може мати значення top, bottom і middle (за замовчуванням - middle) |
<TD> |
Атрибут ALIGN може приймати значення left, center і right (за замовчуванням - left) Атрибут VALIGN може мати значення top, bottom і middle (за замовчуванням - middle) |
<CAPTION> |
Атрибут ALIGN може мати значення top і bottom (За замовчуванням - top); розміщує заголовок таблиці зверху або знизу |
Об'єднання клітинок
Суміжні осередки таблиці можуть об'єднуватися. Наприклад, в таблиці з декількох стовпців всі комірки першого рядка можна об'єднати і помістити в цьому рядку гарний заголовок таблиці. Можливо також об'єднання декількох рядків або створення порожній прямокутної області.
Для з'єднання двох суміжних клітинок в одному стовпці потрібно використовувати атрибут ROWSPAN тега <TH> або <TD>, наприклад,
<TD ROWSPAN=2>
Для об'єднання двох суміжних клітинок в одному рядку потрібно використовувати атрибут COLSPAN тих же тегів, наприклад,
<TD COLSPAN=2>
Приклад
У наступній таблиці використовується об'єднання стовпців і рядків.
<HTML>
<BODY>
<TABLE BORDER=1 ALIGN=center>
<TR><TH COLSPAN=3>Заголовок на 3 стовпця</TH></TR>
<TR>
<TH>Заголовок на 1 рядок</TH>
<TD>Комірка 1</TD>
<TD>Комірка 2</TD>
</TR>
<TR>
<TH ROWSPAN=3>Заголовок на 3 рядки</TH>
<TD>Комірка 3</TD>
<TD>Комірка 4</TD>
</TR>
<TR><TD>Комірка 5</TD><TD>Комірка 6</TD></TR>
<TR><TD>Комірка 7</TD><TD>Комірка 8</TD></TR>
</TABLE>
</BODY>
</HTML>
Таблиця буде мати наступний вигляд.
Якщо ви хочете створити таблицю з об'єднаннями стовпців і в той же час точно контролювати ширину кожного стовпця, необхідно задати ширину по хоча б однієї клітинки в кожному стовпці. Для повної впевненості знайдіть час і задайте ширину кожного осередку в таблиці. Коли об'єднання стовпців перетинаються, дуже легко отримати непередбачуваний результат.
Колір в таблицях
У HTML не передбачено спеціальних засобів розфарбовування таблиць. Проте як Netscape Navigator, так і Microsoft Internet Explorer мають розширення, що дозволяють змінювати колір клітинок і рамок. Ви можете змінити колір фону комірки за допомогою атрибуту BGCOLOR перед розміщенням в ній тексту або зображення, а також використовувати атрибут BORDERCOLOR для зміни кольору рамки комірки. Теги <TABLE>, <TD>, <TH> і <TR> також допускають використання в них зазначених атрибутів. Таким чином, ви можете змінити колір всієї таблиці, окремої клітинки або рядка таблиці.
Значення квітів, встановлені на рівні осередку, будуть перекривати значення, встановлені на рівні рядки, які у свою чергу, будуть перекривати значення, задані на рівні всієї таблиці.