middle
Центр ячейки выровнен с центром рядов, которые она захватывает.
sub, super, text-top, text-bottom
Эти значения не применяются к ячейкам; вместо этого ячейка выравнивается по базовой линии.
Базовая линия ячейки это базовая линия первого строчного бокса в ячейке. Если никакого текста нет, базовая линия - это базовая линия какого-либо объекта, отображаемого в ячейке или, если такого объекта нет, - низ бокса ячейки. Максимальное расстояние между верхом бокса ячейки и базовой линией всех ячеек, имеющих 'vertical-align: baseline', используется для установки базовой линии ряда. Вот пример:
Диаграмма показывает действие различных значений 'vertical-align' в ячейках таблицы.
[D]
Боксы ячеек 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:
Long distance calls |
1.30 |
2.50 |
10.80 |
111.01 |
85. |
90 |
.05 |
.06 |
для выравнивания десятичной точки. Шутки ради, мы использовали псевдоэлемент :before для того, чтобы вставить знак доллара перед каждым значением. Таблица может выглядеть так:
Long distance calls $1.30 $2.50 $10.80 $111.01 $85. $90 $.05 $.06
Свойство 'visibility' принимает значение 'collapse' для элементов ряда, группы рядов, столбца и группы столбцов. Это значение вызывает удаление целого ряда или столбца с экрана, и пространство, нормально занимаемое этим рядом или столбцом, становится доступным для другого содержимого. Подавление ряда или столбца не влияет, однако, на структуру таблицы. Это позволяет динамически удалять столбцы или ряды таблицы без форсирования реструктурирования таблицы для того, чтобы учесть возможные изменения в столбцах.
Имеются две различные модели установки рамок ячейки таблицы в CSS. Одна больше подходит для так называемых раздельных рамок вокруг отдельных ячеек, другая подходит для рамок, которые протянулись от одного конца таблицы до другого. Многие стили рамок могут получены с помощью такой модели, поэтому чаще всего - дело вкуса, какую модель использовать.
'border-collapse'
Значение: collapse | separate | inherit
Начальное: collapse
Применяется: к элементам 'table' и ' inline-table '
Наследуется: да
Процентное: N/A
Носитель: визуальный
Это свойство выбирает модель рамки таблицы. Значение 'separate' выбирает модель раздельных рамок . Значение 'collapse' выбирает модель сжимающихся рамок. Эти модели описаны ниже.
Читать дальше