Reference and Manual
Hosting Glossary
PHP
HTML 4.01
CSS 2.0
Core Javascript 1.5
XHTML 1.0
Cascading Style Sheets(CSS) Level 2
Long description for example showing how structurally
overlapping cells are rendered
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.
