|
Для создания таблиц в языке 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 |
|