Лабораторна робота № 4
ТЕМА: Створення документів із таблицями.
Мета: Закріпити на практиці знання і навички по створенню таблиць. Вивчити основні засоби опису таблиць, їхнє застосування і використання в HTML-документах.
Теоретичні відомості
Основним тегом-контейнером таблиці є тег <TABLE>, який вимагає обов'язкової присутності закриваючого тега </TABLE>.
Будь-яка таблиця складається з ряду тег-контейнерів <TR>..,</TR> (Table Row), які містять певну кількість комірок – тегів-контейнерів <TD>...</TD> (Table Data).
<ТD> призначений для вказівки даних у таблиці
<ТН> (Table Header) призначений для розміщення заголовків у комірці
Відмінність між цими двома тегами полягає у візуальному представленні даних усередині таблиці: за замовчуванням текст, розміщений в тезі <ТН>, відображається жирним шрифтом з типом вирівнювання по центру, а текст тега <ТD> – звичайним зображенням з вирівнюванням по лівому краю.
Таблиці можна присвоїти заголовок за допомогою тега-контейнера <CAPTION>, який вказується відразу ж після тега <TABLE>
Приклад найпростішої таблиці
<HTML>
<HEAD>
<TITLE>Приклад найпростішої таблиці</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFAA" TEXT="black" >
<TABLE BORDER>
<CAPTION>Приклад найпростішої таблиці</CAPTION>
<TR>
<TH> Комірка із заголовком</TH>
<TD> Комірка із звичайним текстсм</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Параметри тега <TABLE>
Параметр |
Функція |
BORDER |
Створення рамки навколо таблиці |
BORDERCOLOR |
Визначення кольору рамки навколо таблиці |
CELLSPACING |
Вказання відстані між сусідніми комірками |
CELLPADDING |
Створення відступу від границі комірки до її вмісту |
ALIGN |
Вказання типу вирівнювання таблиці по ширині вікна браузера |
WIDTH |
Визначення ширини таблиці |
HEIGHT |
Визначення висоти таблиці |
BORDER – дозволяє задавати рамку, що показує внутрішню структуру таблиці, яка складається з певної кількості рядів і комірок. Відсутність даного параметра означає, що рамка не буде відображатися браузером. Необхідність у такому варіанті може виникнути, наприклад, при складанні великих списків або при створенні таблиці як основи HTML-документа.
Значенням параметра BORDER може бути будь-яке ціле число, указуване в пікселах:
<TABLE BORDER="2">
<TR>
<ТD> Комірка 1</TD>
<ТD> Комірка 2</TD>
</TR>
</TABLE>
За відсутності встановленого значення параметр BORDER приймає вигляд BORDER="1".
BORDERCOLOR – призначений для встановлення кольору рамки навколо таблиці (підтримується тільки Internet Explorer). Значення указується в шістнадцятковому форматі (наприклад, #ffccoo) або у вигляді найменування (наприклад, green).
CELLSPACING – задає відстань між сусідніми комірками таблиці по вертикалі та горизонталі. Значення параметра указується в пікселах і не може бути пропущене. При конструкції CELLSPACING="0" комірки таблиці зіллються, оскільки параметр встановлює нульове значення відстані між сусідніми комірками.
<TABLE BORDER="2" CELLSPACING="2">
<TR>
<ТD> Комірка 1</TD>
<ТD> Комірка 2</TD>
</TR>
</TABLE>
Відстань між сусідніми комірками (як по вертикалі, так і по горизонталі) завжди буде однакова, оскільки HTML не дозволяє призначати різні значення в межах даного параметра.
CELLPADDING – використовується для створення і регулювання відступу між рамкою комірки і її змістом (по вертикалі і горизонталі) Форма вказівки значення аналогічна параметру CELLSPACING і також не може бути пропущена.
<TABLE BORDER="2" CELLSPACING="2" CELLPADDING="7">
<TR>
<ТD> Комірка 1</TD>
<ТD> Комірка 2</TD>
</TR>
</TABLE>
При значенні параметра CELLPADDING, рівному нулю, вміст комірки буде впритул притиснутий до рамки таблиці, що погіршить сприйняття інформації (це твердження ще більш актуальне для таблиць з прозорою рамкою, тобто значенням BORDER=”0”, в цьому випадку текст сусідніх комірок зіллється один з одним).
Відступ між рамкою комірки і її вмістом (як по вертикалі, так і по горизонталі) завжди буде однакового розміру (як і у випадку з параметром CELLSPACING), оскільки HTML не дозволяє призначати різні значення в межах даного параметра.
ALIGN –встановлює тип вирівнювання всієї таблиці щодо ширини HTML-документа. Існує три можливі значення параметра ALIGN:
ALIGN=”left” – вирівнювання таблиці по лівому краю документа. Значення прийнято за умовчанням і у разі відсутності параметра ALIGN таблиці буде привласнено саме це значення;
ALIGN=''right' – вирівнювання таблиці по правій межі документа;
ALiGN=''center” – центрування таблиці щодо ширини документа.
Приклад вирівнювання таблиці по центру
<HTML>
<HEAD>
<TITLE>Приклад вирівнювання таблиці по центру</TITLE>
</HEAD>
<BODY BGCOLOR=”#DDDDDD” TEXT=”black” LEFTMARGIN=”40” RIGHTMARGIN=”40”>
<TABLE ALIGN=”center” BORDER=”2” CELLSPACING=”2” CELLPADDING=”7”>
<TR>
<TH>Склад персонального комп’ютера</TH>
<TD>
<FONT FACE=”Tahoma”>У склад персонального комп’ютера входять такі компоненти:</FONT>
<UL TYPE=”disc”>
<LI>Системний блок
<LI>Монітор
<LI>Клавіатура
<LI>Мишка
</UL>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Крім функції вирівнювання таблиці по горизонталі документа, параметр ALIGN дозволяє одержувати ефект "обтікання" таблиці текстом. Для отримання такого ефекту потрібно вибрати тип вирівнювання таблиці (в даному випадку, окрім центрування), призначити ширину таблиці менше 100% або зафіксувати її. Текст, який повинен огинати таблицю, розміщується відразу ж після закриваючого тега </TABLE>.
WIDTH і HEIGHT – відповідають відповідно за ширину і висоту таблиці. Значення цих параметрів може бути вказано у відсотках чи пікселях:
<TABLE WIDTH=50% HEIGHT=50%>
У разі вказання ширини або висоти в пікселях таблиця буде мати фіксовані розміри. Така таблиця при зміні розмірів вікна браузера залишиться незмінною. При використанні як одиниці вимірювання відсотків ширина (висота) таблиці буде змінюватись залежно від розмірів вікна броузера. В цьому випадку розмір елементів таблиці буде зменшуватись (збільшуватись) пропорційно вказаному значенню у відсотках. Вміст таблиці буде переміщатися у вікні браузера відповідно до зміни його розмірів. Наприклад, при зменшенні вікна броузера текст, розташований в комірці, може бути перенесений на інший рядок, розтягнутий або, навпаки, стиснутий.
Параметри тегів <TR> <TD> і <TН>
Параметр |
Функція |
Застосування |
ALIGN |
Вирівнювання вмісту комірки чи ряду по горизонталі |
<TR>,<TD>,<TH> |
VALIGN |
Вирівнювання вмісту комірки чи ряду по вертикалі |
<TR>,<TD>,<TH> |
WIDTH |
Визначення ширини комірки чи ряду |
<TR>,<TD>,<TH> |
HEIGHT |
Визначення висоти комірки чи ряду |
<TR>,<TD>,<TH> |
BGCOLOR |
Вказання кольору для фону комірки чи ряду |
<TR>,<TD>,<TH> |
BACKGROUND |
Вказання малюнка для фону комірки |
<TD>,<TH> |
NOWRAP |
Заборона примусового переносу стрічки в комірці чи ряді |
<TR>,<TD>,<TH> |
COLSPAN |
Об’єднання сусідніх комірок по горизонталі |
<TD>,<TH> |
ROWSPAN |
Об’днання сусідніх комірок по вертикалі |
<TD>,<TH> |
ALIGN – призначений для вказання типу вирівнювання вмісту комірок. Якщо у разі використання цього параметра в тезі <TABLE> вся таблиця вирівнюється певним чином, то в такому випадку призначається тип вирівнювання для конкретної комірки або ряду таблиці. Якщо необхідно, щоб кожна комірка містила різні типи вирівнювання доведеться вказувати відповідне значення параметра ALIGN в кожному тезі <ТD> або <ТН>. Якщо вимагається задати один тип вирівнювання для всього ряду (включаючого всі комірки), значення параметра ALIGN прописується в тезі <TR>.
Можливі значення параметра ALIGN:
ALiGN=”left";
ALIGN="right";
ALIGN="center".
При цьому ДЛЯ <TD> значенням по замовчуванню вважається вирівнювання по лівому краю комірці, для <ТН> — вирівнювання по центру.
VALIGN також визначає тип вирівнювання вмісту елементів таблиці, але по вертикалі. Він може приймати такі значення:
VALIGN=”middie” – вирівнювання по середині комірки (значення за замовчуванням);
VALIGN=''top” – вирівнювання по верхньому краю комірки;
VALIGN="hottorn" – вирівнювання по нижній межі комірки;
VALIGN=''baseline” – вирівнювання по базовій лінії (прив'язка тексту одного рядка до єдиного рівня).
Приклад різних типів вирівнювання елементів таблиці
<HTML>
<HEAD>
<TITLE>Pізні типи вирівнювання комірок таблиці</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="black" LEFTMARGIN="40" RIGHTMARGIN="40" MARGINWIDTH="40">
<TABLE ALIGN="center" BORDER="2" CELLSPACING="0" CELLPADDING="5" WIDTH="100%" HEIGHT="200">
<TR ALIGN="center">
<TD VALIGN="bottom">комірка 1</TD>
<TD> комірка 2</TD>
<TD VALIGN="top"> комірка 3</TD>
</TR>
<TR>
<TD ALIGN="right"> комірка 4</TD>
<TD ALIGN="center"> комірка 5</TD>
<TD>комірка 6</TD>
</TR>
</TABLE>
<BODY>
</HTML>
BGCOLOR і BACKGROUND – використовуються для роботи з фоном комірок або цілих рядів таблиці. BGCOLOR дозволяє задати певний колір комірок, a BACKGROUND – вказати шлях до графічного зображення, яке буде служити фоном
WIDTH і HEIGHT – це параметри ширини і висоти або окремих комірок, або цілих рядів таблиці. Правила запису аналогічні цим же параметрам тега <TABLE>.
NOWRAP – забороняє примусове перенесення рядка в комірці або табличному ряді. Не рекомендується використовувати даний параметр у всіх комірках, оскільки це може сильно знизити рівень масштабованості таблиці (за умови, що значення ширини і (чи) висоти таблиці вказано у відсотках).
COLSPAN показує, на скільки комірок по горизонталі слід розширити <ТD> або <ТН>, в якому вказаний даний параметр.
ROWSPAN робить те ж саме, але збільшує область <TD> чи <TH> по вертикалі.
Приклад об'єднання комірок за допомогою COLSPAN І ROWSPAN
<HTML>
<HEAD>
<TITLE>Приклад об'єднання комірок за допомогою COLSPAN І ROWSPAN</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="black" LEFTMARGIN="40" RIGHTMARGIN="40" MARGINWIDTH="40">
<TABLE ALIGN="center" BORDER="2" CELLSPACING="0" CELLPADDING="5" WIDTH="100%" HEIGHT="200">
<TR ALIGN="center" BGCOLOR="CECECE">
<TH COLSPAN="2">комірка 1</TH>
</TR>
<TR>
<TD ALIGN="center" ROWSPAN="3"> комірка 2</TD>
<TD ALIGN="center"> комірка 3</TD>
</TR>
<TR>
<TD ALIGN="center"> комірка 4</TD>
</TR>
<TR>
<TD ALIGN="center"> комірка 5</TD>
</TR>
</TABLE>
</BODY>
</HTML>
При використанні параметрів COLSPAN і ROWSPAN особливу увагу слід приділяти коректному об'єднанню сусідніх елементів таблиці, а також своєчасному вказанні закриваючих тегів комірок і рядів. Виникнення помилки може привести до порушення структури таблиці, "заповзанню" одних комірок на інші, перекриттю тексту і навіть неможливості відобразити таблицю броузером.
Хід роботи
Продовжити створення особистого сайту. Створіть HTML-документ, що містить таблицю з текстовою інформацією (tadbl.html). Наприклад, запишіть у вигляді таблиці ваш розклад або календар запланованих свят або подій на поточний навчальний рік.
Використовуйте різне розфарбування комірок таблиці.
Зв'яжіть сторінку зі змістом вашого сайту, використовуючи гіперпосилання.
Продовження створення особистого сайту. Створити новий HTML-документ, що містить таблицю (foto.html).
В таблиці помістити свої фотографії.
Кожну комірку із фотографією оформити як гіперпосилання на фотографію більшого розміру.
Доповнити великі зображення фотографій відповідним текстом.
Дописати відповідні гіперпосилання на інших сторінках сайту.
Вимоги
Зазначити заголовок таблиці.
Таблиця обов'язково повинна містити комріки різної ширини.
Обов'язково зазначити колір фона таблиці або окремих комірок, її горизонтальне вирівнювання і ширину рамки.
Таблиця повинна містити в одній з комірок вкладену таблицю.
Таблиця повинна містити не менше 4-х фотографій.
Для кожної комірки необхідно задати її ширину і висоту.
Біля кожної фотографії помістити текстову інформацію.
Зазначити колір фона для кожної комріки.
Звіт
Повинен містити вихідний текст HTML-коду.
Контрольні питання
Які теги введені для розміщення таблиць?
Опишіть функції тега <TABLE>.
Опишіть функції тегов <TR>, <TH>, <TD> і їхні основні атрибути.
Як написати заголовок таблиці?
Якою уявою можна написати вкладену таблицю?
За допомогою яких атрибутів здійснюється горизонтальне і вертикальне вирівнювання в осередках?
Як задається цвіт фона і рамки таблиці?
У чому різниця між елементами ТН і TD?
Який тег використовується для зображення графічної інформації?
Як помістити фотографію в комірку таблиці?
Як задати ширину і висоту комірки?
Як зробити невидимими краї таблиці?
Який тег використовується для гіпертекстових посилань в HTML?
Опишіть засіб створення в комірці гіперпосилання?
У який тег вкладається тег <IMG> , для того, щоб малюнок, який в ньому знаходиться, був посиланням?
Опишіть інші застосування таблиць у HTML-документах.