Евгений Резниченко - Спецификация CSS2

1

Если свойство 'width' элементов 'table' или 'inline-table' имеет специфицированное значение (W), отличное от 'auto', вычисленное значение свойства будет больше W и минимальной ширины, требующейся для всех столбцов плюс заполнение и рамки ячеек (MIN).

Если W больше, чем MIN, излишняя ширина должна быть распределена между столбцами.

2Если элементы 'table' или 'inline-table' имеют 'width: auto', вычисленная ширина таблицы будет больше ширины самого большого из содержащих блоков таблицы и MIN. Однако, если максимальная ширина, требуемая для столбцов плюс заполнение ячеек или рамки (MAX) меньше, чем ширина содержащего блока, используется MAX.

Процентные значения ширины столбца являются относительными к ширине таблицы. Если таблица имеет 'width: auto', проценты дают ограничение ширины столбца, которое ПА должен попытаться выдержать. (Очевидно, это не всегда возможно: если ширина столбца '110%', ограничение не может быть выполнено.)

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

Высота таблицы задаётся свойством 'height' элемента 'table' или 'inline-table'. Значение 'auto' устанавливает, что высота является суммой высоты рядов плюс заполнение ячеек или рамки. Любые другие значения специфицируют высоту явно; таблица, таким образом, может быть выше или короче, чем высота её рядов. CSS2 не специфицирует вывод в тех случаях, когда специфицированная высота таблицы отличается от высоты содержимого, особенно когда высота содержимого может перекрыть специфицированную высоту; или как излишнее пространство должно распределиться между рядами для заполнения высоты таблицы; или, если высота содержимого превосходит специфицированную высоту таблицы, должен ли ПА предоставить механизм прокрутки.

Примечание. Будущие версии CSS могут специфицировать это.

Высота бокса элемента 'table-row' вычисляется однократно сразу после получения ПАгентом всех ячеек ряда: это максимальная специфицированная рядом 'height' и минимальная высота (MIN), затребованная ячейками. Значение 'height' - 'auto' для 'table-row' означает, что вычисленная высота ряда - MIN. MIN зависит от высоты боксов ячеек и выравнивания бокса ячейки (очень походит на вычисление высоты строчного бокса). CSS2 не определяет, к чему относятся процентные значения 'height', специфицированные для рядов и групп рядов таблицы.

В CSS2 высота бокса ячейки - это максимальное из свойств 'height' ячеек таблицы и минимальная высота, требуемая содержимым (MIN). Значение 'auto' для 'height' подразумевает вычисленное значение MIN. CSS2 не определяет, к чему относятся процентные значения 'height', когда они определены для ячеек таблицы.

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

Свойство 'vertical-align' каждой ячейки таблицы определяет её выравнивание в ряду. Содержимое каждой ячейки имеет baseline/базовую линию, top/верх, middle/середину и bottom/низ, как и сам ряд.

В контексте таблиц значения 'vertical-align' имеют следующий смысл:

baseline

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

top

Верх бокса ячейки выровнен с верхом первого из рядов, которые она захватывает.

bottom

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

middle

Центр ячейки выровнен с центром рядов, которые она захватывает.

sub, super, text-top, text-bottom

Эти значения не применяются к ячейкам; вместо этого ячейка выравнивается по базовой линии.

Базовая линия ячейки это базовая линия первого строчного бокса в ячейке. Если никакого текста нет, базовая линия - это базовая линия какого-либо объекта, отображаемого в ячейке или, если такого объекта нет, - низ бокса ячейки. Максимальное расстояние между верхом бокса ячейки и базовой линией всех ячеек, имеющих 'vertical-align: baseline', используется для установки базовой линии ряда. Вот пример:

Диаграмма показывает действие различных значений 'vertical-align' в ячейках таблицы.

Боксы ячеек 1 и 2 выровнены по их базовым линиям. Бокс ячейки 2 имеет бoльшую высоту относительно базовой линии и поэтому определяет базовую линию ряда. Заметьте, что если нет ни одного бокса ячейки, выровненного по базовой линии, у ряда не будет (не нужна) базовой линии.

Чтобы исключить неоднозначные ситуации, выравнивание ячеек происходит в следующем порядке:

1Сначала позиционируются ячейки, выровненные по их базовым линиям. Это устанавливает базовую линию ряда. Затем позиционируются ячейки с 'vertical-align: top'.

2Ряд имеет теперь верх, возможно - базовую линию и предварительную высоту, которая является расстоянием от верха (таблицы) до низа самой нижней ячейки. (См. ниже условия для заполнения ячеек.)

3Если какая-либо из оставшихся ячеек, выровненных по низу или по середине, имеет высоту большую, чем текущая высота ряда, то высота ряда будет увеличена до максимума этой ячейки путём опускания низа (таблицы).

4Наконец, позиционируются оставшиеся ячейки.

Боксы ячеек, которые меньше, чем высота ряда, получают дополнительное заполнение вверху или внизу.

Горизонтальное выравнивание содержимого ячейки в боксе ячейки специфицируется свойством 'text-align'.

Если значение свойства 'text-align' для более чем одной ячейки в столбце установлено в , содержимое этих ячеек выравнивается вдоль вертикальной оси. Начало строки касается этой оси. Направление письма определяет, расположена строка слева или справа от оси.

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

Если значение 'text-align' ячейки таблицы это строка, но строка не появляется в содержимом ячейки, то конец содержимого ячейки соприкасается с вертикальной осью выравнивания.

Заметьте, что строки не должны быть теми же самыми для каждой ячейки, хотя, как правило, это и так.

CSS не предоставляет способа специфицировать смещение оси вертикального выравнивания относительно края бокса столбца.

Следующая таблица стилей:

TD { text-align: "." } TD:before { content: "$" }

создаст столбец знаков доллара в следующей таблице HTML:

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