17.3 Селекторы столбцов
Ячейки таблицы могут принадлежать двум контекстам: строкам и столбцам. Однако в исходном документе ячейки являются наследующими элементами строк, а не столбцов. Тем ни менее, на некоторые свойства ячеек оказывают влияние свойства столбцов.
Следующие свойства применяются к элементам столбцов и групп столбцов:
'border'
Различные свойства границы применяются к столбцам, только если для свойства 'border-collapse' в элементе таблицы установлено значение 'collapse'. В этом случае границы устанавливаются вокруг столбцов, а группы столбцов передаются в алгоритм разрешения конфликтов, который выбирает стили границ для каждого края ячейки.
'background'
Свойства фона определяют фон для ячеек в столбце, но только если ячейка и строка имеют прозрачный фон. См. раздел "Слои и прозрачность таблицы".
'width'
Свойство 'width' определяет минимальную ширину столбца.
'visibility'
Если свойству столбца 'visibility' присвоено значение 'collapse', ни одна ячейка столбца не представляется, а ячейки, охватывающие другие столбцы, урезаются. Кроме того, ширина таблиц уменьшается на ширину этого столбца. См. ниже раздел "Динамические эффекты". Другие значения свойства 'visibility' не имеют влияния.
Пример(ы):
Вот несколько примеров правил, определяющих свойства столбцов. Первые два правила реализуют атрибут "rules" HTML 4.0, имеющий значение "cols". Третье правил выделяет столбец "totals" синим цветом, а последние два правила указывают способ фиксирования размера столбца, используя алгоритм фиксированного расположения.
COL { border-style: none solid }
TABLE { border-style: hidden }
COL.totals { background: blue }
TABLE { table-layout: fixed }
COL.totals { width: 5em }
17.4 Таблицы в модели визуального форматирования
В терминах модели визуального форматирования таблица может работать как элемент уровня блока или как замененный элемент уровня строки. Таблица имеет содержимое, поля внутри ячейки, границы и поля.
В обоих случаях элемент таблицы генерирует анонимный блок, который содержит сам блок таблицы и блок заголовка (если таковой имеется). Блоки таблицы и заголовка сохраняют прежние области содержимого, поля внутри ячеек, поля и границы, а прямоугольный анонимной блок имеет минимальные размеры, необходимые для вмещения обоих полей. Вертикальные поля перекрываются в месте соприкосновения блока таблицы и блока заголовка. При различных перемещениях таблицы должен перемещаться весь анонимный блок, а не только блок таблицы, чтобы заголовок тоже перемещался вместе с таблицей.
[D]
Схема таблицы, в верхней части которой находится заголовок; нижнее поле заголовка перекрывается верхним полем таблицы.
17.4.1 Положение и выравнивание заголовка
'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
}
Если ширина таблицы меньше ширины пространства для отображения, то форматирование примет следующий вид:
[D]
Выровненная по центру таблица с заголовком, выступающим на левое поле в результате отрицательного значения свойства 'margin-left'.