Поиск

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

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

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

Схема таблицы, в верхней части которой находится заголовок; нижнее поле заголовка перекрывается верхним полем таблицы.

Положение и выравнивание заголовка
'caption-side'

Значение: top | bottom | left | right | inherit
Начальное значение: top
Область применения: элементы 'table-caption'
Наследование: да
Процентное значение: N/A
Устройства: визуальные

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

top

Поле заголовка располагается над полем таблицы.

bottom

Поле заголовка располагается ниже поля таблицы.


left

Поле заголовка располагается слева от поля таблицы.


right

Поле заголовка располагается справа от поля таблицы.

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

Заголовок, находящийся ниже или выше поля таблицы, действует также как блок для вычисления ширины; ширина вычисляется относительно ширины содержащего блока таблицы.

Для заголовка, располагающегося в правой или левой части поля таблицы, значение свойства 'width', отличное от 'auto', явным образом устанавливает ширину, в то время как значение '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
}

Если ширина таблицы меньше ширины пространства для отображения, то форматирование примет следующий вид:

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