Построение таблиц. 
Разработка web-сайта на основе HTML с использованием JavaScript

В практическом HTML-программировании таблицы совершенно незаменимы для…

создания левых и правых полей страницы, выравнивания элементов на экране, многоколонной верстки, наложения картинок друг на друга. И, наконец, для отображения на экране табличного материала, но это — в последнюю очередь. В 90% случаях таблицы используются, как ни парадоксально это звучит, не для отображения таблиц.

Но обо всем по порядку.

Что такое таблица

Всем хорошо известна таблица умножения. Она представляет собой прямоугольник, расчерченный на клетки. Вертикальные ряды клеток образуют столбцы, горизонтальные — строки. Каждая строка и столбец в таблице может иметь свой заголовок. Заголовки записываются в первой строке и первом столбце.

Заголовками строк и столбцов в таблице умножения служат цифры от одного до девяти. Пользоваться таблицей очень просто. Если требуется узнать, например, результат умножения числа 6 на число 8, то нужно прочитать ответ в клетке на пересечении столбца с заголовком «6» и строки с заголовком «8». Или в клетке на пересечении строки с заголовком «6» и столбца с заголовком «8». Это все равно, потому что 6· 8 = 8· 6. В обеих этих клетках написано число 48.

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

Для таблицы умножения признаками служат значения сомножителей. Первый признак — это значение первого сомножителя, второй — значение второго.

Как задать таблицу

Таблица задается командой

….

Внутри этих тэгов задаются строки командами.

.

Наконец, внутри строк задаются клетки (ячейки) командами.

….

Таким образом, по строкам, описывается вся структура таблицы.

Рассмотрим следующий пример.

Программа.	Таблица на экране.
(1,1) (1,2) (2,1) (2,2) (3,1) (3,2)	(1,1) (1,2) (2,1) (2,2) (3,1) (3,2)

Атрибуты команды TABLE.

Атрибут.	Значение.	Описание.
align.	left, right.	Выравнивание по горизонтали.
width.	число или процент.	Ширина таблицы.
cellpadding.	число.	Расстояние между содержимым ячейки и рамкой.
cellspacing.	число.	Расстояние между ячейками таблицы.
bgcolor.	цвет.	Цвет фона таблицы.
background.	файл.	Фоновая картинка.
border.	число.	Ширина линий рамки.
bordercolor.	цвет.	Цвет линий рамки.
bordercolordark.	цвет.	Цвет рамки (снизу и справа).
bordercolorlight.	цвет.	Светлый цвет рамки (сверху и слева).

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

Атрибуты команды TR.

HTML-таблица состоит из строк, каждая из которых задается командой.

Варьируя атрибутами команды TR, можно установить те или иные свойства одновременно для всех ячеек строки.

Атрибут.	Значения.	Описание.
align.	left, center, right.	Выравнивание по горизонтали.
valign.	top, center, bottom, baseline.	Выравнивание по вертикали.
bgcolor.	цвет.	Цвет фона.
bordercolor.	цвет.	Цвет линий рамки.
bordercolordark.	цвет.	Цвет рамки (снизу и справа).
bordercolorlight.	цвет.	Светлый цвет рамки (сверху и слева).

Атрибуты команды TD (TH).

Каждая табличная строка состоит из ячеек, которые последовательно описываются командами TD (обычная ячейка) и (или) TH (ячейка-заголовок):

описание содержимого ячейкиописание содержимого ячейки

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

Команды TD и TH имеют следующие атрибуты:

Атрибут.	Значения.	Описание.
align.	left, center, right.	Выравнивание по горизонтали.
valign.	top, center, bottom, baseline.	Выравнивание по вертикали.
width.	число или процент.	Ширина ячейки.
bgcolor.	цвет.	Цвет фона.
background.	файл.	Фоновая картинка.
bordercolor.	цвет.	Цвет линий рамки.
bordercolordark.	цвет.	Цвет рамки (снизу и справа).
bordercolorlight.	цвет.	Светлый цвет рамки (сверху и слева).
nowrap.		Выключение автоматического разрыва строк.
colspan.	число.	Ширина большой ячейки (в столбцах).
rowspan.	число.	Высота большой ячейки (в строках).

Многоликие таблицы

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

Страничные отступы В обычных книгах текст не начинается с самого края — страничные поля выделяют информационные блоки и, следовательно, помогают глазам более комфортно воспринимать материал.

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

Обычное размещение.	Размещение в таблице.
Малютку сына — баю-бай! Прижми покрепче к сердцу И никогда не забывай Задать ребенку перцу! " Алиса в стране Чудес"	Малютку сына — баю-бай! ; Прижми покрепче к сердцу И никогда не забывай Задать ребенку перцу! " Алиса в стране Чудес"

Можно задать поля и при помощи пустых столбцов:

Размещение в таблице.	Здесь border=1.
Баюкай сына своего Хорошею дубиной ; Увидишь, будет у него Характер голубиный! " Алиса в стране Чудес"	Баюкай сына своего Хорошею дубиной ; Увидишь, будет у него Характер голубиный! " Алиса в стране Чудес"

Обычной практикой является комбинирование этих двух способов:

Размещение в таблице.	Здесь border=1.
Баюкай сына своего Хорошею дубиной ; Увидишь, будет у него Характер голубиный! " Алиса в стране Чудес"	Баюкай сына своего Хорошею дубиной ; Увидишь, будет у него Характер голубиный! " Алиса в стране Чудес"

Один из примеров табличных отступов вы видите сейчас на экране. В качестве страничного фона использована картинка с вертикальной надписью «Robotland» по левому краю. Для того чтобы элементы страницы не налезали на этот «корешок», все они выводятся на экран внутри таблицы так, как это показано в следующем примере.

Крокодильчики мои Цветики речные! Что глядите на меня Прямо как родные?	Это кем хрустите вы В день веселый мая, Средь нескушанной травы Головой качая? " Алиса в стране Чудес"