Ценов М.О. Основи Internet, М-01.

ЛР 4: застосування таблиць на Web-сторінках

Лабораторна робота №4

Тема: створення закладок та гіперпосилань на Web-сторінках.

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

Зміст роботи: призначення і особливості використання таблиць на Web -сторінках. Структура таблиці в HTML -документе. Основні атрибути тега TABLE. Основні атрибути тегів TR, TD. Додавання порожніх осередків в таблицю..

План

1. Методичні вказівки 1

2. Порядок виконання роботи 4

1. Методичні вказівки

Таблиці в HTML

Зазвичай таблиці використовуються для впорядкування і представлення даних на Web -сторінках, проте можливості таблиць цим не обмежуються. C допомогою таблиць зручно верстати макети сторінок, має в розпорядженні потрібним чином фрагменти тексту і зображень.

Таблиця складається з рядків і стовпців-осередків, які можуть містити текст, списки, гіперпосилання, графіку, відеокліпи, таблиці і інші елементи. Таблиця повинна містити хоч би один осередок.

Для додавання таблиці на Web -страницу використовується контейнер <TABLE>. </TABLE>, який містить елементи, що визначають вміст таблиці.

Рядки таблиці задаються за допомогою тегів <TR>.</TR>. Кількість рядків таблиці визначається кількістю пар тегів <TR, що зустрічаються>.</TR>. Рядки можуть мати атрибути ALIGN і VALIGN, які описують візуальне положення вмісту рядків в таблиці.

Осередки рядка таблиці задаються за допомогою тегів <TD> .</TD>. Елемент таблиці може бути описаний тільки усередині рядка таблиці. Якщо в рядку відсутні одна або декілька осередків для деяких колонок, то браузер відображує порожній осередок. Розташування даних в осередку за умовчанням визначається атрибутами ALIGN=left і VALIGN=middle. Це розташування може бути виправлене як на рівні опису рядка, так і на рівні опису осередку.

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

Верхні і нижні колонтитули таблиці задаються контейнерами <THEAD>.</THEAD>, <TFOOT>.</TFOOT>.

Іноді вимагається помістити в таблицю порожні осередки. Це можна зробити, помістивши в осередок пропуск (&#32), нерозривний пропуск (&nbsp) або тег <br>.

Синтаксис тегів для опису таблиці має вигляд:

<TABLE параметри=.. >

<TR>

<TD параметры=. > 1-й осередок 1-го рядка </TD>

<TD параметри=.. > 2-й осередок 1-го рядка </TD>

. . .

<TD параметри=.. > n -й осередок 1-го рядка </TD

</TR>

<TR>

<TD> 1-й осередок 2-го рядка </TD>

...

</TR>

...

</TABLE>

Атрибути тега TABLE:

ALIGN – задає вирівнювання таблиці по краю вікна браузеру. Допустимі значення: left, center, right.

BGCOLOR – устанавливает колір фону таблиці.

BORDER – устанавливает товщину рамки в пікселах. За умовчанням рамка зображається тривимірною, але якщо використовується параметр bordercolor, то вид рамки міняється. Коли в тегу <TABLE> використовується параметр border без аргументів (<TABLE border>), то браузер відображує рамку завтовшки один піксел.

BORDERCOLOR – устанавливает колір рамки таблиці. Рамка зазвичай малюється як тривимірна, додавання параметрів bordercolor і border до тега <TABLE> створюють однотонну лінію.

CELLPADDING – визначає відстань між межею осередку і її вмістом. Цей параметр додає порожній простір до осередку, збільшуючи тим самим її розміри. Без параметра cellpadding текст в таблиці "налипає" на рамку, знижуючи тим самим його сприйняття. Додавання ж cellpadding дозволяє поліпшити читабельність тексту. За відсутності меж особливого значення цей параметр не має, але може допомогти, коли вимагається встановити порожній проміжок між осередками.

CELLSPACING – задает відстань між зовнішніми межами осередків. Якщо встановлений параметр border, товщина межі враховується і входить в загальне значення.

HEIGHT – встановлює висоту таблиці. У специфікації HTML 4 ці параметри немає, проте браузери в більшості випадків розуміють його, якщо він встановлений у тега <TABLE>. Якщо висота таблиці не вказана, то береться сумарне значення параметра height у тега <TD>, інакше висота обчислюється на основі вмісту таблиці.

WIDTH – задає ширину таблиці в пікселах або %. Якщо загальна ширина вмісту перевищує вказану ширину таблиці, то браузер намагатиметься "втиснутися" в задані розміри за рахунок форматування тексту. У разі, коли це неможливо, наприклад, в таблиці знаходяться зображення, параметр width буде проігнорований, і нова ширина таблиці буде вичислена на основі її вмісту. Як і у випадку з висотою, якщо ширина явно не вказана, то вона обчислюватиметься на основі вмісту таблиці.