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