Представление для нашего Web-сайта, часть 7

Представление для нашего Web-сайта, часть 7

Вот, собственно, и все атрибуты стиля, задающие параметры таблиц. Теоретическая часть данной главы оказалась совсем короткой…

В качестве практики давайте поработаем над нашей единственной таблицей — списком версий HTML. Сделаем ее более удобочитаемой.

Сначала, как обычно, сформулируем перечень ее параметров.

— Внешние отступы сверху и снизу таблицы — 10 пикселов. Пусть таблица будет визуально отделена от "соседей".

— Рамка вокруг самой таблицы — тонкая, сплошная, цвет #B1BEC6.

— Будут выводиться только рамки, разделяющие ячейки. Таблицы с такими рамками более привычны.

— Внутренние отступы в ячейках — 2 пиксела.

— Рамки ячеек — тонкие, точечные, цвет #B1BEC6.

— Выравнивание текста заголовка таблицы — по левому краю.

Осталось написать CSS-код. Листинг 12.4 содержит исправленный фрагмент таблицы стилей main.css.

Листинг 12.4

TABLE { font-size: 10pt; margin: 10px 0px; border: thin solid #B1BEC6; border-collapse: collapse }

.

TD, TH { padding: 2px; border: thin dotted #B1BEC6 }

CAPTION { text-align: left }

Здесь мы дополнили стиль переопределения тега <TABLE> и создали стили переопределения тегов <TD>, <TH> и <CAPTION>. Они столь просты, что не требуют комментариев.

Сохраним таблицу стилей main.css и откроем Web-страницу index.htm в Web-обозревателе. И полюбуемся на таблицу. Рамки и отступы явно пошли ей на пользу.

Что дальше?

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

В следующей главе мы завершим изучение CSS рассмотрением специальных се- лекторов. Это невероятно мощное средство, позволяющее привязать стиль к нужному элементу Web-страницы неявно, не пользуясь ни стилевыми классами, ни именованными стилями, предлагает нам стандарт CSS 3. Который все никак не примут…