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