Приветствую Вас, Гость

Работа с фоновыми изображениями и цветами

Значение, присвоенное атрибуту bordercolor в дескрипторе <table>, изменяет цвет границы вокруг таблицы и границ вокруг ячеек - за исключением тех ячеек, дескрипторы <td> которых содержат свои собственные атрибуты bordercolor. Следовательно, если вы хотите, чтобы Web-браузер нарисовал зеленую границу вокруг отдельной ячейки в таблице - вне зависимости от цвета границ вокруг других ячеек в таблице или вокруг самой таблицы -добавьте атрибут bordercolor в дескриптор <td> ячейки. Например, чтобы дать Web-браузеру указание нарисовать зеленую границу вокруг ячейки, дескриптор <td> этой ячейки должен выглядеть следующим образом:

<td bordercolor="#008000">

Для Internet Explorer, в частности, можно указать цвета границы ячейки следующим образом, чтобы верхняя и левая стороны ячейки были нарисованы зеленым цветом, а нижняя и правая стороны — светло-зеленым:

<td bordercolorlight="#00FF00" bordercolordark="#008000">

ПРИМЕЧАНИЕ: Хотя все Web-браузеры поддерживают использование атрибута bordercolor в дескрипторе <table>, многие их них не поддерживают использование атрибутов bordercolor, bordercolorlight и  bordercolordark в дескрипторе <td>. В связи с этим разрабатывайте свои таблицы в соответствии с предположением, что многие из посетителей вашего Web-сайта будут видеть границу вокруг каждой ячейки того же цвета (цветов), что и граница по периметру самой таблицы.

Поскольку фоновые изображения и цвета — это "атрибуты" таблицы или ячейки внутри таблицы, они задаются (в форме атрибута border) как часть HTML-дескриптора. (Элементы Web-страниц, такие как таблицы, строки, данные и т.д., имеют свои собственные HTML-дескрипторы, тогда как атрибуты всегда находятся внутри HTML-дескрипторов.) Поскольку и таблица, и каждая из ее ячеек имеют фон, который можно задать независимо, пожалуй, самый простой способ понять, как взаимодействуют между собой фон таблицы и фон каждой из ее ячеек — это представлять их себе как накладываемые друг на друга. На рис. 2.12, например, показаны четыре таблицы. Две таблицы в верхней части рисунка суть таблица с фоновым цветом и таблица с фоновым изображением. Две таблицы в нижней части рисунка показывают, что произойдет, если дать Web-браузеру указание нарисовать некоторые из ячеек таблицы с фоновым цветом или фоновым изображением.
Фон таблицы — это прямоугольный объект, лежащий поверх Web-страницы, по- добно подложке в кадре. Отдельные объекты данных прямоугольной формы внутри таблицы — определенные начальным и конечным дескрипторами данных таблицы (<td></td>) — называются ячейками (cells). Таблица лежит поверх фона Web-страницы; каждая из ячеек таблицы представляет собой прямоугольный объект, лежащий поверх фона таблицы. Содержимое, помещаемое в ячейку (путем помещения текста и/или HTML-дескрипторов между начальным и конечным дескрипторами данных таблицы (<td></td>) ячейки), в свою очередь, лежит поверх фона ячейки.

Рис. 2.12. Таблица с фоновыми цветами и изображениями, накрытая ячейками с фоновыми цветами и изображениями

ПРАКТИКУМ

Когда вы указываете цвет фона таблицы, задавая атрибут bgcolor в дескрипторе <table> таблицы, Web-браузер "закрашивает" присвоенным атрибуту цветом по умолчанию прозрачный фон таблицы. Например, в следующем дескрипторе <table> атрибут bgcolor, установленный равным шестнадцатеричному значению "#0000FF", дает Web-браузеру указание закрасить фон таблицы голубым цветом:

<table border="1" bgcolor="#0000FF">

Аналогично, если задать в дескрипторе <table> атрибут background, Web-браузер будет использовать графический файл, присвоенный атрибуту, в качестве "обоев" для фона таблицы. Например, в следующем коде  атрибут background дает Web-браузеру указание "накрыть" фон таблицы рисунком из файла picture.gif, который хранится в подпапке images Web-сайта:

<table border="1" background="images/picture.GIF">

Поскольку каждая из ячеек таблицы, как и сама таблица, имеет фон, цвет фона или фоновое изображение ячейки задаются в виде атрибута в дескрипторе <td> ячейки. Следовательно, независимо от фонового цвета или изображения (если таковые имеются), установленного для таблицы, вы можете дать Web-браузеру указание закрасить фон ячейки определенным цветом, присвоив значение этого цвета в виде шестнадцатеричного числа атрибуту bgcolor в дескрипторе <td> ячейки. Например, шестнадцатеричное значение "#00008В", присвоенное атрибуту bgcolor в следующем дескрипторе <td>, дает Web-браузеру указание закрасить фон ячейки темно-синим цветом:

<td bgcolor="#00008B">

Аналогично, если задать в дескрипторе <td> ячейки атрибут background, Web-браузер будет использовать файл, присвоенный атрибуту, в качестве "обоев" для фона ячейки. Например, в следующем дескрипторе <td> атрибут background дает Web-браузеру указание "накрыть" фон ячейки рисунком из файла picture.gif,  который хранится в подпапке images Web-сайта:

<td  background="images/picture.gif">

Хотя синтаксис HTML этому не препятствует, не имеет смысла задавать и цвет фона, и фоновое изображение для одной и той же таблицы или ячейки. Если же вы зададите и цвет, и изображение, "победу" одержит тот атрибут, который будет стоять в дескрипторе <table> последним — примерно так же, как при поклейке обоев на окрашенную стену или покраске обоев. То, что накладывается на фон последним (иными словами, верхний слой), и будет видеть пользователь. И напротив, если в дескрипторе <td> ячейки нет ни атрибута background, ни атрибута bgcolor, Web-браузер нарисует фон ячейки так, как будто это прозрачный лист стекла, лежащий поверх фона таблицы. Следовательно, "сквозь" прозрачный фон ячейки будет виден фон таблицы.
Подобным образом, поскольку фон таблицы лежит поверх фона Web-страницы, фоновое изображение или цвет таблицы скрывают цвет или рисунок, используемый в качестве фона Web-страницы. И наоборот, если в дескрипторе <table> таблицы не задан ни атрибут background, ни атрибут bgcolor, Web-браузер нарисует фон таблицы так, как будто это прозрачный лист стекла, лежащий поверх фона Web-страницы. Следовательно, "сквозь" прозрачный фон таблицы будет виден фон Web-страницы. Кстати, несмотря на то, что это могло бы оказаться довольно-таки оригинальным эффектом, если вы не зададите ни цвета, ни изображения для фона Web-страницы, вы не будете видеть "подложку" своего монитора. Вместо этого Web-браузер установит белый либо серый фон Web-страницы — в зависимости от настроек по умолчанию браузера.
Хотя браузеры в настоящее время поддерживают атрибут background в дескрипторах <table> и <td>, стандарт HTML не разрешает использовать атрибут background ни с дескриптором <table>, ни с дескриптором <td>. Более того, атрибут bgcolor — нерекомендованный с момента появления HTML 4.01 — официально объявлен незаконным в стандарте XHTML 1.0. Для задания фонового изображения таблицы либо ячейки действующие стандарты HTML (и XHTML) требуют применять свойство CSS background-image. Например, чтобы указать изображение, которое Web-браузер должен использовать в качестве фона таблицы, в дескриптор <table> нужно вставить атрибут style, как показано ниже:

<table border="1"
style="background-image:url(images/picture.GIF)">
Аналогично, чтобы задать фоновое изображение для ячейки, установите значение свойства background-image с помощью атрибута style в дескрипторе <td> следующим образом:

<td style="background-image:url(images/picture.GIF)">

Свойство CSS background-color позволяет выбрать цвет для фона таблицы и/или фона любой ее ячейки. Например, чтобы задать в качестве цвета фона таблицы цвет морской волны, нужно установить свойство background-color в дескрипторе <table> следующим образом:

<table border="1" style="background-color:#00FFFF">

Аналогично, чтобы задать в качестве цвета фона ячейки таблицы темно-синий, например, необходимо с помощью атрибута style установить значение свойства background-color в дескрипторе <td> следующим образом:

<td style="background-color:#00008B">