Long description for example showing how structurally overlapping cells are rendered

This example shows a difference between CSS's table model for HTML and for other document formats. The first, HTML, example is defined by HTML to be illegal, as it would lead to overlapping cells if HTML's rules for layout are followed. The CSS rules apply to other formats than HTML, and don't have this problem.

The diagram depicts how the two examples, the HTML one and the almost identical non-HTML one, might be rendered. The rendering of the HTML example is undefined, and one possible rendering is shown here, in the left half of the figure: it has two cells that overlap. The rendering of the non-HTML example is on the right, it follows the CSS rules and thus has no overlapping cells.

In both tables, cells have gray backgrounds and a black border. Each contains a single digit as label. Cells are separated from each other by cell spacing.

The left table has a top row of four cells, containing, resp. the digits "1", "2", "3", and "4". The second of these cells, the one with the digit "2" in it, extends into the row below. The second row of the table contains one cell, which contains the digit "5", and it spans columns one and two. Thus, the cell labeled "2" and the cell labeled "5" overlap in the second row, second column. The overlap is depicted by a darker gray background.

The right table has the same top row of four cells, labeled "1", "2", "3", and "4". The second cell again spans rows one and two. The second row of the table contains one cell, containing the digit "5", that spans columns three and four. Thus, no cells overlap, but the first cell of the second row is left empty.

Return to image.