Основы работы с XHTML и CSS


Задание стилей столбцов


Два отличия в оформлении от основной группы столбцов имеются в третьем столбце quantities и пятом столбце amounts. Содержимое столбца quantities должно быть выровнено по центру, а столбец amounts должен иметь фоновый цвет. Эти переопределения и добавления в оформление группы столбцов показаны на листинге 8.48, который содержит стили для COL3 и COL5 и значения id, присвоенные их соответствующим тегам <col/> (см. листинг 8.46). Рисунок 8.44 показывает применение этих дополнительных стилей.

<style type="text/css"> table {border:outset 1px; border-collapse:collapse} table caption {font:bold 14pt; color:#707070} table td {border:inset 1px; padding:3px}

table colgroup#GROUP1 {width:10%; text-align:center; background-color:#F6F6F6} table colgroup#GROUP3 {width:15%; text-align:right}

table colgroup#GROUP3 col#COL3 {text-align:center} table colgroup#GROUP3 col#COL5 {background-color:#F0F0F0} </style>

Листинг 8.48. Дополнительные записи таблицы стилей для указанных столбцов примера таблицы

Таблица с применением индивидуального оформления столбцов

Рис. 8.44.  Таблица с применением индивидуального оформления столбцов

Отметим использование контекстных селекторов для указания на теги <colgroup> и <col/> в приведенной выше таблице стилей:

table colgroup#GROUP1 table colgroup#GROUP3 table colgroup#GROUP3 col#COL3 table colgroup#GROUP3 col#COL5

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

colgroup#GROUP1 colgroup#GROUP3 col#COL3 col#COL5




- Начало -  - Назад -  - Вперед -



Книжный магазин