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


Задание стилей нижнего колонтитула


Нижний колонтитул таблицы оформляется, в общем, таким же образом, как и верхний. В данном случае метки "Shipping", "Sales Tax" и "Total" должны быть выровнены вправо, а итоговая строка должна выводиться полужирным шрифтом, с заданным цветом текста и фона. Эти добавления сделаны на листинге 8.50 и показаны на рисунке 8.46.

<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}

table tr#ADDR td {text-align:left; background-color:#FFFFFF} table tr#HEAD td {font-weight:bold; text-align:center; background-color:#A0A0A0; color:#FFFFFF}

table tfoot td {text-align:right} table tfoot tr#TOTAL {font-weight:bold; background-color:#A0A0A0; color:#FFFFFF} </style>

Листинг 8.50. Дополнительные записи таблицы стилей для оформления раздела <tfoot> примера таблицы (html, txt)

Все ячейки в разделе нижнего колонтитула (table tfoot td) должны быть выровнены вправо. Строка нижнего колонтитула, определяемая id="TOTAL" (table tfoot tr#TOTAL), должна выводиться полужирным шрифтом с заданным цветом текста и фона. Здесь также, если все строки и ячейки в разделе <tfoot> оформляются одинаково, это оформление можно применять с помощью одного селектора tfoot.

Таблица с оформлением <tfoot>

Рис. 8.46.  Таблица с оформлением <tfoot>




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