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

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

Диаграмма изображает, как оба примера (один для HTML, а другой почти идентичный для не-HTML) могли бы визуализироваться. Визуализация примера для HTML не определена, и возможный вариант показан здесь в левой стороне изображения: две ячейки перекрываются. Визуализация примера для не-HTML документа приводится справа, следуя правилам CSS, ячейки не перекрываются.

В обеих таблицах ячейки имеют серый фон и черные границы. Каждая содержит одну цифру, как метку. Ячейки разделены друг от друга интервалом.

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

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