Атрибут стиля table-layout позволяет указать, как Web-обозреватель будет трактовать размеры, заданные нами для таблицы и ее ячеек:

table-layout: auto|fixed|inherit

— auto — Web-обозреватель может изменить размеры таблицы и ее ячеек, если содержимое в них не помещается. Это обычное поведение.

— fixed — размеры таблицы и ее ячеек ни в коем случае изменяться не будут. Если содержимое в них не помещается, возникнет переполнение, параметры которого мы можем задавать с помощью атрибутов стиля overflow, overflow-x и overflow-y (см. главу 10).

Данный атрибут стиля применяется к самой таблице (тегу <TABLE>).

Пример:

TABLE { table-layout: fixed; overflow: auto }

И еще несколько полезных атрибутов стиля.

Атрибут стиля caption-side указывает местоположение заголовка таблицы относительно самой таблицы:

caption-side: top|bottom|inherit

— top — заголовок располагается над таблицей (обычное поведение).

— bottom — заголовок располагается под таблицей.

Данный атрибут стиля применяется к самой таблице (тегу <TABLE>).

Пример:

TABLE { caption-side: bottom }

Атрибут стиля empty-cells указывает, как Web-обозреватель должен выводить на экран пустые (не имеющие содержимого) ячейки:

empty-cells: show|hide|inherit

— show — пустые ячейки будут выводиться на экран. Если для них был задан другой фон, на экран будет выведен фон, а если заданы рамки, будут выведены рамки.

— hide — пустые ячейки не будут выводиться на экран.

Обычное поведение зависит от Web-обозревателя, так что, если это критично, лучше явно задать нужное значение атрибута стиля empty-cells.

Атрибут стиля empty-cells также применяется к самой таблице (тегу <TABLE>).

Пример:

TABLE { empty-cells: hide }

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

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

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

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

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

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

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

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

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

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

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

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

Что дальше?

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

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

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

В этой главе, последней в данной части, мы поговорим о селекторах стилей. Да-да, тех самых селекторах, с которыми мы познакомились еще в главе 7 и о которых, казалось, знаем все (ну, или почти все). Стили переопределения тегов, стилевые классы, именованные и комбинированные стили — что там может быть нового?