Лекція 11. ТАБЛИЦІ
Лекція 11. ТАБЛИЦІ
Табличні теги мови 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>
Відображення файлу програмою-браузером:
Розширені можливості розмітки таблиці
Зображення у таблиці
Комірки таблиці можуть містити також зображення. Наприклад, графічні маркери можна розташувати в комірках таблиці (приклад взято з Лекції 10. Графіка).
ПРИКЛАД
Файл у форматі HTML:
<HTML>
<HEAD>
<TITLE>Моя перша HTML-сторінка</TITLE>
</HEAD>
<BODY>
<H2 ALIGN=CENTER>ПОСЕЛЕННЯ, ЖИТЛО, ЗАБУДОВА </H2>
<HR SIZE=8 WIDTH=40% COLOR=RED>
<TABLE BORDER=1>
<TR>
<TD><IMG SRC=”BUT1_UP.GIF” WIDTH=60 ALT =” “></TD>
<TD><A HREF=”1.HTM”>
<FONT SIZE=5><B>Типи поселень</B></FONT></A><BR></TD>
<TD>Поселення землеробської людності України, які складалися з будівель, пристосованих для життя, різноманітних підсобних занять,
утримання свійських тварин та зберігання продуктів, сягають глибини віків.</TD></TR>
<TR>
<TD><IMG SRC=”BUT1_UP.GIF” WIDTH=60 ALT =” “></TD>
<TD><A HREF=”2.HTM”>
<FONT SIZE=5><B> Типи народного житла</B></FONT></A></TD>
<TD>В основі типології традиційного сільського житлового комплексу також лежить поділ території України на зони, проте він більш розгалужений і
детальніший.</TD></TR></TABLE>
</BODY>
</HTML>
Відображення файлу програмою-браузером:
|
Управління кольором елементів таблиці
Атрибути управління кольором :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>
<H2 ALIGN=CENTER>ІСТОРІЯ КУЛЬТУРИ</H2>
<TABLE ALIGN=LEFT>
<TR>
<TD ALIGN=CENTER>
<HR>
<B>...Той, хто не знає свого минулого,<BR> не вартий майбутнього...<BR> М.Рильський </B><HR></TD>
</TR>
</TABLE>
<BLOCKQUOTE><BLOCKQUOTE><BLOCKQUOTE>
<P ALIGN=JUSTIFY> Звертання до традицій зовсім не означає нехтування сьогоденням. Тільки осмисливши минуле, пізнавши витоки своєї
культури та історії, можна чіткіше зрозуміти сьогодення і уявити майбутнє. Традиційна етнокультурна інформація може зберігатися тільки передаючись від батьків до дітей та онуків
</BLOCKQUOTE></BLOCKQUOTE></BLOCKQUOTE>
</BODY>
</HTML>
Відображення файлу програмою-браузером:
|
