|
|
|
В общем случае таблицы используют для хранения информации с двумя характерными признаками. Значения одного признака расписано в заголовках строк, другого -- в заголовках столбцов. А в каждую клетку таблицы заносят значение, одновременно обладающее признаком строки и столбца, на пересечении которых она расположена.
Для таблицы умножения признаками служат значения сомножителей. Первый признак -- это значение первого сомножителя, второй -- значение второго.
Как задать таблицу
Таблица задается командой <TABLE> ... </TABLE>.
Внутри этих тэгов задаются строки командами <TR> ... </TR>.
Наконец, внутри строк задаются клетки (ячейки) командами <TD> ... </TD>.
Таким образом, по строкам, описывается вся структура таблицы.
Рассмотрим следующий пример.
Программа
Таблица на экране
\n'+ '
<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>
(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>описание ячеек табличной строки</TR>
Варьируя атрибутами команды TR, можно установить те или иные свойства одновременно для всех ячеек строки.
Атрибут
Значения
Описание
align
left, center, right
Выравнивание по горизонтали
valign
top, center,bottom, baseline
Выравнивание по вертикали
bgcolor
цвет
Цвет фона
bordercolor
цвет
Цвет линий рамки
bordercolordark
цвет
Цвет рамки (снизу и справа)
bordercolorlight
цвет
Светлый цвет рамки (сверху и слева)
Атрибуты команды TD (TH)
Каждая табличная строка состоит из ячеек, которые последовательно описываются командами TD (обычная ячейка) и (или) TH (ячейка-заголовок):
описание содержимого \ячейки\n'+ ' \n'+ '
<TD>описание содержимого ячейки</TD>
Содержимое обычной ячейки по умолчанию горизонтально выравнивается по левому краю, а ячейки-заголовка -- по центру. Кроме того, текст в ячейке-заголовке выделяется полужирным шрифтом.
Команды TD и TH имеют следующие атрибуты:
Атрибут
Значения
Описание
align
left, center, right
Выравнивание по горизонтали
valign
top, center, bottom, baseline
Выравнивание по вертикали
width
число или процент
Ширина ячейки
bgcolor
цвет
Цвет фона
background
файл
Фоновая картинка
bordercolor
цвет
Цвет линий рамки
bordercolordark
цвет
Цвет рамки (снизу и справа)
bordercolorlight
цвет
Светлый цвет рамки (сверху и слева)
nowrap
Выключение автоматического разрыва строк
colspan
число
Ширина большой ячейки (в столбцах)
rowspan
число
Высота большой ячейки (в строках)
Многоликие таблицы
Как уже говорилось, использование таблиц в практике HTML-программирования очень неожиданное. Вероятно, авторы языка и не предполагали, что таблицы будут использоваться проектировщиками гипертекстовых страниц как элемент дизайна.
Страничные отступы
В обычных книгах текст не начинается с самого края -- страничные поля выделяют информационные блоки и, следовательно, помогают глазам более комфортно воспринимать материал.
В гипертекстовом документе можно создать поля, если размещать информацию внутри таблицы, состоящей всего из одной клетки с невидимыми границами. При изменении значения атрибута cellpadding, меняется ширина полей.
Обычное размещение
Размещение в таблице
Малютку сына - баю-бай! -
Прижми покрепче к сердцу
И никогда не забывай
Задать ребенку перцу!
"Алиса в стране Чудес"
Страницы: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18
При использовании материалов активная ссылка на источник обязательна.