Table Border Models
This tests tests the CSS2 spec
rules on table borders. The styles applied here are:
TABLE { margin: 1em; border: medium solid blue; }
TD { border: thin solid green; padding: 5px; }
TH { border: medium solid purple; padding: 5px; }
TABLE.one, TABLE.two { border-spacing: 1em; }
TABLE.one { border-collapse: collapse; }
TABLE.two { border-collapse: separate; }
TABLE.three { border-collapse: separate; border-spacing: 0 0.5em; }
TABLE.four { border-collapse: separate; border-spacing: 0.5em 0; }
TABLE.five { border-collapse: separate; }
TABLE.five, TABLE.five TD, TABLE.five TH { border: none; }
TABLE.five TR, TABLE.five COL, TABLE.five COLGROUP, TABLE.five TBODY, TABLE.five THEAD
{ border: medium solid red; }
| Header One |
Header Two |
Header Three |
|
This table uses the collapsed borders model.
|
This means that elements within the cell have no border-spacing.
|
Since it has collapsed borders, the borders on the header cells,
on all sides, should be medium solid purple.
|
|
The border of the table itself should be medium solid blue, except
where header cells override the border.
|
The borders that I haven't already mentioned (all the other internal
ones) should be thin solid green.
|
This table should have a 1em margin around all edges. This margin
is measured from the middle of its border.
|
| Header One |
Header Two |
Header Three |
|
This table uses the separated borders model.
|
This means that elements within the cell have border-spacing of 1em.
|
The borders on the header cells,
on all sides, should be medium solid purple.
|
|
The border of the table itself should be medium solid blue.
|
The borders of other cells should be thin solid green.
|
This table should have a 1em margin around all edges. This margin
is measured from the outer edge of its border.
|
| Header One |
Header Two |
Header Three |
|
This table uses the separated borders model.
|
Elements within the cell have horizontal border-spacing (i.e., width of
vertical lines) of 0 and vertical
border-spacing (i.e., height of horizontal lines) of 0.5em.
|
The borders on the header cells,
on all sides, should be medium solid purple.
|
|
The border of the table itself should be medium solid blue.
The borders of other cells should be thin solid green.
|
This table should have a 1em margin around all edges. This margin
is measured from the outer edge of its border.
|
The table should not be wider than the room available for it unless
that space is very small. Because of its margins, the width of the
table should be less than 100%.
|
| Header One |
Header Two |
Header Three |
|
This table uses the separated borders model.
|
Elements within the cell have horizontal border-spacing of 0.5em and vertical
border-spacing of 0.
|
The borders on the header cells,
on all sides, should be medium solid purple.
|
|
The border of the table itself should be medium solid blue.
The borders of other cells should be thin solid green.
|
This table should have a 1em margin around all edges. This margin
is measured from the outer edge of its border.
|
The table should not be wider than the room available for it unless
that space is very small. Because of its margins, the width of the
table should be less than 100%.
|
This is the caption.
| Header One |
Header Two |
Header Three |
|
This table uses the separated borders model.
|
This means that borders are allowed only on table elements or table
cell elements.
|
They are not allowed on elements that represent rows,
row-groups, columns, or column-groups.
|
|
There should be no borders at all on this table!
|
If there are any borders shown that are not medium solid red, then
the problem is something other than what this test is testing.
|
This table should have a 1em margin around all edges. This margin
is measured from the outer edge of its border.
|
I still should write a test for the collapsed border model that tests
borders on all elements, and lots more tests. This is nowhere near
complete (what's new?).
(Back to
CSS Testing Information,
David Baron)
LDB,
dbaron@dbaron.org