Сообщение об ошибке

Deprecated function: The each() function is deprecated. This message will be suppressed on further calls в функции menu_set_active_trail() (строка 2405 в файле /home/kpaco123/e-helper/includes/menu.inc).

Лекція 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>

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