Создание таблицы

• Элемент создания таблицы TABLE

• Элементы создания ячеек (строк и столбцов) внутри таблицы TR, TD и TH

• Заголовок таблицы CAPTION

• Элементы структурирования таблицы:

  • группирования строк THEAD, TBODY и TFOOT

  • группирования столбцов COLGROUP и COL

Тег <TR> (3)

TR (Table Row) – создает новую строку ячеек таблицы. Размещается внутри контейнера TABLE. Является контейнером для тегов TH и TD. Закрывающий тег не обязателен.

Атрибуты:

• ALIGN - определяет способ горизонтального выравнивания содержимого всех ячеек данного ряда.align=left|right|center|justify.

• VALIGN - определяет способ вертикального выравнивания содержимого всех ячеек данного ряда.valign=middle|top|bottom|baseline

• BGCOLOR- определяет цвет фона для всех ячеек данного ряда.bgcolor = цвет| #RRGGBB

Тег <CAPTION> (2)

CAPTION – задает заголовок таблицы. Размещается внутри контейнера TABLE. Является контейнером. Закрывающий тег обязателен. Содержание заголовка должно состоять только из текста. Использование блочных элементов в этом случае недопустимо.

Атрибуты:

• ALIGN- определяет способ вертикального выравнивания заголовка таблицы.align=top|bottom

Тег <TABLE> (1)

Элемент для создания таблицы. Обязательно должен иметь начальный и конечный теги.

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

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

Атрибуты тега TABLE:

• ALIGN – определяет способ горизонтального выравнивания таблицы.align=left|right|center

• VALIGN– должен определять способ вертикального выравнивания таблицы.

valign=top|bottom|middleНет в спецификации.

• WIDTH– определяет ширину таблицы. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в таблице материала.width=n| %

• HEIGHT– определяет высоту таблицы. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в таблице материала.height=n| %

• BORDER– определяет ширину внешней рамки таблицы (в пикселях).border=nРамка обычно рисуется как трехмерная темно-серым цветом. При BORDER="0" или при отсутствии этого атрибута рамка отображаться не будет.

• BORDERCOLOR– определяет цвет рамки таблицы.bordercolor= цвет | #NNNNNNДобавление параметра bordercolor создают однотонную плоскую рамку.

• FRAME – определяет способ отображения границы вокруг таблицы.

  • void не отрисовывать границы.

  • border граница вокруг таблицы.

  • above граница по верхнему краю таблицы.

  • below граница снизу таблицы.

  • hsides только горизонтальные границы (сверху и снизу таблицы).

  • vsides только вертикальные границы (слева и справа от таблицы).

  • rhs граница только на правой стороне таблицы.

  • lhs граница только на левой стороне таблицы.

• RULES– определяет границы между ячейками.

  • allграница вокруг каждой ячейки таблицы.

  • groupsграница между группами, которые образуются тегами <THEAD>, <TFOOT>, <TBODY>, <COLGROUP> или <COL>.

  • colsграница между колонками.

  • noneвсе границы скрываются.

  • rowsграница между строками таблицы.

• CELLPADDING – определяет расстояние между рамкой каждой ячейки таблицы и содержащимся в ней материалом.cellpadding=n

• CELLSPACING– определяет расстояние между границами соседних ячеек.cellspacing=n

• BGCOLOR– определяет цвет фона ячеек таблицы. Задается либо RGB-значением в шестнадцатеричной системе.bgcolor= цвет | #RRGGBB

• BACKGROUND– позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка.background=URL

Теги <TD> и <TH>

TD (Table Data) – создает ячейку с данными в текущей строке.

TH (Table Head) – также создает ячейку, но определяет ее как ячейку-заголовок.

Содержимое ячейки-заголовка и ячеек с данными оформляется разными шрифтами.

Размещается внутри контейнера TR.

Является контейнером. Закрывающий тег не обязателен.

Атрибуты:

• ALIGN - определяет способ горизонтального выравнивания содержимого ячейки. align = left | right |center | justify. По умолчанию способ выравнивания определяется значением атрибута ALIGN элемента TR. Если же и он не задан, то для TD выполняется выравнивание по левому краю, а для TH - центрирование.

• VALIGN - определяет способ вертикального выравнивания содержимого ячейки. valign= middle | top | bottom | baseline. По умолчанию происходит выравнивание по центру (VALIGN="middle"), если значение этого атрибута не было задано ранее в элементе TR.

• WIDTH - определяет ширину ячейки. Ширина задается в пикселях или в процентном отношении к ширине таблицы. width = n | %

• HEIGHT - определяет высоту ячейки. Высота задается в пикселях или в процентном отношении к высоте таблицы. height = n | %

• BGCOLOR - определяет цвет фона ячейки. bgcolor = цвет | #RRGGBB

• BACKGROUND - фоновым рисунком ячейки. background = URL

• COLSPAN - определяет количество ячеек, которые должны быть объединены по горизонтали. По умолчанию имеет значение 1.

1		2
3	4		5

• ROWSPAN - определяет количество ячеек, которые должны быть объединены по вертикали. По умолчанию имеет значение 1.

1	2	3
	4	5