Таблицы в HTML

Таблицы часто используются для выравнивания элементов содержимого веб-страницы.

Для создания таблиц в языке HTML используются элементы:

TABLE - создаёт таблицу.

CAPTION - задаёт заголовок для таблицы.

TR - задаёт строку таблицы.

TH - задаёт ячейку таблицы, заголовок столбца.

TD - задаёт простую ячейку таблицы с данными.

 

Пример

<TABLE border=4 cellspacing=3>
<CAPTION> Заголовок таблицы </CAPTION>
<TR><TH>Заголовок 1
<TH>Заголовок 2
<TR><TD>Ячейка 1 <TD>Ячейка 2
<TR><TD>Ячейка 3 <TD>Ячейка 4
</TABLE>

 

 

Другие примеры смотрите здесь.

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

Атрибуты тега  <TABLE>

Атрибут	Описание	Пример
border	Ширина рамки вокруг всей таблицы	border="1"
bgcolor	Определяет цвет фона ячеек таблицы	bgcolor="yellow"
background	Позволяет заполнить фон таблицы рисунком.	background="images/foto.jpg"
bordercolor	Определяет цвет рамки (светлый цвет для объёмной)	bordercolor="blue"
bordercolordark	Определяет тёмный цвет рамки (тень для объёмной)	bordercolordark="black"
width	Ширина таблицы	width="100%"  width= " 500"
align	left, right, center - выравнивание таблицы относительно текста	align="center"
valign	Задаёт вертикальное выравнивание для всех ячеек таблицы	valign="top"
cellspacing	Расстояние между ячейками	cellspacing="2"
cellpadding	Пустое расстояние между текстом и внутренней границей ячейки	cellpadding="2"
frame	Задаёт вид рамки вокруг таблицы: void, above, below, hsides, vsides, lhs, rhs, box	frame="all"
rules	Задаёт тип внутренних границ между ячейками: none, rows, cols, all	rules="none"

 

Атрибуты для тега <TR>                             Атрибуты для тега <TD>

Атрибут	Описание
align	left - выравнивание по левому краю (это значение по умолчанию) center - выравнивание данных по центру (это значение по умолчанию для заголовков столбцов таблиц - TH) right - выравнивание данных по правому краю
valign	top - данные ячейки сдвигаются вверх. middle - данные ячейки центрируются вертикально (это значение по умолчанию) bottom - данные в ячейке сдвигаются вниз.
bgcolor	Устанавливает цвет фона для строки таблицы