Правила введения объектов

1. Если родителем элемента table-cell не является элемент table-row, то между элементом table-cell и его родителем вставляется анонимный объект table-row. Введенный объект будет охватывать все последующие сестринские элементы элемента table-cell. Рассмотрим следующие стили и разметку:

system {display: table;}
name, moons {display: table-cell;}

Mercury
0


Анонимный объект table-row вставляется между элементами ячеек и элементом system и охватывает и элемент name, и элемент moons. То же правило действует, даже если родительским элементом является table-row-group. Чтобы расширить пример, добавим следующее:

system {display: table;}
planet {display: table-row-group;}
name, moons {display: table-cell;}


Mercury
0


Venus
0



В этом примере оба набора ячеек будут заключены в анонимный объект table-row, который вставляется между ними и элементами planet.

2.


Если родителем элемента table-row не являются table, inline-table или table-row-group, то между элементом table-row и его родителем вставляется анонимный элемент table. Вставленный объект будет охватывать все последующие сестринские элементы элемента tab-le-row. Рассмотрим следующие стили и разметку:

docbody {display: block;}
planet {display: table-row;}


Mercury
0


Venus
0



Поскольку значение свойства display родителя элемента planet – block, анонимный объект table вставляется между элементами planet и элементом docbody. Этот объект будет охватывать оба элемента planet, потому что они являются последовательными сущностями.

3. Если родителем элемента table-column не является элемент table, inline-table или table-column-group, то между элементом table-column и его родителем вставляется анонимный элемент table. Это правило в основном аналогично только что рассмотренному с поправкой на его ориентированность на столбец.

4. Если родителем элемента table-row-group, table-header-group, table-footer-group, table column-group или table-caption не является элемент table, то между элементом и его родителем вставляется анонимный элемент table.

5.


Если дочерним элементом элемента table или inline-table не является элемент table row-group, table-header-group, table-footer-group, table-row или table-caption, то анонимный элемент table-row вставляется между элементом table и его дочерним элементом. Этот анонимный объект охватывает все последующие сестринские элементы дочернего элемента, которые не являются элементами table-row-group, table-header-group, table-footer group, table-row или table-cap-tion. Рассмотрим следующие стили и разметку:

system {display: table;}
planet {display: table-row;}
name, moons {display: table-cell;}


Mercury
0

Venus
0


Здесь между элементом system и вторым набором элементов name и moons будет вставляться анонимный объект table-row. Элемент planet не охватывается анонимным объектом, потому что значением его свойства display является table-row.

6. Если дочерним элементом элементов table-row-group, table-header-group или table-foote-group не является элемент table-row, то анонимный объект table-row вставляется между элементом и его дочерним элементом.


Этот анонимный объект охватывает все последующие сестринские элементы дочернего элемента, которые сами по себе не являются объектами table-row. Рассмотрим следующие стили и разметку:

system {display: table;}
planet {display: table-row-group;}
name, moons {display: table-cell;}


Mercury
0

Venus
0


В этом случае каждый набор элементов name и moons будет включен в анонимный элемент table-row. Для второго набора анонимный объект вставляется между элементом planet и его дочерним элементом, потому что элемент planet является элементом table-row-group.

7. Если дочерним элементом элемента table-row не является элемент table-cell, то анонимный объект table-cell вставляется между элементом и его потомком. Этот анонимный объект охватывает все последующие сестринские элементы дочернего элемента, которые сами по себе не являются элементами table-cell. Рассмотрим следующие разметку и стили:

system {display: table;}
planet {display: table-row;}
name, moons {display: table-cell;}


Mercury
0



Поскольку элемент num не имеет табличного значения свойства display, анонимный объект table-cell вставляется между элементом planet и элементом num. Это поведение также распространяется на инкапсуляцию анонимных строковых блоков. Предположим, что теперь не был включен и элемент num:



Mercury
0



В этом случае в анонимный объект table-cell был бы включен 0. Чтобы продолжить иллюстрацию этого момента, приведу пример, адаптированный из спецификации CSS:

example {display: table-cell;}
row {display: table-row;}
hi {font-weight: 900;}

This is the top row.
This is the bottom row.


В каждом элементе row фрагменты текста и элемент hi заключены в анонимный объект table-cell.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Автоматическая компоновка
Анонимные объекты таблицы
Визуальная организация таблицы
Выравнивание
Высота

Вернуться в раздел: CSS / 11. Верстка таблиц