Використання таблиць в 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> також допускають використання в них зазначених атрибутів. Таким чином, ви можете змінити колір всієї таблиці, окремої клітинки або рядка таблиці.
Значення квітів, встановлені на рівні осередку, будуть перекривати
значення, встановлені на рівні рядки, які у свою чергу, будуть
перекривати значення, задані на рівні всієї таблиці.
Інформацію взято з сайту http://www.ctc.msiu.ru/.