Loading





Форекс с Альпари

eTXT




Анкетка


HTML таблицы

Для создания таблиц в языке 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%"
alignleft, right, center - выравнивание таблицы относительно текстаalign="center"
valignЗадаёт вертикальное выравнивание для всех ячеек таблицыvalign="top"
cellspacingРасстояние между ячейкамиcellspacing="2"
cellpaddingПустое расстояние между текстом и внутренней границей ячейкиcellpadding="2"
frameЗадаёт вид рамки вокруг таблицы. Допустимые значения: void, above, below, hsides, vsides, lhs, rhs, boxframe="all"
rulesЗадаёт тип внутренних границ между ячейками: none, rows, cols, allrules="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:

АтрибутОписаниеПример
alignleft - выравнивание данных в ячейках строки по левому краю (это значение по умолчанию)
center - выравнивание данных по центру (это значение по умолчанию для заголовков столбцов таблиц - TH)
right - выравнивание данных по правому краю
align="center"
valigntop - данные ячейки сдвигаются вверх.
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

Работа в интернете с текстами




Ваш комментарий







  © 2015–2018  https://leonidmuzyka.com/  L.M. Служба поддержки RSS подписка подписка