Для создания таблиц используются следующие теги:
- <TABLE> - Для обрамления самой таблицы;
- <THEAD> - Определяет заголовки элементов таблицы;
- <TBODY> - Определяет тело таблицы;
- <TFOOT> - Определяет нижнюю, завершающую часть таблицы;
- <CAPTION> - Для обрамления подписи; Атрибут ALIGN={TOP | BOTTOM} - размещение заголовка относительно таблицы (вверху или внизу таблицы)
- <COLGROUP> - Задание свойств одного или более столбцов;
- <COL> - Задание свойств одного или более столбцов;
- <TR> - Для обрамления рядов таблицы;
- <TD> - Для обрамления клеток
- <TH> -- </TH> тех, что нужно показывать пожирнее, например заголовков;
- <TD> -- </TD> обычных.
Атрибуты TABLE:
имя атрибута
|
возможные значения
|
смысл
|
примечания
|
ALIGN
|
LEFT, RIGHT
|
Определяет горизонтальное положение таблицы. Задание этого атрибута фактически определяет плавающую таблицу, которую может обтекать текст. При использовании этого атрибута по окончании таблицы должна следовать команда BR.
|
LEFT - Таблица прижимается влево (используется по умолчанию).
RIGHT – Таблица прижимается вправо. Текст в клетках прижимается к влево.
|
VALIGN
|
TOP, MIDDLE, BOTTOM
|
Определяет вертикальное расположение текста в таблице
|
|
WIDTH
|
целое
|
Определяет ширину таблицы в пикселах или в процентах от ширины экрана. Для задания n в процентах используется знак (%) процента.
|
броузер использует это значение, если оно не конфликтует с требованиями ширины в соседних ячейках в том же самом столбце
|
HEIGHT
|
целое
|
Определяет высоту таблицы в пикселах или в процентах от высоты экрана. Позволяет при необходимости растягивать таблицу на весь экран.
|
броузер использует это значение, если оно не конфликтует с требованиями высоты для других ячеек в той же самой строке
|
|
|
Задает в качестве фона графический файл.
|
|
BGCOLOR
|
|
Задает цвет фона.
|
|
BORDER
|
целое
|
Ширина рамки в пикселах
|
По умолчанию рамка не рисуется
|
BORDER COLOR
|
|
Задание цвета рамки
|
|
BORDER COLORLIGHT
|
|
Задание цвета для рамки с тенью (псевдо трехмерная графика)
|
Используется вместе с атрибутами BORDERCOLORDARK и BORDER
|
BORDER COLORDARK
|
|
Задание цвета для рамки с тенью (псевдо трехмерная графика
|
|
CELLPADDING
|
целое
|
Задает расстояние в пикселах между границей клетки и ее содержимым.
|
|
CELLSPACING
|
целое
|
Задает расстояние в пикселах между внешней рамкой таблицы и ее клетками внутри таблицы.
|
|
COLS
|
целое
|
Число столбцов в таблице. Данный атрибут ускоряет вывод таблицы, что особенно заметно для больших таблиц
|
|
FRAME
|
VOID, ABOVE, BELOW, HSIDES, LHS, RHS, VSIDES, BOX, BORDER
|
Определяет метод отрисовки рамки
|
VOID - Убрать наружную часть рамки.
ABOVE - Показывает верхнюю границу таблицы.
BELOW - Показывает нижнюю границу таблицы.
HSIDES - Показывает верхнию и нижнюю границу таблицы.
LHS - Показывает левую границу таблицы.
RHS - Показывает правую границу таблицы.
VSIDES - Показывает левую и правую границу таблицы.
BOX - Показывает полную рамку таблицы.
BORDER - Показывает полную рамку таблицы.
|
RULES
|
NONE, GROUPS, ROWS, COLS, ALL
|
Определяет как будут показаны разделительные линии ( внутренние границы ) таблицы
|
NONE - Устраняет все границы внутри таблицы.
GROUPS - Показывает горизонтальные границы между всеми группами таблицы. GROUPS определены элементами THEAD, TBODY, TFOOT, и COLGROUP
ROWS – Показывает горизонтальные границы между всеми рядами таблицы.
COLS – Показывает вертикальные границы между всеми колонками таблицы.
ALL - Показывает все границы.
|
Атрибуты TD, TH:
имя атрибута
|
возможные значения
|
смысл
|
примечания
|
NOWRAP
|
|
подавляет перенос слов
|
эквивалентно использованию непрерывных пробелов ( ) вместо обычных пробелов в пределах содержимого ячейки
|
ROWSPAN
|
целое
|
число строк, перекрываемых ячейкой
|
по умолчанию 1
|
COLSPAN
|
целое
|
число столбцов, перекрываемых ячейкой
|
по умолчанию 1
|
COLSPEC
|
|
ширина колонок в символах или в процентах
|
например COLSPEC="20%"
|
ALIGN
|
LEFT, CENTER, RIGHT, JUSTIFY, CHAR
|
горизонтальное выравнивание данных в ячейке
|
по умолчанию LEFT или атрибут ALIGN во включающем элементе TR,
Если задано ALIGN=”CHAR”, то задается свойство CHAR=”.”, с указанием относительно какого символа выравнивать.
Свойство CHAROFF=Length заставляет сдвигать ячейки, не содержащие заданного символа
|
VALIGN
|
TOP, MIDDLE, BOTTOM, BASELINE
|
вертикальное выравнивание данных в ячейке
|
перекрывается атрибутом VALIGN во включающем элементе TR
|
WIDTH
|
целое
|
ширина ячейки в пикселях
|
броузер использует это значение, если оно не конфликтует с требованиями ширины в соседних ячейках в том же самом столбце
|
HEIGHT
|
целое
|
высота ячейки в пикселях
|
броузер использует это значение, если оно не конфликтует с требованиями высоты для других ячеек в той же самой строке
|
BACKGROUND, BGCOLOR, BORDERCOLOR, BORDERCOLORLIGHT, BORDERCOLORDARK
|
Аналогично атрибутам TABLE
|
Атрибуты TR только ALIGN, VALIGN – аналогично для TD, TH
Пример:
Потребление пива сотрудниками вневедомственной охраны пивзавода
Ф.И.О |
литров |
сорт |
Иванов Иван Иванович |
133 |
Хейнекен |
<TABLE>
<CAPTION>потребление пива сотрудниками вневедомственной охраны
пивзавода</CAPTION>
<TR><TH>Ф.И.О</TH>
<TH>литров</TH>
<TH>сорт</TH>
</TR>
<TR><TD> Иванов Иван Иванович </TD>
<TD ALIGN=CENTER >133</TD>
<TD>Хейнекен</TD>
</TR>
</TABLE>
Атрибуты <TABLE>:
BORDER=2 - Ширина рамки в пикселях
ALIGN=CENTER
CELLPADDING=5 – расстояние между содержимым ячеек и границей таблицы
CELLSPACING=5 – расстояние между ячейками таблицы
WIDTH="50%" - ширина таблицы в пикселях или относительно размера окна просмотрщика в процентах
COLS=4 –Количество столбов в таблице
Клетка может занимать несколько строк или столбцов. Для этого используются аттрибуты ROWSPAN или COLSPAN в теге <TH> или <TD>. Для задания ширины таблицы или колонки используется аттрибут WIDTH, который может быть задан в процентах или пикселях. Вот пример:
образец таблицы
|
средний
|
повышенная пушистость
|
рост
|
вес
|
самцы
|
29см
|
6.2кГ
|
40%
|
самки
|
25см
|
4.9кГ
|
43%
|
<CENTER><TABLE BORDER=2 ALIGN=CENTER CELLPADDING=5 WIDTH="50%" >
<CAPTION><I>образец таблицы</I></CAPTION>
<TR><TH ROWSPAN="2"></TH>
<TH COLSPAN="2">средний</TH>
<TH ROWSPAN="2">повышенная
<BR>пушистость</TH>
</TR>
<TR><TH>рост</TH>
<TH>вес</TH>
</TR>
<TR><TH>самцы</TH>
<TD>29см</TD>
<TD>6.2кГ</TD>
<TD>40%</TD>
</TR>
</TABLE></CENTER>
<COL>
<COL ALIGN= {CENTER | LEFT | RIGHT} SPAN= n >
Задание свойств одного или более столбцов таблицы. Используется совместно с командой COLGROUP.Параметры, определяемые командой COL, "сильнее" параметров команды COLGROUP.
<COLGROUP>
Свойства, заданные командой COLGROUP, переопределяются комндой COL. Эта команда влияет на отрисовку линий, определяемых атрибутом RULES= команды TABLE.
<COLGROUP ALIGN={CENTER | LEFT | RIGHT}.SPAN= n - Задание числа последовательных столбцов.>
Пример :
<TABLE>
<COLGROUP ALIGN=RIGHT><COLGROUP SPAN=2 ALIGN=LEFT>
<TBODY>
<TR>
<TD>This column is in the first group and is right-aligned</TD>
<TD>This column is in the second group and is left-aligned</TD>
<TD>This column is in the second group and is left-aligned</TD>
</TR>
</TABLE>
Пример :
<TABLE>
<COLGROUP><COL ALIGN=RIGHT><COL ALIGN=LEFT>
<COLGROUP><COL ALIGN=CENTER>
<TBODY>
<TR>
<TD>This is the first column in the group and is right-aligned.</TD>
<TD>This is the second column in the group and is left-aligned.</TD>
<TD>This column is in a new group and is centered.</TD>
</TR>
</TABLE>
|