17.4. Таблицы в модели визуального форматирования.

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

В обоих случаях табличный элемент генерирует анонимный блок, который содержит сам табличный блок и блок заголовка таблицы (если есть). Табличный и заголовочный блоки содержат свое собственное содержание, отступы, поля и границы, а размеры прямоугольного анонимного блока - самые маленькие, необходимые только для включения их обоих. Вертикальные поля сжимаются, где соприкасаются табличный блок и заголовочный блок. Любое изменение положения таблицы должно передвигать весь анонимный блок, так как за заголовком следует таблица.

[D]

Диаграмма таблицы с заголовком вверху, нижнее поле заголовка сжимается верхним полем таблицы.

17.4.1. Положение и выравнивание заголовка.

'caption-side'
Тип значения:             top | bottom | left | right | inherit
Начальная величина:       top
Применяется: к элементам 'table-caption'
Наследование:             да
Процентная база:          нет
Медиа:                    визуальные

Это свойство определяет положение заголовочного блока по отношению к табличному блоку. Значения свойства следующие:

top

Располагает заголовочный блок над табличным блоком.

bottom

Располагает заголовочный блок ниже табличного блока.

left

Располагает заголовочный блок слева от табличного блока.

right

Располагает заголовочный блок справа от табличного блока.

Заголовки выше или ниже элемента 'table' форматируются также часто, как если бы они были блочными элементами перед или после таблицы, исключая то, что (1) они принимают наследуемые свойства от таблицы, и (2) они не рассматриваются как блочные блоки для любого элемента 'compact' или 'run-in', которые могут предшествовать таблице.

Заголовок, который находится выше или ниже табличного блока тоже ведет себя как блочный элемент для расчетов ширины; ширина рассчитывается с учетом ширины объемлющего блока для табличного.

Для заголовка, который расположен слева или справа от табличного блока, со значением, отличающимся от 'auto' для 'width', ширина устанавливается явным образом, но 'auto' сообщает устройству вывода выбор "разумной ширины". Значение может варьировать между "самым узким возможным блоком" и "одной строкой", так что мы рекомендуем, чтобы пользователи не определяли 'auto' для ширины левого или правого заголовка.

Для выравнивания содержания заголовка внутри его блока, используйте свойство 'text-align'. Для вертикального выравнивания левого или правого заголовочного блока с учетом табличного блока, используйте свойство 'vertical-align'. Употребляйте только точно определяемые значения, в этом случае – 'top', 'middle' и 'bottom'. Все другие значения обрабатываются как 'top'.

В следующем примере свойство 'caption-side' размещает заголовки ниже таблиц. Заголовок будет иметь ширину, как у родительской таблицы, а текст заголовка будет выравниваться по левой стороне.

CAPTION { caption-side: bottom; 
          width: auto;
          text-align: left }

Следующий пример показывает, как размещать заголовок в левом поле. Сама таблица центрируется установкой левого и правого полей как 'auto', а целый блок с таблицей и заголовком смещается в левое поле на то же расстояние, что и ширина заголовка.

BODY {
    margin-left: 8em
}
TABLE {
    margin-left: auto;
    margin-right: auto
}
CAPTION {
    caption-side: left;
    margin-left: -8em;
    width: 8em;
    text-align: right;
    vertical-align: bottom
}

Принимаемая ширины таблицы - меньше, чем доступна в реальности, и форматирование будет похоже на рисунок ниже:

[D]

Диаграмма показывает расположенную по центру таблицу с заголовком, смещенным в левое поле, как результат отрицательного свойства 'margin-left'.