Работа с цветами границ таблицы и ячеек
Как вы уже знаете, граница (border) — это видимая линия по периметру таблицы и вокруг каждой из ячеек внутри таблицы. Границы таблицы и ячеек имеют два атрибута, которые вы можете задать — ширина (с которой вы работали в ходе предыдущего практикума) и цвет. Чтобы настроить цвета границ ячеек и таблицы, вставьте в дескриптор <table> таблицы атрибут bordercolor. Например, чтобы Web-браузер нарисовал темно-синюю границу шириной 10 пикселей вокруг таблицы и темно-синюю границу шириной один пиксель вокруг каждой из ее ячеек, задайте атрибут bordercolor в дескрипторе <table> таблицы следующим образом:
<table bordercolor="#00008B">
К сожалению, задание атрибута bordercolor не приводит к одному и тому же эффекту во всех Web-браузерах. При установке атрибута bordercolor равным "#00008B", например, Netscape Navigator нарисует границы таблицы и ячеек двумя цветами - две стороны голубым и две стороны темно-синим. Internet Explorer же поддерживает два дополнительных атрибута для управления цветами границы: bordercolorlight (цвет границы — светлый) и bordercolordark (цвет границы — темный). Если вы установите только значение bordercolor, Internet Explorer нарисует границы таблицы и ячеек, используя только один цвет — в данном примере темно-синий. (В главе 4, речь в которой пойдет о CSS, вы научитесь создавать CSS-правила, позволяющие управлять атрибутами рамки (то есть границами вокруг таблицы) независимо от атрибутов границ вокруг ячеек.)
ПРАКТИКУМ
Если вы хотите, чтобы Internet Explorer использовал два разных цвета при рисовании границ таблицы, вам нужно либо опустить атрибут bordercolor из дескриптора <table> (тогда Web-браузер будет использовать границы по умол- чанию — светло-серые/темно-серые), либо задать в дескрипторе <table> атрибуты bordercolorlight и bordercolordark. Например, Internet Explorer проигнорирует задание bordercolor в нижеприведенном дескрипторе <table> и будет использовать значения, присвоенные атрибутам bordercolorlight и bordercolordark, нарисовав верхнюю и левую стороны границы таблицы голубым, а нижнюю и правую стороны границы таблицы — темно-синим:
<table border="10" bordercolor="#00008B" bordercolorlight="#0000FF" bordercolordark="#00008B">
Атрибуты bordercolorlight и bordercolordark в вышеприведенном коде также дают Internet Explorer указание нарисовать верхнюю и левую стороны границ вокруг каждой ячейки голубым, а нижнюю и правую стороны границы — темно-синим.
ПРИМЕЧАНИЕ: Включив в дескриптор <table>и атрибут bordercolor, и атрибуты bordercolorlight и bordercolordark, вы сможете отображать двухцветные границы как в Internet Explorer, так и в Netscape Navigator. Internet Explorer будет игнорировать атрибут bordercolor и использовать значения атрибутов bordercolorlight и bordercolordark. Netscape Navigator, в то же время, будет игнорировать атрибуты bordercolorlight и bordercolordark и использовать для установки цвета границ таблицы и ячеек значение атрибута bordercolor.
Если посетители вашего сайта будут пользоваться версией Internet Explorer 5 и выше или версией Netscape Navigator 6.1 и выше, вы можете указать цвет каждой стороны таблицы и ее ячеек независимо друг от друга с помощью атрибута style. Например, задав атрибут style в дескрипторе <table>, как показано ниже, вы можете окрасить верхнюю (top) и левую (left) стороны таблицы в темно-синий, в то же время сделав нижнюю (bottom) и правую (right) стороны таблицы голубыми:
<table border="10" style="border-top-color:#0000FF; border-left-color:#0000FF; border-bottom-color:#00008B; border-right-color:#00008B">
Хотя атрибут style в данном примере устанавливает один цвет для верхней и левой сторон и другой цвет для нижней и правой сторон, можно установить каждое из четырех свойств border-color внутри атрибута style равным своему собственному цвету. Чтобы задать один и тот же цвет для всех четырех сторон таблицы, установите значение свойства border-color равным желаемому цвету следующим образом:
<table border="10" style="border-color:#006400">
Точно так же, как вы вставляете атрибут style в дескриптор <table> для работы с цветами сторон таблицы, вы можете вставить style в дескриптор <td>, чтобы таким же образом управлять цветами сторон ячейки. Например, окрасить стороны ячейки в красный, синий, зеленый и пурпурный можно путем задания атрибута style в дескрипторе <td>:
<td style="border-left-color:#FF0000; border-top-color:#0000FF; border-right-color:#008000; border-bottom-color:#FF00FF">
Аналогично, чтобы задать один и тот же цвет для всех сторон ячейки, напри- мер, красный, используйте свойство border-color следующим образом:
<td style="border-color:#FF0000">
Имейте в виду, что использование свойства border-color для задания одного и того же цвета для всех четырех сторон таблицы или всех четырех сторон ячейки на самом деле дает вам два цвета. Если речь идет о сторонах таблицы, и Internet Explorer, и Netscape Navigator нарисуют верхнюю и левую стороны указанным вами цветом, а нижнюю и правую стороны — более темным тоном того же цвета. Аналогично, когда вы задаете с помощью border-color один цвет для всех сторон ячейки, оба браузера отобразят нижнюю и правую стороны ячейки указанным вами цветом, а верхнюю и левую стороны ячейки — более темным тоном того же цвета.