Методи оформлення документу за допомогою тадлиць Опис основнх тегів таблиць які використовують
СОДЕРЖАНИЕ: Лабораторна робота №9 Тема: ТАБЛИЦІ Мета: Навчитись представляти інформацію у HTML-документі у вигляді таблиць. Теоретичні відомості. Табличні теги мови HTML дозволяють подавати дані у зручній для сприйняття формі. Основним структурним елементом таблиці є комірка, яка містить елемент даних таблиці або заголовок стовпчика даних.Лабораторна робота №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=2Teм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
TDTpи/TD ТDЧотири/ТD
/TR TR
ТDПять/TD TDШість/TD TDСім/TD /TR
ТDВісім/ТD
/ТR
/TABLE
Таблиця з рамкою
Ширина рамки регулюється в тегу TABLE за допомогою атрибуту BORDER=n (n - ціле число, дорівнює ширині рамки в пікселях).
TABLE BORBER=5 CELLPADDING=H 0
CELLSPACING=10 TR
TDA/TD TDB/TD TDC/TD /TR TR
TDD/TD TDE/TD TDF/TD
/TR
/TABLE
Розташування інформації в комірках таблиці у декілька рядків
ПРИКЛАД
| Січень |
Лютий |
Березень |
| Це перша комірка |
Друга комірка |
Інша комірка, третя |
| Четверта комірка |
Тепер це пята комірка |
Шоста комірка |
Фрагмент файла у форматі HTML:
TABLE BORDER TR
ТНСічвнь/TН
ТНЛютий/TН
ТН Березень/TН
/TR
TR
ТDЦе перша комірка/TD
TD Друга комірка/TD
ТDІнша комірка,BR третя/TD
/TR
TR
ТDЧетверта комірка/TD
TDTeпep цеBRпята комірка /TD
ТDШоста комірка/TD
TR
/TABLE
Горизонтальне вирівнювання інформації
Вирівнювання інформації в комірках таблиці визначається за допомогою атрибуту
ALIGN=LEFT|RIGHT|CENTER, який може приймати значення LEFT (ліворуч), CENTER (по центру), RIGHT (праворуч). Атрибут горизонтального розташування інформації в комірці ALIGN може застосовуватись до окремих комірок, до всього рядка або до всієї таблиці. Залежно від того, діє використано цей атрибут (в TABLE, TR або TD) відповідно буде проведено вирівнювання інформації у всій таблиці, у рядку або у окремій комірці. Вертикальне вирівнювання інформації Вертикальне вирівнювання інформації в комірках таблиці визначається за допомогою атрибуту VALIGN*TOP|BOTTOM|MIDDLE, який може приймати значення ТОР (догори), BOTTOM (донизу), MIDDLE (посередині). Атрибут вертикального розташування інформації в комірці VALIGN може застосовуватись до окремих комірок, до всього рядка або до всієї таблиці. Залежно від того, де використано цей атрибут (в TABLE, TR або TD) відповідно буде проведено вирівнювання інформації у всій таблиці, у рядку або в окремій комірці.
Заголовок таблиці
Для визначення заголовка таблиці призначається тег CAPTION, який слід розташовувати посередині контейнеру TABLE.../TABLE.
Тег CAPTION може містити атрибут ALIGN=TOP|BOTTOM1 який визначає розташування заголовка відносно таблиці (зверху або знизу таблиці, за замовчуванням - зверху)
Вкладені таблиці
Теги ТВ та ТН можуть містити всередині блоковий елемент. Це означає, що мова HTML дозволяє розмічати вкладені таблиці, тобто припустимою є конструкція TD TABLE....../TABLE/TD/
Визначення ширини таблиці
Визначення ширини таблиці або окремих її стовпчиків здійснюється за допомогою атрибуту WIDTH=n (n - число aбо проценти). Атрибут WIDTH може застосовуватись до окремих стовпчиків (визначається в TD) або до всієї таблиці (визначається в TABLE). Якщо атрибут WIDTH використано в TABLE, то він визначає ширину всієї таблиці у вікні броузера (якщо значення визначено - у пікселях, то ширина таблиці не залежить від розмірів вікна броузера, якщо значення визначено у відсотках, то таблиця буде займати саме цю частину вікна броузера), Атрибут WIDTH тега TD використовується броузером, якщо він не конфліктує з вимогами до ширини сусідніх комірок цього ж стовпчика..
ПРИКЛАД 1
(Таблиця займає 50% ширини екрану, кожний стовпчик - 50% ширини таблиці)
Фрагмент файла у форматі HTML:
TABLE BORDER WIDTH=«50%»
TRTD WIDTH =«50%»Ширина стовпчика -50% ширини таблиці/TD
TD WIDTH=«50%» Ширина стовпчика - 50%ширини таблиці/TD /TR
TRTD3/TDTD4/TD
/TR /TABLE
Центрування таблиці на сторінці
Для центрування таблиці у вікні броузера використовується тег CENTER, який необхідно відкрити до початку розмітки таблиці тегом TABLE і закрити після /TABLE
Висота таблиці та її рядків
Атрибут HEIGHT використовується для визначення висоти таблиці (якщо він є атрибутом тегу TABLE) або Для визначення висоти рядка відносно висоти таблиці якщо він є атрибутом тегу
Управління кольором елементів таблиці
Атрибути управління кольором: 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
Н2 ALIGN=CENTERICTOPIH КУЛЬТУРИ/Н2
TABLE ALIGN=LEFT
TD ALIGN=CENTER
HR
В...Той, хто не знає свого минулого, BR не вартий майбутнього... BR М.Рильський /BHR/TD
/TR
ATABLE
BLOCKQUOTEBLOCKQUOTEBLOCKQUOTE
P ALIGN=JUSTIFY Звертання до традицій зовсім не означає і нехтування сьогоденням. Тільки осмисливши минуле, пізнавши витоки своєї культури та історії, можна чіткіше зрозуміти сьогодення і уявити майбутнє. Традиційна етнокультурна інформація може зберігатися тільки передаючись від батьків до дітей та онуків
/BLOCKQUOTE/BLOCKQUOTE/BLOCKQUOTE
/BODY
/HTML