Методи оформлення документу за допомогою тадлиць Опис основнх тегів таблиць які використовують

Лабораторна робота №9

Тема: ТАБЛИЦІ

Мета: Навчитись представляти інформацію у HTML-документі у вигляді таблиць.

Теоретичні відомості.

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

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

Тег	Призначення
<САРТЮМ> ...</CAPTION>	заголовок до таблиці
<TABLE> ...<TABLE>	визначає початок таблиці
<TR>... <RR>	визначає рядок таблиці
<TD>... </TD>	визначає елемент даних таблиці

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

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

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

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

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

Атрибут COLSPAN (Column Span) дозволяє здійснювати об'єднання стовпчиків. Якщо необхідно створити яку-небудь комірку, ширшу, від верхньої чи нижньої, за допомогою атрибута COLSPAN= її можна розтягнути над будь-якою кількістю звичайних комірок. ПРИКЛАД: <TR>

<TD BGCOLOR=WHITE COLSPAN=2> Приклад застосування атрибута об'єднання комірок </TD> </TR>

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

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

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

ширини таблиці;

- UNIT=PIXELS - це значення використовується, якщо необхідно точно визначити ширину стовпчика на екрані. Наприклад, тег <TABLE UNIT=PIXELS WIDTH=340> сформує таблицю шириною 340 пікселів.

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

Розширені можливості розмітки таблиці

ОБ'ЄДНАННЯ РЯДКІВ ТА СТОВПЧИКІВ Використання атрибуту ROWSPAN для об'єднання рядків

ROWSPAN-n (n - ціле число, за замовчуванням n=1) визначає кількість рядків таблиці, які перекриває комірка.

ПРИКЛАД 1

Тема 1	Тема 2	ТемаЗ
Тема 4		Тема 5

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

<TABLE BORDER> <TR>

<ТD>Тема 1</TD> <TD ROWSPAN=2>Teмa 2</TD>

<ТD>Тема 3</TD>

</TR> <TR>

<ТD>Тема 4</TD><ТD>Тема 5</TD> </TR>

</TABLE>

Використання атрибуту COLSPAN для об'єднання стовпчиків

COLSPAN=n (n - ціле число, за замовчуванням n=1) визначає кількість стовпчиків таблиці, які перекриває комірка.

ОДНОЧАСНЕ ВИКОРИСТАННЯ ЗАГОЛОВКІВ ДЛЯ СТОВПЧИКІВ ТА ОБ'ЄДНАННЯ СТОВПЧИКІВ ПРИКЛАД

Заголовок 1		Заголовок 2
Один	Два	Три	Чотири •
П'ять	Шість	Сім	Вісім

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

<TABLE BORDER> <TR>

<TH COLSPAN=2> Заголовок1</ТН>

<TH COLSPAN=2> Заголовок2</ТН>

</TR>

<TR>

<ТD>Один</ТD><ТD>Два</ТD>

<TD>Tpи</TD> <ТD>Чотири</ТD>

</TR> <TR>

<ТD>П'ять</TD> <TD>Шість</TD> <TD>Сім</TD> </

Внимание, отключите Adblock

Вы посетили наш сайт со включенным блокировщиком рекламы!
Ссылка для скачивания станет доступной сразу после отключения Adblock!

Скачать