Таблицы

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

  • TABLE - создаёт таблицу.
  • CAPTION - задаёт заголовок для таблицы.
  • TR - задаёт строку таблицы.
  • TH - задаёт ячейку таблицы, заголовок столбца.
  • TD - задаёт простую ячейку таблицы с данными.

Элемент TABLE

В языке HTML для создания таблиц служит элемент TABLE. Весь код таблицы должен располагаться между тегами <TABLE> и </TABLE>. Атрибуты этого элемента задают параметры для всей таблицы целиком. Атрибуты элемента TABLE:

Атрибут Описание Пример
border Ширина рамки вокруг всей таблицы border="1"
bgcolor Определяет цвет фона ячеек таблицы bgcolor="yellow"
background Позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка background="images/foto.jpg"
bordercolor Определяет цвет рамки (светлый цвет для объёмной) bordercolor="blue"
bordercolordark Определяет тёмный цвет рамки (тень для объёмной) bordercolordark="black"
width Ширина таблицы width="100%"
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"

Атрибут frame

Атрибут frame задаёт тип рамки вокруг таблицы. Допустимы следующие значения:

  • void - границ нет (это значение по умолчанию).
  • above - только верхняя часть границы.
  • below - только нижняя часть.
  • hsides - только нижняя и верхняя части.
  • vsides - только левая и правая части.
  • lhs - только левая часть.
  • rhs - только правая часть.
  • box - все четыре части.

Атрибут rules

Атрибут rules задаёт внутренние границы таблицы (между ячейками). Допустимы следующие значения:

  • none - нет границ между ячейками (это значение по умолчанию).
  • rows - только между строками.
  • cols - только между столбцами.
  • all - отображаются все границы между строками и столбцами.

Элемент CAPTION - название таблицы

У таблицы может быть название. Оно не принадлежит непосредственно к табличным данным, а располагается перед таблицей или после неё. В HTML название таблицы задаётся при помощи элемента CAPTION, который должен находиться внутри элемента TABLE. У элемента CAPTION есть один атрибут align, позволяющий задать его расположение: над таблицей (top) или под таблицей (bottom).

Пример элемента CAPTION

<TABLE>
<CAPTION align="bottom">Название таблицы</CAPTION>
Код строк и столбцов таблицы
</TABLE>

Элемент TR - строки таблицы

В языке HTML таблицы формируются построчно. Элемент TR создаёт строку таблицы, а его атрибуты задают параметры для всех ячеек в строке. Перечислим атрибуты для элемента TR:

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

Элементы TD и TH - ячейки таблицы

В HTML внутри строк таблиц находятся ячейки. Они бывают двух типов: заголовки столбцов (создаются элементом TH) и обычные ячейки (создаются элементом TD). Элементы TD и TH обязательно должны помещаться между открывающим и закрывающим тегами элемента TR, которые в свою очередь помещаются между тегами <TABLE> и </TABLE>.
Элемент TD от элемента TH отличается лишь визуально в окне браузера. Содержимое элемента TH выравнивается по центру и отображается жирным шрифтом, так как заголовки столбцов принято оформлять именно так. Теги TD и TH, также как и TR, могут иметь свои атрибуты:

Атрибут Описание Пример
align Устанавливает горизонтальное выравнивание для содержимого ячеек. Допустимые значения: left (по умолчанию для TD), center (по умолчанию для TH), right. align="center"
valign Устанавливает вертикальное выравнивание для содержимого ячеек. Допустимые значения: top, middle, bottom. valign="top"
bgcolor Устанавливает цвет фона для ячейки таблицы bgcolor="blue"
rowspan Определяет число строк, перекрываемое текущей ячейкой. По умолчанию используется значение ("1"). Значение ("0") означает, что ячейка перекрывает все строки от текущей до последней строки таблицы rowspan="3"
colspan Определяет число столбцов, перекрываемое текущей ячейкой. По умолчанию используется значение ("1"). Значение ("0") означает, что ячейка перекрывает все столбцы от текущего до последнего столбца таблицы colspan="2"
width Устанавливает рекомендуемую ширину ячейки в пикселях или процентах width="20%"
height Устанавливает рекомендуемую высоту ячейки в пикселях или процентах height="100"

Пример с атрибутом rowspan

<TABLE align="center" border="1" cellpadding="5">
<TR>
<TH rowspan="2">Примеры</TH>
<TD>Пример1</TD><TD>Пример2</TD>
</TR>
<TR>
<TD>Пример3</TD><TD>Пример4</TD>
</TR>
</TABLE>

Отображение примера в браузере

Примеры Пример1 Пример2
Пример3 Пример4

Пример с атрибутом colspan

<TABLE align="center" border="1" cellpadding="5">
<TR>
<TH colspan="2">Примеры</TH>
</TR>
<TR>
<TD>Пример1</TD><TD>Пример2</TD>
</TR>
<TR>
<TD>Пример3</TD><TD>Пример4</TD>
</TR>
</TABLE>

Отображение примера в браузере

Примеры
Пример1 Пример2
Пример3 Пример4