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

Этот пример демонстрирует разницу между табличной моделью 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", которая (ячейка) захватывает третий и четвёртый столбцы. Таким образом, никакого перекрывания ячеек здесь нет, но первая ячейка второго ряда - пуста.

Вернуться к изображению.