Табличні теги мови HTML

Табличні теги мови HTML дозволяють подавати дані у зручній для сприйняття формі.

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

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

Комірка, яка містить елемент даних, задається парою тегів <TD> і </TD>.

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

 

Тег

Призначення

<CAPTION> ...</CAPTION>

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

<TABLE> ...<TABLE>

визначає початок таблиці

<TR>... </TR>

визначає рядок таблиці

<TD>... </TD>

визначає елемент даних таблиці

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

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

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

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

Атрибут СОLSPAN (Column Span) дозволяє здійснювати об’єднання стовпчиків. Якщо необхідно створити яку-небудь комірку, ширшу, від верхньої чи нижньої, за допомогою атрибута СОLSPAN= її можна розтягнути над будь- якою кількістю звичайних комірок.

ПРИКЛАД:

<TR>

<TD BGCOLOR=WHITE COLSPAN=2>

Приклад застосування атрибута об’єднання комірок

</TD>

</TR>

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

- UNIТ=ЕN - це значення надається за замовчуванням і визначає

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

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

- UNIТ=РIXELS – це значення використовується, якщо необхідно точно визначити ширину стовпчика на екрані. Наприклад, тег <ТАВLЕ UNIТ=РIXELS WIDTH=340> сформує таблицю шириною 340 пікселів.

 

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

ПРИКЛАД

<TABLE BORDER CELLPADDING=20>

<TR>

<TD>Текст або дані</TD>

</TR>

ПРИКЛАД

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

<HTML>

<HEAD>

<TITLE>Моя перша HTML-сторінка</TITLE>

</HEAD>

<BODY>

<CAPTION> <H2><P ALIGN=CENTER> НАРОДНІ ЗНАННЯ</P></H2>

</CAPTION>

<TABLE BORDER=1>

<TR>

<TH>Система народних знань</TH>

<TH>Зміст</TH>

</TR>

<TR>

<TD ALIGN=CENTER><B><I>Народна астрономія</B></I></TD>

<TD ALIGN=LEFT>Астрономія як наука була відома в Україні ще у

XVII ст. і викладалась у братських школах. Самобутня астрономічна номенклатура українців засвідчує їх добру обізнаність з основними сузір’ями.

</TD>

</TR>

<TR >

<TD ALIGN=CENTER> <B> <I> Народна метеорологія </B></I>

</TD>

<TD ALIGN=LEFT> Одна з найдавніших галузей народних знань, що обіймає систему прикмет, раціональних спостережень і достовірних

передбачень про погодні зміни на близький чи віддалений час. Широко побутували прикмети, що дозволяли прогнозувати погодні зміни протягом

найближчого часу за особливостями сходу і заходу Сонця, його кольору, за виглядом нічного неба, яскравістю зірок і Місяця тощо.

</TD>

</TR>

</TABLE>

</BODY>

</HTML>

 

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