Работа с шириной границы таблиц и ячеек
Граница (border) - это видимая линия по периметру таблицы и вокруг каждой ячейки внутри таблицы. В отличие от фонов таблицы и ячеек, которые являются независимыми, границы таблицы и ячеек взаимосвязаны. Как вы узнаете из следующего практикума, цвета границы таблицы и границы ячеек можно задать независимо. Однако если вы установите ширину границы таблицы равной одному или нескольким пикселям, Web-браузер нарисует границу также вокруг каждой ячейки таблицы. И, напротив, если вы установите атрибут border таблицы равным нулю, Web-браузер не нарисует ни внешней границы таблицы, ни границ по периметру каждой из ячеек внутри нее.
На рис. 2.10 показаны две таблицы. Таблица слева не имеет границ, поскольку значение атрибута border в ее дескрипторе <table> установлено равным "0". В то же время таблица справа на рисунке имеет границу шириной в один пиксель по периметру границы и вокруг каждой ее ячейки, поскольку значение атрибута border в ее дескрипторе <table> установлено равным "1" .
Рис. 2.10. Таблицы без границ и с границами шириной один пиксель
Примите к сведению, что в стандарте языка HTML граница вокруг таблицы называется рамкой (frame), а границы вокруг отдельных ячеек внутри таблицы — линейками (rules). Задание атрибутов bordercolor (цвет границы) и/или border в дескрипторе <table> воздействует и на рамку таблицы, и на линейки ячеек. Например, задание border="0" подразумевает frame="void" (рамки нет) и ruies="none" (линеек нет) — что, в сущности, делает все границы снаружи и внутри таблицы невидимыми. Во время рассмотрения каскадных таблиц стилей (CSS) в главе 4 вы увидите, что новейшие Web-браузеры позволяют управлять атрибутами ячеек отдельно от атрибутов таблицы в целом. Вы научитесь создавать CSS-правила, позволяющие задавать ширину и цвет рамки таблицы независимо от линеек (то есть границ) вокруг ячеек таблицы.
ПРАКТИКУМ
Ранее в этой главе вы узнали, как нарисовать границу шириной в 1 пиксель вокруг таблицы и ячеек внутри таблицы, задав атрибут border в дескрипторе <table> таблицы следующим образом:
<table border="1">
Чтобы увеличить ширину границы таблицы, просто увеличьте число пикселей, присвоенное атрибуту border в дескрипторе <table> таблицы. Например, чтобы нарисовать вокруг таблицы границу шириной 10 пикселей, установите значение атрибута border в дескрипторе <table> равным "10", результирующая таблица показана на рис. 2.11.
Рис. 2.11. Таблица с границами шириной десять пикселей
Обратите внимание на два интересных эффекта изменения значения атрибута border. Во-первых, хотя ширина границы по периметру таблицы увеличивается с увеличением значения, присвоенного атрибуту border, ширина каждой из границ вокруг ячеек внутри таблицы в то же время остается равной одному пикселю. Вне зависимости от того, насколько широкой вы сделаете границу вокруг таблицы, большинство Web-браузеров нарисуют вокруг каждой из ячеек внутри таблицы границу шириной в один пиксель — за исключением того случая, когда значение атрибута border установлено равным нулю — тогда ни таблица, ни ее ячейки не будут иметь границ. Во-вторых, по умолчанию Web-браузеры рисуют границы и таблицы, и ячеек с использованием двух цветов, пытаясь придать таблице (и ее ячейкам) трехмерный вид. При использовании границы по умолчанию — серой — Web-браузер нарисует левую и верхнюю стороны таблицы светлосерым, а нижнюю и правую стороны таблицы — темно-серым. Web-браузер также использует два цвета — хотя их нелегко различить при их ширине, составляющей обычно один пиксель — при рисовании границ вокруг ячеек внутри таблицы. Левая сторона и верх каждой ячейки — темно-серые, тогда как низ и правая сторона ячейки имеют светло-серый цвет. Научиться устанавливать цвета границ таблицы и ячеек отличными от цветов по умолчанию — серых — вы сможете, ознакомившись со следующим практикумом.