Лабораторна робота Таблична структура HTML-документу

Лабораторна робота - Таблична структура HTML-документу

Лабораторна робота

Тема: Таблична структура HTML-документу..

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

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

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

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

Комірка, яка містить елемент даних, задається парою тегів <TD> і </TD>.

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

Тег | Призначення

<CAPTION>…</CAPTION> | Заголовок до таблиці

<TABLE>…</TABLE> | Визначає початок таблиці

<TR>…</TR> | Визначає рядок таблиці

<TD>…</TD> | Визначає елемент даних таблиці

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

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

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

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

Атрибут COLSPAN (Column Span) дозволяє здійснити об’єднання стовпчиків. Якщо необхідно створити яку-небудь комірку, ширшу, від верхньої чи нижньої, за допомогою атрибута COLSPAN= її можна розтягнути над будь-якою кількістю звичайних комірок.

Приклад:

<TR>

Приклад застосування атрибута об’єднання комірок

</TD>

</TR>

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

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

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

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

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

Приклад

<TR>

<TD>Текст або дані</TD>

</TR>

Приклад

<HTML> <head> <TITLE>мОЯ ПЕРША HTML-СТОРІНКА</TITLE> </HEAD>

<BODY>

<h2><P ALIGN=CENTER> НАРОДНІ ЗНАННЯ </P></H2>

</CAPTION>

<TR>

<TH>Система народних знань</TH>

<TH>Зміст</TH>

</TR>

<TR>

<B><I>Народна астрономія</B></I></TD>

<TD ALIGN=LEFT> Астрономія як наука була відома в Україні ще у XVII ст.. і викладалась у братських школах. Самобутня астрономічна номенклатура українців засвідчує їхню добру обізнаність з основними сузір’ями. </TD>

</TR>

<TR>

<B><I>Народна метеорологія </B></I>

</TD>

<TD ALIGN=LEFT> Одна з найдавніших галузей народних знань, що обіймає систему прикмет, раціональних спостережень і достовірних передбачень про погодні зміни на близький чи віддалений час. Широко побутували прикмети, що дозволяли прогнозувати погодні зміни протягом найближчого часу за особливостями сходу і заходу сонця, його кольору, за виглядом нічного неба, яскравістю зірок тощо.

</TD> </TR> </TABLE> </BODY> </HTML>

Хід роботи:

Занести у звіт результати виконання прикладу.

Створити таблицю з двох стовпчиків і трьох рядків. Вертикальне розташування вмісту комірки повинне бути по центру, а горизонтальне – вирівнювання ліворуч.

Створити таблицю з двох стовпчиків і трьох рядків. У комірки першого стовпчика вмістити зображення, так підібравши їх розмір, щоб вся таблиця вміщувалась на один екран. У комірках другого стовпчика розмістити текст, задавши його вертикальне і горизонтальне розташування по центру.

Створити таблицю з двох стовпчиків і трьох рядків. У кожній з комірок встановити власний колір тексту і фону. Фон сторінки за замовчуванням.

Створити таблицю з двох стовпчиків і чотирьох рядків. Встановити колір в рядках таким чином, щоб його відтінок ставав більш темним від першого рядка до останнього (за основу взяти зелений, сірий, жовтий колір).

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

документі у вигляді таблиць.