Спецификация CSS2

         

Полное описание примера вывода структурно перекрывающихся ячеек


Этот пример демонстрирует разницу между табличной моделью CSS для HTML и для документов других форматов.

Первый пример, HTML, неверно определён в HTML, так как приведёт к перекрыванию ячеек, если следовать правилам вывода HTML. Правила CSS применяются к другим форматам, отличным от HTML, и здесь нет никаких проблем.

На диаграмме показано, как эти два почти идентичных примера - HTML и не-HTML -  могут быть отображены.

Представление примера HTML не определено, и здесь показан один из возможных вариантов представления - в левой половине рисунка: в нём две перекрывающиеся ячейки.

Представление примера не-HTML - справа - он следует правилам CSS и не имеет перекрывающихся ячеек.

В обеих таблицах ячейки имеют серый фон и чёрную рамку. Каждая имеет цифру в качестве лэйбла. Ячейки отделены друг от друга на определённое расстояние (межячеечное пространство/spacing).

Верхний ряд первой таблицы состоит из 4 ячеек, содержащих, соответственно, цифры "1", "2", "3" и "4". Вторая из этих ячеек, с цифрой "2", растянута на нижележащий ряд.

Второй ряд таблицы содержит одну ячейку - с цифрой "5", которая (ячейка) захватывает первый и второй столбцы. Таким образом, ячейка "2" и ячейка "5" перекрываются во втором ряду, втором столбце. Перекрывание отмечено более тёмным серым цветом.

В правой таблице имеется такой же верхний ряд из 4 ячеек, обозначенных "1", "2", "3" и "4". Вторая ячейка также захватывает первый и второй ряды. Второй ряд таблицы содержит одну ячейку - с цифрой "5", которая (ячейка) захватывает третий и четвёртый столбцы. Таким образом, никакого перекрывания ячеек здесь нет, но первая ячейка второго ряда - пуста.



Содержание раздела