РАЗДЕЛ 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>
...
На экране это выглядит следующим образом:
НЕ КАЖЕТСЯ ЛИ ВАМ, | ЧТО ЭТА ТАБЛИЦА |
НАПОМИНАЕТ | ШМЕЛЯ!!! |