Реферат: Методи оформлення документу за допомогою тадлиць Опис основнх тегів таблиць які використовують
Название: Методи оформлення документу за допомогою тадлиць Опис основнх тегів таблиць які використовують Раздел: Рефераты по астрономии Тип: реферат | ||||||||||||||||||||||||||||||||||||
Лабораторна робота №9 Тема: ТАБЛИЦІ Мета: Навчитись представляти інформацію у HTML-документі у вигляді таблиць. Теоретичні відомості. Табличні теги мови HTML дозволяють подавати дані у зручній для сприйняття формі. Основним структурним елементом таблиці є комірка, яка містить елемент даних таблиці або заголовок стовпчика даних. Логічно пов'язані комірки групуються разом у рядок таблиці. Рядки, в свою чергу, складають таблицю. Теги для побудови таблиці
Для створення таблиці використовують тег <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
Фрагмент файла у форматі 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) визначає кількість стовпчиків таблиці, які перекриває комірка. ОДНОЧАСНЕ ВИКОРИСТАННЯ ЗАГОЛОВКІВ ДЛЯ СТОВПЧИКІВ ТА ОБ'ЄДНАННЯ СТОВПЧИКІВ ПРИКЛАД
Фрагмент файла у форматі 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> </TR> <ТD>Вісім</ТD> </ТR> </TABLE> Таблиця з рамкою Ширина рамки регулюється в тегу <TABLE> за допомогою атрибуту BORDER=n (n - ціле число, дорівнює ширині рамки в пікселях). <TABLE BORBER=5 CELLPADDING=H 0 CELLSPACING=10> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE> Розташування інформації в комірках таблиці у декілька рядків ПРИКЛАД
Фрагмент файла у форматі HTML: <TABLE BORDER> <TR> <ТН>Січвнь</TН> <ТН>Лютий</TН> <ТН> Березень</TН> </TR> <TR> <ТD>Це перша комірка</TD> <TD> Друга комірка</TD> <ТD>Інша комірка,<BR> третя</TD> </TR> <TR> <ТD>Четверта комірка</TD> <TD>Teп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%»> <TR><TD WIDTH =«50%»>Ширина стовпчика -50% ширини таблиці</TD> <TD WIDTH=«50%»> Ширина стовпчика - 50%ширини таблиці</TD> </TR> <TR><TD>3</TD><TD>4</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=CENTER>ICTOPIH КУЛЬТУРИ</Н2> <TABLE ALIGN=LEFT> <TD ALIGN=CENTER> <HR> <В>...Той, хто не знає свого минулого, <BR> не вартий майбутнього... <BR> М.Рильський </B><HR></TD> </TR> <ATABLE> <BLOCKQUOTE><BLOCKQUOTE><BLOCKQUOTE> <P ALIGN=JUSTIFY> Звертання до традицій зовсім не означає і нехтування сьогоденням. Тільки осмисливши минуле, пізнавши витоки своєї культури та історії, можна чіткіше зрозуміти сьогодення і уявити майбутнє. Традиційна етнокультурна інформація може зберігатися тільки передаючись від батьків до дітей та онуків </BLOCKQUOTE></BLOCKQUOTE></BLOCKQUOTE> </BODY> </HTML> |