Використання таблиць
Таблиці можна використовувати не лише для додавання колонок або вирівнювання елементів веб-сторінки, а й для створення різноманітних дизайнерських вишукань, таких як декоративна рамка чи тінь. Завдяки великій кількості параметрів як у самій таблиці, так і у її комірках, можна створювати практично будь-які декоративні елементи, поєднуючи таблиці та малюнки. Ці елементи легко можна адаптувати під будь-який макет, оскільки ширину таблиці можна встановлювати як у відсотках, так і у пікселях.
Створення декоративної рамки
Для створення бажаної рамки спочатку слід намалювати її у якомусь графічному редакторі. Хоча кінцева ширина рамки на веб-сторінці може коливатися у широких межах, наприклад, у випадку використання резинового макету, розмір кутів залишається постійним. Тому при створенні зображення слід спочатку орієнтуватися саме на кути. На мал. 1 показана рамка з закругленими кутами.
Тепер зображення рамки розрізаємо на дев'ять фрагментів, які позначені на мал. 2 помаранчевими лініями та номерами. Після розрізання малюнка на частини отримаємо дев'ять фрагментів, але усього вісім буде використано через те, що середня частина з номером 5 не потрібна, оскільки її замінить вміст рамки, наприклад, текст.
Фрагменти 2 і 8 мають занадто велику ширину, тому їх можна трохи обрізати. Аналогічно справа з фрагментами 4 і 6, їх скорочують за висотою. В результаті отримаємо вісім графічних зображень, представлених у табл. 1.
| Зображення | Положення | Ім'я файлу |
|---|---|---|
 | Лівий верхній кут | 01.gif |
 | Верхня горизонтальна лінія | 02.gif |
 | Правий верхній кут | 03.gif |
 | Ліва вертикальна лінія | 04.gif |
 | Права вертикальна лінія | 06.gif |
 | Лівий нижній кут | 07.gif |
 | Нижня горизонтальна лінія | 08.gif |
 | Правий нижній кут | 09.gif |
Після створення необхідних фрагментів формуємо таблицю розміром 3х3 комірки, як показано на мал. 3.
Ширина самої таблиці може задаватися як у пікселях, так і відсотках, від цього залежить розмір рамки. А от ширина і висота крайніх комірок повинна співпадати з розмірами відповідних зображень - кутів, вертикальних і горизонтальних ліній і встановлюватися в пікселях. Також в цій таблиці атрибути border, cellspacing і cellpadding повинні бути рівні нулю, інакше лінії не будуть з'єднуватися між собою.
Приклад 1. Створення декоративної рамки
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Рамка</title>
<style type="text/css">
#content {
padding: 5px; /* Поля навколо вмісту */
}
</style>
</head>
<body>
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="13" width="12"><img src="images/01.gif" width="12" height="13" alt=""></td>
<td style="background: url(images/02.gif)" height="13"></td>
<td height="13" width="14"><img src="images/03.gif" width="14" height="13" alt=""></td>
</tr>
<tr>
<td style="background: url(images/04.gif)"></td>
<td id="content">Вміст</td>
<td style="background: url(images/06.gif)"></td>
</tr>
<tr>
<td height="13"><img src="images/07.gif" height="13" alt=""></td>
<td style="background: url(images/08.gif)"></td>
<td height="13"><img src="images/09.gif" height="13" alt=""></td>
</tr>
</table>
</body>
</html>У цьому прикладі ширина всієї таблиці становить 400 пікселів, а ширина і висота окремих комірок дорівнює висоті розташованих у них зображень. Кути вставляються як звичайні зображення за допомогою тега <img>, а от вертикальні і горизонтальні лінії задаються за допомогою фону (стилевий атрибут background). Це дозволяє зробити нашу рамку масштабованою, тоді її розмір буде змінюватися в залежності від вмісту. Іншими словами, при заміні width="400" на width="100%", рамка буде відображатися так само коректно.
Не обов'язково вказувати ширину всіх комірок у колонці, досить задати ширину першої комірки, і нижчерозташовані комірки будуть підлаштовуватися під неї.
Даний спосіб дозволяє створювати рамки практично будь-якого виду.
Додавання тіні
Додавання тіні до зображення або блоку тексту відбувається практично аналогічно створенню декоративної рамки. Спочатку готуємо вихідне зображення з тінню (мал. 4), а потім шляхом розрізання перетворюємо його в набір фрагментів, які необхідно розподілити по комірках таблиці.
У кінцевому результаті знадобиться п'ять зображень, які представлені в табл. 2.
| Зображення | Положення | Ім'я файла |
|---|---|---|
 | Вертикальна тінь | s01.gif |
 | Горизонтальна тінь | s02.gif |
 | Правий нижній куток тіні | s03.gif |
 | Правий верхній заглушка | s04.gif |
 | Лівий нижній заглушка | s05.gif |
Заглушки необхідні для того, щоб тінь мала згладжені краї та виглядала завершеною.
Тепер створюємо таблицю розміром 2х2 комірки (мал. 5), загальна ширина встановлюється за бажанням, а ширина правої колонки повинна дорівнювати ширині зображення з тінню (s01.gif). Висота нижніх комірок таблиці також повинна співпадати з висотою зображення тіні (s02.gif).
Щоб легко масштабувати блок з тінню, зображення встановлюються як фон за допомогою атрибута background тега <td> (приклад 2).
Приклад 2. Створення тіні
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тінь</title>
<style type="text/css">
#content {
padding: 5px; /* Поля навколо тексту */
background: #dd9; /* Колір фону */
}
</style>
</head>
<body>
<table width="200" cellspacing="0" cellpadding="0">
<tr>
<td id="content">Велетні повинні бути або великі,
або їх повинно бути багато, якщо вони маленькі.</td>
<td width="9" valign="top" style="background: url(images/s01.gif)">
<img src="images/s04.gif" width="9" height="10" alt=""></td>
</tr>
<tr>
<td height="9" style="background: url(images/s02.gif)">
<img src="images/s05.gif" width="10" height="9" alt=""></td>
<td><img src="images/s03.gif" width="9" height="9