Пример таблицы для веб-страницы.

Таблицы, которые используют при создании веб страниц построены на принципе мозаичного рисунка (см. предыдущую главу). Сначала рисуют любым удобным способом дизайн страницы, а потом это изображение "разрезают" на составные части, которые совмещают при помощи таблицы.

Рассматривайте данную информацию о применении таблиц для верстки дизайна, как материал для приобретения опыта и навыков в работе с таблицами. Мы не рекомендуем использовать этот метод в создании сайтов. Для этого необходимо использовать элементы управления таблиц стилей

На следующем рисунке показан эскиз страницы с границами таблицы. Так бы выглядел сайт, если бы мы указали толщину границ, неравную нулю, и покрасили их в красный цвет.

Далее следует код приведенной выше страницы. Здесь цветом выделены структурные элементы, для наглядности. Интересные места и нововведения мы рассмотрим более полробно.

Самый простой способ разрезки файла:
открыть изображение в графическом редакторе, например Adobe Photoshop. Выделять и копировать в новые файлы изображения для каждой ячейки таблицы.
Лучше всего НЕ ИСПОЛЬЗОВАТЬ таблицы очень сложной структур, так как могут возникнуть проблемы при отображении разными версиями браузеров.
Например, приведенное выше изображения было бы лучше разбить на 3 таблицы.

Первая таблица:

В каждой ячейке этой таблицы находится изображение. Только в одной ячейке вместо изображения указан фон, а ширина ячейки не имеет фиксированого размера, а задана в процентах. Вот код ячейки с фоном:

<TD width="50%" background="../images/fon1.gif" height="111" rowspan="2"></TD>

background="../images/fon1.gif" определяет фон в ячейке.

Вторая таблица:

В этой таблице ячейка для текста также не должна иметь фиксированый размер, как и в предыдущей таблице ячейка с фоном.
Кнопки меню реализованы достаточно просто: в ячейку вставлено избражение, которое заключено в гиперссылку.

<TD height="24" width="172">
  <a href="about.html">
    <img src="../images/m_2-1.gif" width="172" height="24" border="0" ALT="О Нас">
  </a>
</TD>

Третья таблица:

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

Ячейки с нефиксированой шириной делаются для того, чтобы страница выглядела приблизительно одинаково на разных разрешениях экрана, при этом страница как бы растягивается (в большую сторону) и заполняет все видимое пространство.