вернуться на главную страницу

РАЗДЕЛ 5. Цвета в таблице.

До недавнего времени не было возможности управлять цветами таблицы на Web - странице. Сетка таблицы была черной, фон совпадал по цвету с фоном остальной страницы. Было очень трудно выделить какую - то ячейку другим цветом или использовать разные цвета.

Теперь существует ряд новых тегов, позволяющих задавать цвета фона и сетки таблицы. В первом случае ключевое слово BGCOLOR вставляется в тег <TABLE> следующим образом:

<TABLE BORDER BGCOLOR="YELLOW">

...

</TABLE>

Теперь цвет фона всей таблицы будет желтый.

Кроме ключевого слова BGCOLOR, существуют и другие способы управлять цветом:

BORDERCOLOR - изменяет цвет сетки таблицы;

BORDERCOLORDARK/BORDERCOLORLIGHT - используется для изменения цвета сетки с дополнительным эффектом трехмерности. Если установлены эти атрибуты, Ваша таблица выглядит трехмерной. Поэкспериментируйте с этой установкой, задав широкое обрамление (BORDER=6).

Рассмотрим простой пример использования всех новых ключевых слов сразу:

<TABLE BORDER BGCOLOR="YELLOW"

BORDERCOLOR="RED" BORDERCOLORDARK="BLUE"

BORDERCOLORLIGHT="GREY">

...

</TABLE>

Как видите, эти ключевые слова предоставляют много возможностей изменять внешний вид таблицы. Но это еще не все! Вы можете задавать эти ключевые слова для каждой строки или ячейки. В приведенном ниже HTML-коде цвет каждой ячейки задается отдельно:

...

<TABLE BORDER=2>

<TR>

<TD BGCOLOR="YELLOW">НЕ КАЖЕТСЯ ЛИ ВАМ,</TD>

<TD BGCOLOR="BLACK"><FONT COLOR="YELLOW">

ЧТО ЭТА ТАБЛИЦА</FONT></TD>

</TR>

<TR>

<TD BGCOLOR="BLACK"><FONT COLOR="YELLOW">

НАПОМИНАЕТ</FONT></TD>

<TD BGCOLOR="YELLOW">ШМЕЛЯ!!!</TD>

</TR>

</TABLE>

...

На экране это выглядит следующим образом:

НЕ КАЖЕТСЯ ЛИ ВАМ, ЧТО ЭТА ТАБЛИЦА
НАПОМИНАЕТ ШМЕЛЯ!!!

Кроме этого можно указать ширину таблицы точно, в пикселях, или в процентном отношении к ширине страницы в окне броузера.

Например:

WIDTH="300"

WIDTH="50%"

В HTML - коде:

...

<TABLE BORDER=2 WIDTH="300">

<TR>

<TD BGCOLOR="YELLOW">НЕ КАЖЕТСЯ ЛИ ВАМ,</TD>

<TD BGCOLOR="BLACK"><FONT COLOR="YELLOW">

ЧТО ЭТА ТАБЛИЦА</FONT></TD>

</TR>

<TR>

<TD BGCOLOR="BLACK"><FONT COLOR="YELLOW">

НАПОМИНАЕТ</FONT></TD>

<TD BGCOLOR="YELLOW">ШМЕЛЯ!!!;</TD>

</TR>

</TABLE>

...

На экране это выглядит следующим образом:

НЕ КАЖЕТСЯ ЛИ ВАМ, ЧТО ЭТА ТАБЛИЦА
НАПОМИНАЕТ ШМЕЛЯ!!!
 


вернуться на главную страницу