Оглавление

Создание рамки вокруг таблицы без использования HTML-атрибута border

С помощью HTML-атрибута можно создать лишь стандартную невыразительную рамку, поэтому использовать его не рекомендуется. Вместо этого можно воспользоваться средствами CSS – это дает гораздо большую свободу выбора визуального оформления. Следующий код задает рамку для таблицы:

.datatable {
border: 1px solid #338BA6;
}


Применение данного правила стиля создает вокруг таблицы светлоголубую рамку толщиной в один пиксел, как показано на рис. 5.3.

 

Добавление рамки для таблицы

Рис. 5.3. Добавление рамки для таблицы в целом с помощью CSS


Можно также определить рамки для индивидуальных ячеек:

.datatable td, .datatable th {
border: 1px solid #73C0D4;
}


Применение данного правила стиля приводит к отображению чуть более светлой рамки вокруг ячеек td и th класса datatable, как показано на рис. 5.4.

 

Добавление рамки для отдельных ячеек с помощью CSS

Рис. 5.4. Добавление рамки для отдельных ячеек с помощью CSS

 
Обсуждение
Экспериментируя с различными значениями CSS-свойств, задающих параметры табличных рамок, можно добиться множества притягивающих внимание визуальных эффектов, пусть даже таблица содержит совершенно прозаические данные! Можно использовать рамки разных цветов для ячеек с заголовками и обычных ячеек, а также изменять толщину и вид рамки ячеек. При желании можно использовать для верхней и левой частей рамки один оттенок цвета, а для нижней и правой – другой.

 

Свойство border-style может принимать множество различных значений. Мы уже знакомы со значением solid, используемым для отображения сплошной рамки; это и другие значения и результат их обработки показан в табл. 5.1.

 
Таблица 5.1. Значения CSS-свойства border-style

double

double

groove

groove

inset

inset

outset

outset

ridge

ridge

solid

solid

dashed

dashed

dotted

dotted(1)

none

none/hidden

Примечания:
  • Internet Explorer 6 ведет себя немного странно: при задании значения dotted для рамки толщиной в один пиксел она будет отображаться как dashed.
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити