Атрибуты для задания цвета элементам таблиц

Создание таблиц

Для создания таблицы используют тег контейнер <TABLE>...</TABLE>, заключающий в себе другие элементы таблицы: название, заголовки ячеек и их содержимое. Атрибутами контейнера <TABLE> задается формат линии-сетки и общие правила форматирования (общий формат действует, если иной формат не задан атрибутами формата конкретных строк и ячеек).

Данные в таблице организованы построчно, каждая новая строка таблицы задается тегом <TR>...</TR>. Для каждой строки таблицы при помощи специальных атрибутов тега <TR> можно управлять общим форматированием составляющих строку ячеек.

Строки таблицы разбиваются на ячейки при помощи тегов ячеек-заголовков <TH>...</TH> и тегов ячеек-данных <TD>...</TD>. Как и для строк таблицы при помощи специальных атрибутов тегов <TD> и <TH> можно управлять форматированием конкретных ячеек таблицы.

Структура таблицы:

<TABLE> - начало контейнера таблицы
<CAPTION> название таблицы </CAPTION>
<TR> <TH> 1 заголовок </TH>…<TH> N заголовок </TH> </TR> - первая строка / шапка
<TR> <TD> ячейка 1/1 </TD>…<TD> ячейка N/1 </TD> </TR> - 1 строка
<TR> <TD> ячейка 1/i </TD>…<TD> ячейка N/i </TD> </TR> - i строка
<TR> <TD> ячейка 1/M </TD>…<TD> ячейка N/M </TD> </TR> - последняя строка
</TABLE> - конец контейнера таблицы

Таким образом, простейшая таблица, без линий сетки, в HTML-документе определяется следующим образом:

<TABLE>
<CAPTION ALIGN=TOP>Список друзей и подруг</CAPTION>
<TR><TH>ФИО</TH><TH>Телефон</TH></TR>
<TR><TD>Иванов Иван Иваныч</TD><TD>35-35-35</TD></TR>
<TR><TD>Валина Валентина Валентиновна</TD><TD>46-46-46</TD></TR>
</TABLE>

А вот, что у нас получится в окне браузера:

Список друзей и подруг
ФИО	Телефон
Иванов Иван Иваныч	35-35-35
Валина Валентина Валентиновна	46-46-46

 

Атрибуты для форматирования таблиц, ячеек и строк

Атрибут	Теги	Описание
ALIGN	<TABLE>	Общее горизонтальное выравнивание таблицы на странице - LEFT/RIGHT/CENTER
<TR>	Общее выравнивание элементов строки - LEFT/RIGHT/CENTER/CHAR
<TH>	Выравнивание заголовка - LEFT/RIGHT/CENTER/CHAR (по умолчанию CENTER)
<TD>	Выравнивание данных в ячейке - LEFT/RIGHT/CENTER/CHAR (по умолчанию LEFT )
CHAR	ALIGN=CHAR	Задает символ-выравниватель, при использование атрибута выравнивания ALIGN=CHAR. Например: <TR ALIGN=CHAR CHAR=","><TD>1,35</TD></TR>
CHAROFF	ALIGN= CHAR	Задает отступ (в % ширины ячейки или в пикселях) относительно начала ячейки, символов заданных атрибутом CHAR. Например: <TR ALIGN=CHAR CHAR="," CHAROFF="10%"> <TD>1,35</TD><TD>-1,45</TD></TR>
VALIGN	<TABLE>	Общее вертикальное выравнивание элементов таблицы - BOTTOM/MIDDLE/TOP (по умолчанию MIDDLE ).
<TR>	Общее выравнивание элементов строки - BOTTOM/MIDDLE/TOP/BASELINE
<TH>	Выравнивание заголовка - BOTTOM/MIDDLE/TOP
<TD>	Выравнивание данных в ячейке - BOTTOM/MIDDLE/TOP
CELLPADDING	<TABLE>	Свободное пространство между содержимым ячеек и их границами
CELLSPACING	<TABLE>	Свободное пространство между границами смежных ячеек
WIDTH	<TABLE>	Ширина таблицы в пикселях или процентах ширины окна браузера.
<TH>,<TD>	Ширина ячейки таблицы в пикселях или процентах от ширины таблицы.
HEIGHT	<TABLE>	Высота таблицы в пикселях или процентах ширины окна браузера
<TH>,<TD>	Высота ячейки таблицы в пикселях или процентах от ширины таблицы.

Атрибуты для задания цвета элементам таблиц

Атрибут	Теги	Описание
BORDERCOLOR	<TABLE>, <TR>, <TH>, <TD>	Цвет рамки Соответственно областью действия может быть вся таблица, строка или отдельно взятая ячейка.
BGCOLOR	<TABLE>, <TR>, <TH>, <TD>	Цвет фона Соответственно областью действия может быть вся таблица, строка или отдельно взятая ячейка.

Например:

<TABLE BORDER BORDERCOLOR=RED BGCOLOR=YELLOW>...</TABLE>- таблица.

<TR BORDERCOLOR=RED BGCOLOR=YELLOW></TR> - строка.

<TD BORDERCOLOR=RED BGCOLOR=YELLOW></TD> - ячейка.