Самостійне вивчення №1
Тема: Структурування веб-сторінки за допомогою таблиць.
Мета: створювати таблиці в HTML-документі.
Опорні знання
Створення таблиць у мові HTML
Таблиці призначені не лише для розміщення даних в заданій формі - в мові HTML, а також використовуються для розмітки Веб-сторінок.
Таблиці в HTML формуються нетрадиційним способом - порядково. Спочатку за допомогою елемента TR необхідно створити ряд таблиці, в який потім елементом TD вміщуються комірки. В HTML таблиці використовуються не тільки для відображення таблиць як таких, а й для дизайну. За допомогою таблиць можна створити невидимий «каркас» сторінки, що допомагає розташувати текст і зображення так, як вам подобається.
Таблиця задається з допомогою контейнера <TABLE>...</TABLE>. Його атрибути:
WIDTH - визначає ширину таблиці (у відсотках 100 % - весь екран, у пікселях);
HEIGHT - задає висоту таблиці (у відсотках 100 % - весь екран, у пікселях);
ALIGN - задає спосіб вирівнювання таблиці на сторінці (можливі значення: left, right, center);
BGCOLOR - задає фоновий колір таблиці;
BORDER - створює рамку, ширина якої задається у пікселях (border= " 2 ");
BORDERCOLOR — назначає колір для рамки.
Структура таблиці задається іншими тегами. Рядки таблиці формуються з допомогою контейнера <TR>...</TR>, а комірки - контейнера <TD>...</TD>. Атрибути тегів <TR> і <TD>:
WIDTH - визначає ширину комірки (у відсотках 100 % — весь екран, у пікселях);
HEIGHT — задає висоту комірки чи рядка (у відсотках 100 % - весь екран, у пікселях);
ALIGN - задає спосіб вирівнювання вмісту комірки (можливі значення: left, right, center);
VALIGN - задає вирівнювання вмісту комірки по вертикалі (допустимі значення: top (вгорі), middle (посередині), bottom (внизу));
BGCOLOR - задає фоновий колір рядка чи комірки;
COLSPAN - задає об'єднання комірок по горизонталі (тобто в одному рядку) значення атрибуту рівне числу комірок, які потрібно об'єднати;
ROWSPAN - задає об'єднання комірок по вертикалі тобто в одному стовпчику рядках, значення атрибуту рівне числу комірок, які потрібно об'єднати.
CAPTION - Задає заголовок таблиці. Зміст заголовка повинен складатися тільки з тексту. Використання блокових елементів в цьому випадку неприпустиме.
Атрибути:
ALIGN - визначає спосіб вертикального вирівнювання заголовка таблиці.
Можливі значення:
top - вміщує заголовок над таблицею (значення за замовчуванням);
bottom - вміщує заголовок під таблицею.
Практичні завдання
Завдання 1
Запустіть програму Блокнот.
Наберіть приклад HTML-документа у блокноті:
<HTML>
<HEAD> <TITLE>ТАБЛИЦЯ</TITLE> </HEAD>
<TABLE BORDER>
<TR>
<TD>A1</TD>
<TD>B2</TD>
<TD>C1</TD>
</TR>
<TR>
<TD>A2</TD> <TD>B2</TD> <TD>C2</TD> </TR> </TABLE>
</HTML>
Збережіть файл у своїй папці та назвіть його AA.html та закрийте файл.
Перегляньте отриману веб-сторінку
Проаналізуйте результат.
Завдання 2
Запустіть програму Блокнот.
Наберіть приклад HTML-документа у блокноті:
<HTML>
<HEAD> <TITLE>ТАБЛИЦЯ</TITLE> </HEAD>
<TABLE BORDER="1">
<CAPTION ALIGN="bottom">
заголовок таблиці
</CAPTION>
<TR>
<TD>КОМІРКА</TD>
</TR>
</TABLE>
</HTML>
Збережіть файл у своїй папці та назвіть його AA1.html та закрийте файл.
Перегляньте отриману веб-сторінку
Проаналізуйте результат.
Завдання 3
Запустіть програму Блокнот.
Наберіть приклад HTML-документа у блокноті:
<HTML>
<HEAD> <TITLE>ТАБЛИЦЯ СКЛАДНА</TITLE> </HEAD>
<TABLE BORDER>
<TR>
<TH ROWSPAN=2> HDD </TH>
<TD>Western Digital 1200BB 120GB</TD>
<TD ALIGN="right">65$</TD>
</TR>
<TR>
<TD>Samsung SP2014N 200GB 8MB</TD>
<TD ALIGN="right">85$</TD>
</TR>
</TABLE>
</HTML>
Збережіть файл у своїй папці та назвіть його AA2.html та закрийте файл.
Перегляньте отриману веб-сторінку
Проаналізуйте результат.
Завдання 4
Запустіть програму Блокнот.
Наберіть приклад HTML-документа у блокноті:
<HTML>
<HEAD> <TITLE>ТАБЛИЦЯ СКЛАДНА 2</TITLE> </HEAD>
<TABLE BORDER> <TR>
<TH COLSPAN=2>Video</TH>
</TR>
<TR>
<TD>ATI Radeon 256MB</TD> <TD ALIGN="right">72$</TD> </TR> <TR>
<TD>Geforce 128MB</TD>
<TD ALIGN="right">50$</TD>
</TR>
</TABLE>
</HTML>
Збережіть файл у своїй папці та назвіть його AA3.html та закрийте файл.
Перегляньте отриману веб-сторінку
Проаналізуйте результат.