С появлением в языке HTML механизма таблиц, в арсенале Web-дизайнеров появились два весьма ценных инструмента - средство для размещения на страницах текстовой и числовой информации в табличном формате, а также инструмент для точного позиционирования объектов на Web-странице. Хотя вы и будете время от времени использовать таблицы для представления табличных данных, истинная ценность таблиц заключается в возможности их применения для компоновки страниц. HTML-таблицы позволяют компоновать такие Web-страницы, создание которых было достаточно сложным, если не вовсе невозможным, до введения таблиц с появлением в 1995 году версии HTML 3. Собственно говоря, применение таблиц для компоновки страниц стало настолько распространенным, что консорциум W3C приложил немало усилий для стандартизации отображения таблиц браузерами на различных платформах. Благодаря этому сегодня Web-дизайнеры могут использовать таблицы и иметь уверенность в том, что их таблицы будут работать одинаково и отображать информацию надлежащим образом во всех Web-браузерах, за исключением разве что самых старых.

При работе с таблицами наиболее очевидным кажется их применение для отображения текста и числовых данных в форме набора столбцов. Скажем, вы хотите вывести на экран список должностных лиц компании вместе с телефонными номерами каждого из них. Для этого вам нужно создать таблицу с двумя столбцами, где отдельные ячейки в левом столбце будут содержать имена и фамилии должностных лиц. Соответствующие ячейки в правом столбце содержат номер телефона того или иного должностного лица. Как показано на рис. 2.1, объем предоставляемой таблицей информации можно увеличить, добавив третий столбец, содержащий адрес электронной почты, а также четвертый, пятый и шестой столбцы, соответственно, под адрес, город и область.

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

Второе (и, пожалуй, наиболее важное) применение таблиц — помещение Web-содержимого (то есть текста, чисел, графических изображений и даже пустого пространства) в отдельные ячейки таблицы, а затем управление дизайном Web-страницы путем помещения ячеек в организованные строки и столбцы. Собственно, многие дизайнеры при создании структурированной Web-страницы начинают с рисования матрицы строк и столбцов (иными словами, таблицы), соответствующей ширине и высоте всей страницы. Затем дизайнер компонует страницу, помещая содержимое страницы в ячеистую структуру строк и столбцов таблицы в тех местах, где ему хотелось бы видеть каждый элемент (или объект) на странице.

Предположим, например, вы хотите разместить графический элемент в верхнем правом углу Web-страницы. Все, что нужно для этого сделать, — это создать таблицу с ячейкой в верхнем правом углу страницы. Аналогично, если вы хотите поместить текст в нижний правый угол страницы, просто проследите за тем, чтобы структура таблицы создавала ячейку там, где должен быть выведен текст, и поместите текст в эту ячейку.

Когда Web-браузер затем отобразит Web-страницу с таблицей, размеры таблицы и ее ячеек будут удерживать на месте графическое изображение (изображения) и текст. Поскольку каждая ячейка в таблице может удерживать объект Web-страницы в определенном месте на странице, таблицы можно использовать для управления расположением всего чего угодно, от простого текста до интерактивных графических кнопок и фоновых изображений. На рис. 2.2, например, показана Web-страница, на которой таблица с границами нулевой ширины обеспечивает невидимую сетку, удерживающую компоненты содержимого страницы на своих местах.

Затем, применив контрастный цвет в качестве фона остальных ячеек таблицы, вы привлечете взгляд посетителя к группе ячеек, служащих навигационным меню сайта, — так посетителю будет легче найти кнопки перехода со страницы на страницу. Более того, используя один и тот же цвет фона для ячеек навигационных кнопок на всех Web-страницах, вы дадите посетителю визуальную подсказку — куда "обращаться за помощью" при поиске интересующих его страниц на сайте. Вообще говоря, использование цвета фона для группирования ячеек таблицы, выполняющих одну и ту же функцию, помогает создать приятный глазу и дружественный к посетителю Web-сайт.

Таблицы также представляют собой отличный инструмент для разделения одного графического изображения на несколько частей для последующего составления навигационной карты в Web-браузерах, не поддерживающих навигационные карты. Навигационные карты (image maps) — это графические изображения, разделенные на области, с помощью щелчка на которых пользователь может переходить на другие страницы. В зависимости от назначения и общей направленности сайта, навигационную карту можно использовать в качестве единственного инструмента навигации. Предположим, например, вы создаете сайт, посвященный истории своей семьи. На главную страницу можно поместить большое изображение дерева с ветвями, причем каждая ветвь (генеалогического) дерева будет носить имя определенной генеалогической ветви вашего семейства. Разделив изображение дерева на три отдельных фрагмента и затем поместив каждый фрагмент в отдельную ячейку таблицы, так, что в каждой ячейке будет находиться ветвь дерева, вы сможете превратить каждую ветвь в "горячую область" (hotspot). Тогда посетитель сможет, щелкнув на ветви дерева, получить  информацию по той или иной группе родственников. Хотя посетитель видит дерево с ветвями целиком, на самом деле  графическое изображение на Web-странице разбито на отдельные фрагменты, которые затем вновь собираются в единое целое с помощью HTML-таблицы.

Как это ни странно, большинство Web-дизайнеров, использующих таблицы в качестве средства компоновки, не считают само по себе кодирование таблиц самой сложной частью работы. Сложной задачей они считают визуализацию Web- страницы, разбитой в табличный формат со строками и столбцами ячеек. Однако если вам захочется создать навигационную карту Соединенных Штатов, вам нужно будет всего лишь взглянуть на карту страны, чтобы понять, что разделить Соединенные Штаты по ячейкам таблицы не удастся просто потому, что границы отдельных штатов не имеют правильной прямоугольной формы. Набросав Web-страницу на бумаге и разделив изображения и текст горизонтальными и вертикальными линиями, можно быстро убедиться, реализуем ли вообще такой дизайн. Иными словами, набросок (или раскадровка) покажет, сможете ли вы разделить объекты на Web-странице на отдельные ячейки блочной структуры HTML-таблицы. Всегда анализируйте проект перед тем, как приниматься за написание кода.