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

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

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

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

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

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

Таблица задается командой <TABLE> ... </TABLE>.

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

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

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

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

<TABLE border=1>
  <TR>            <!-- Первая строка -->
    <TD>(1,1)</TD>     <!-- Первая ячейка -->
    <TD>(1,2)</TD>     <!-- Вторая ячейка -->
  </TR>
  <TR>            <!-- Вторая строка -->
    <TD>(2,1)</TD>     <!-- Первая ячейка -->
    <TD>(2,2)</TD>     <!-- Вторая ячейка -->
  </TR>
  <TR>            <!-- Третья строка -->
    <TD>(3,1)</TD>     <!-- Первая ячейка -->
    <TD>(3,2)</TD>     <!-- Вторая ячейка -->
  </TR>
</TABLE>

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

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

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

<TR>описание ячеек табличной строки</TR>

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

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

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

<TH>описание содержимого ячейки</TH>
 
<TD>описание содержимого ячейки</TD>

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

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

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

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

Страничные отступы

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

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

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

Замечание

Многоколонная верстка

Используя таблицы, можно выводить на экран информацию в несколько колонок:

Размещение информации на экране
Таблицы, вложенные друг в друга

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

Пример:

Добро пожаловать
	Картинка
Текст

Наложение картинок

Еще одна необычная практика использования таблиц: построение коллажей.

Постановка задачи. Имеются две картинки:

и

Как их наложить друг на друга? Как поместить животное на экран телевизора?

Общая идея: первую картинку сделать фоном для таблицы, а вторую разместить внутри.

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

Да... Получилось не очень хорошо. Для задания высоты ячейки (и таблицы) создатели HTML не придумали атрибута. Мы видим только верхний кусочек фоновой картинки.

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

Нарисовать вспомогательную картинку очень просто — это должен быть одноцветный GIF, в котором единственный цвет объявлен прозрачным. Тогда пользователь на экране эту картинку и не увидит:

Показать программу

Замечание

Для того, чтобы использование невидимой картинки empty.gif (из каталога pic) было более понятным, ниже она заменена на такую же однопикселную картинку empty1.gif, но без режима “прозрачности”, а картинка с лосем показана с рамкой:

>Назад<