| |
икселей
\ Заголовок 1 ! Заголовок 2 i Заголовок 3
. :Строка 1, элемент 1 |Строка 1, элемент 2 [Строка 1, элемент 3 1
Строка 2, элемент 1 'Строка 2, злемент 2 ртрока 2, элемент 3 |
Рис. 2.11. Таблица с границами шириной десять пикселей
Обратите внимание на два интересных эффекта изменения значения атрибута
border. Во-первых, хотя ширина границы по периметру таблицы увеличивается с
увеличением значения, присвоенного атрибуту border, ширина каждой из гра-
ниц вокруг ячеек внутри таблицы в то же время остается равной одному пиксе-
лю. Вне зависимости от того, насколько широкой вы сделаете границу вокруг
таблицы, большинство Web-браузеров нарисуют вокруг каждой из ячеек внутри
таблицы границу шириной в один пиксель — за исключением того случая, когда
значение атрибута border установлено равным нулю — тогда ни таблица, ни ее
ячейки не будут иметь границ. Во-вторых, по умолчанию Web-браузеры рисуют
границы и таблицы, и ячеек с использованием двух цветов, пытаясь придать таб-
лице (и ее ячейкам) трехмерный вид. При использовании границы по умолча-
нию — серой — Web-браузер нарисует левую и верхнюю стороны таблицы светло-
серым, а нижнюю и правую стороны таблицы — темно-серым. Web-браузер также
использует два цвета — хотя их нелегко различить при их ширине, составляющей
обычно один пиксель — при рисовании границ вокруг ячеек внутри таблицы. Ле-
Глава 2. HTML-таблицы . 93
вая сторона и верх каждой ячейки — темно-серые, тогда как низ и правая сторо-
на ячейки имеют светло-серый цвет. Научиться устанавливать цвета границ таб-
лицы и ячеек отличными от цветов по умолчанию — серых — вы сможете, озна-
комившись со следующим практикумом.
Работа с цветами границ таблицы и ячеек
Как вы уже знаете, граница (border) — это видимая линия по периметру таб-
лицы и вокруг каждой из ячеек внутри таблицы. Границы таблицы и ячеек име-
ют два атрибута, которые вы можете задать — ширина (с которой вы работали в
ходе предыдущего практикума) и цвет. Чтобы настроить цвета границ ячеек и
таблицы, вставьте в дескриптор таблицы атрибут bordercoior. Напри-
мер, чтобы Web-браузер нарисовал темно-синюю границу шириной 10 пикселей
вокруг таблицы и темно-синюю границу шириной один пиксель вокруг каждой
из ее ячеек, задайте атрибут атрибут bordercoior в дескрипторе табли-
цы следующим образом:
К сожалению, задание атрибута bordercoior не приводит к одному и тому
же эффекту во всех Web-браузерах. При установке атрибута bordercoior равным
и#оооо8В", например, Netscape Navigator нарисует границы таблицы и ячеек дву-
мя цветами - две стороны голубым и две стороны темно-синим. Internet Explorer
же поддерживает два дополнительных атрибута для управления цветами границы:
bordercoioriight (цвет границы — светлый) и bordercoiordark (цвет грани-
цы — темный). Если вы установите только значение bordercoior, Internet
Explorer нарисует границы таблицы и ячеек, используя только один цвет — в
данном примере темно-синий. (В главе 4, речь в которой пойдет о CSS, вы на-
учитесь создавать CSS-правила, позволяющие управлять атрибутами рамки (то
есть границами вокруг таблицы) независимо от атрибутов границ вокруг ячеек.)
ПРАКТИКУМ
Если вы хотите, чтобы Internet Explorer использовал два разных цвета при рисо-
вании границ таблицы, вам нужно либо опустить атрибут bordercoior из деск-
риптора (тогда Web-браузер будет использовать границы по умол-
чанию — светло-серые/темно-серые), либо задать в дескрипторе
атрибуты bordercoioriight и bordercoiordark. Например, Internet Explorer
проигнорирует задание bordercoior в нижеприведенном дескрипторе и
будет использовать значения, присвоенные атрибутам bordercoioriight и
bordercoiordark, нарисовав верхнюю и левую стороны границы таблицы голу-
бым, а нижнюю и правую стороны границы таблицы — темно-синим:
Атрибуты bordercolorlight И bordercolordark В вышеприведенном КОДе
также дают Internet Explorer указание нарисовать верхнюю и левую стороны гра-
ниц вокруг каждой ячейки голубым, а нижнюю и правую стороны границы —
темно-синим.
94 Глава 2.
^ Включив в дескриптор и атрибут bordercolor, и атрибуты
bordercolorlight и bordercolordark, в
| |
 | [Весь Текст] |
| |  |
|
