Таблиці

Важливим інструментом Web-дизайну є таблиці, які використовуються не лише для виведення табличних даних, але і для управління взаємним розміщенням тексту й графіки, створення колонок газетного типу, кольорових ефектів та ін. Таблиця задається тегом <TABLE>…</TABLE>, що має цілий ряд опцій:

Таблиця 2

Опція	Призначення
ALIGN="вирівнювання"	Вирівнювання усієї таблиці відносно тексту, в якому вона знаходиться (left, center або right)
BORDER="число"	Ширина бордюру таблиці, у пікселях
CELLSPACING="число"	Відстань між комірками, у пікселях
CELLPADDING="число"	Розмір вільного простору між границями комірки та її вмістом, у пікселях
HSPACE="число"	Розмір вільного простору зліва та справа від таблиці, у пікселях
VSPACE="число"	Розмір вільного простору зверху і знизу від таблиці, у пікселях
WIDTH="ширина"	Ширина таблиці у пікселях або відсотках від ширини вікна броузера
BACKGROUND="IMAGES\ptichka.jpg"	Заповнює комірку фоновим малюнком. Необхідно вказати URL малюнка
BGCOLOR="CCFFFF"	Визначає колір фону комірки
COLSPAN	Визначає кількість стовпців, які об¢єднуються. За замовчуванням має значення 1
ROWSPAN	Визначає кількість рядків, які об¢єднуються. За замовчуванням має значення 1
VALIGN	Визначає спосіб вертикального вирівнювання змісту комірки. Можливі значення: top, bottom, middle. За замовчуванням – рівняння по центру (VALIGN="middle)

Таблицю визначають таким чином:

<table>

<tr>

<td>Вміст комірки</td>

...

</tr>

<tr>

<td>Вміст комірки</td>

...

</tr>

...

</table>

Тег <TR>…</TR> визначає рядок таблиці, а тег <TD>…</TD> — комірку в рядку. Якщо комірку треба залишити пустою, то в неї розміщують символ пропуску &nbsp;

Завдання 1. Створити таблицю.

<HTML>

<HEAD>

<TITLE> Розклад занять навчальних груп

</TITLE>

</HEAD>

<B> Навчальна група

</B></FONT><BR></P>

<B> Понеділок </B></FONT><BR>

<table width="100%" border="1" cellspacing="0" cellpadding="0" bordercolorlight="#009966" bordercolordark="#9999FF">

<tr bgcolor="#9999FF">

<td> Заняття </td>

<td> 1 група </td>

<td> 2 група </td>

<td> 3 група </td>

</tr>

<tr bgcolor="#33CCCC">

<td> 1</td>

<td> Інформатика </td>

<td> Історія </td>

<td> Математика </td>

</tr>

<tr bgcolor="#33CCCC">

<td> 2</td>

<td> Російська мова </td>

<td> Література </td>

<td> Англійська мова </td>

</tr>

<tr bgcolor="#33CCCC">

<td> 3</td>

<td> Математика </td>

<td> Історія </td>

</tr>

</table>

</BODY>

</HTML>

У цьому прикладі границя таблиці виконана у двох кольорах. Це досягається за рахунок використання атрибутів BORDERCOLORLIGHT та BORDERCOLORDARK.

Завдання 2. Створити “неправильну” таблицю.

	Характеристики
Середній зріст, см	Середня вага, кг
Стать	Чоловіча
Жіноча

......................................................................................

<tr>

<td colspan="2">Характеристики</td>

</tr>

<tr>

<td> Середній зріст, см </td>

<td> Середня вага, кг </td>

</tr>

<td> Чоловіча </td>

</tr>

<td> Жіноча </td>

<td>166</td>

<td>65</td>

</tr>

</table>

........................................................................