Основные заголовки

Основной заголовок таблицы представляет собой, как и можно ожидать, короткий фрагмент текста, описывающий суть содержимого таблицы. Следовательно, диаграмма биржевых котировок за четвертый квартал 2003 года могла бы иметь элемент основного заголовка такого содержания «Рост курса акций в 4 квартале 2003 г.». С помощью свойства caption-side этот элемент можно поместить или над, или под таблицей независим от того, где находится заголовок в структуре таблицы. (В HTML элементу caption должен предшествовать открывающий элемент table, но в других языках могут быть другие правила.)

Основные заголовки немного необычны, по крайней мере с визуальной точки зрения. Спецификация CSS утверждает, что основной заголовок форматируется так, как если бы он являлся блочным элементом, размещенным непосредственно перед (или после) блока таблицы, за некоторыми исключениями. Во-первых, основной заголовок все-таки может наследовать значения свойств таблицы, во-вторых, агент пользователя игнорирует блок основного заголовка, если ему требуется решить, что делать с элементом вставки, предшествующим таблице. Следовательно, элемент вставки, располагающийся перед таблицей, не войдет ни в основной заголовок, ни в таблицу, но будет интерпретироваться так, как если бы его свойство display имело значение block.


Простого примера должно быть достаточно для иллюстрации наиболее важных аспектов представления основного заголовка:

caption {background: gray; margin: 1em 0;
caption-side: top;}
table {color: white; background: black; margin: 0.5em 0;}

Текст элемента caption наследует значение white свойства color от таблицы, а фон основной заголовок получает собственный. Интервал между внешним краем рамки таблицы и внешним краем поля основного заголовка составляет один em, поскольку верхнее поле таблицы и нижнее поле заголовка свернулись. Наконец, ширина заголовка соответствует ширине содержимого элемента table, который считается блоком-контейнером заголовка. То же самое получится, если изменить значение caption-side на bottom, за исключением того, что заголовок расположился бы под блоком таблицы, и сворачивание будет иметь место между верхним полем основного заголовка и нижним полем таблицы.

По большей части основные заголовки оформляются точно так же, как и любой блочный элемент; они могут иметь отступы, рамки, фон и т. д. Например, для изменения горизонтального выравнивания текста заголовка применяется свойство text-align. Таким образом, чтобы выровнять по правому краю основной заголовок в предыдущем примере, можно написать:

caption {background: gray; margin: 1em 0;
caption-side: top; text-align: right;}

И в середине 2006 г.


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

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Автоматическая компоновка
Анонимные объекты таблицы
Визуальная организация таблицы
Выравнивание
Высота

Вернуться в раздел: CSS / 11. Верстка таблиц