CSS2. Спецификация. Рекомендации W3C. 1998
Полное описание примера вывода структурно перекрывающихся ячеек
Этот пример демонстрирует разницу между табличной моделью CSS для HTML и для документов других форматов.
1-й пример, HTML, неверно определён в HTML, так как приведёт к перекрыванию ячеек, если следовать правилам вывода HTML. Правила CSS применяются к другим форматам, отличным от HTML, и здесь нет никаких проблем.
На диаграмме показано, как эти 2 почти идентичных примера - HTML и не-HTML - могут быть отображены.
Представление примера HTML не определено, и здесь показан 1 из возможных вариантов представления - в левой половине рисунка: в нём 2 перекрывающиеся ячейки.
Представление примера не-HTML - справа - он следует правилам CSS и не имеет перекрывающихся ячеек.
В обеих таблицах ячейки имеют серый фон и чёрную рамку. Каждая имеет цифру в качестве лэйбла. ячейки отделены друг от друга на определённое расстояние (межячеечное пространство/spacing).
Верхний ряд 1-й таблицы состоит из 4 ячеек, содержащих, соответственно, цифры "1", "2", "3" и "4". 2-я из этих ячеек, с цифрой "2", растянута на нижележащий ряд.
2-й ряд таблицы содержит 1 ячейку - с цифрой "5", которая (ячейка) захватывает 1-йи 2-й столбцы. Таким образом, ячейка "2" и ячейка "5" перекрываются во 2-м ряду, 2-м столбце. Перекрывание отмечено более тёмным серым цветом.
В правой таблице имеется такой же верхний ряд из 4 ячеек, обозначенных "1", "2", "3" и "4". 2-я ячейка также захватывает 1-й и 2-й ряды. 2-й ряд таблицы содержит 1 ячейку - с цифрой "5", которая (ячейка) захватывает 3-й и 4-й столбцы. Таким образом, никакого перекрывания ячеек здесь нет, но 1-я ячейка 2-го ряда - пуста.
