On this page I explain some of the new CSS declarations to be used with tables.
| First TD of first TR | Second TD of first TR | Third TD of first TR |
| First TD of second TR | Third TD of second TR |
The default table with only a border defined for the TD's. Note the space between the TD's: default CELLSPACING is
still 1. The one empty cell in the table shouldn't get a border but
Konqueror and Opera 7 give it one anyway.
This works in all browsers except for Netscape 4 and Omniweb.
td {
border-width: 1px;
border-style: solid;
border-color: #000000;
}
We're going to add one style declaration per example, unless otherwise noted, and see what happens in the various browsers.
| First TD of first TR | Second TD of first TR | Third TD of first TR |
| First TD of second TR | Third TD of second TR |
Now we add empty-cells: show to the table. This means that empty cells are also outlined by the borders.
| First TD of first TR | Second TD of first TR | Third TD of first TR |
| First TD of second TR | Third TD of second TR |
Now we add border-collapse: collapse. This means that the borders kind of collapse on each other so that there's
no more spacing between the borders. The difference with CELLSPACING=0 is that there are no 'double' borders, the total border
between two cells is still 1px.
Explorer also draws borders around empty cells as if we'd used
a empty-cells: show.
Some borders are missing in Opera 5+ (which borders depends on the version).
| First TD of first TR | Second TD of first TR | Third TD of first TR |
| First TD of second TR | Third TD of second TR |
However, the browser get the collapsed borders by simply removing the left and top borders, if appropriate. If you
set the CELLSPACING to 10, as in this example, the borders become quite ugly in Explorer on Windows.
border-collapse negates any CELLSPACING in Opera 5 and Mozilla 1.0 RC 3.
| First TD of first TR | Second TD of first TR | Third TD of first TR |
| First TD of second TR | Third TD of second TR |
Now we add border-spacing: 10px, which is nothing but good old CELLSPACING translated to CSS.
Opera needs a unit (px, for instance) or it doesn't understand any more and does horrible things to
your table. Here, too, a border-collapse negates the border-spacing.
| First TD of first TR | Second TD of first TR | Third TD of first TR |
| First TD of second TR | Third TD of second TR |
Now I add width: 100px as a preparation for the next declaration. As you see, the table is slightly wider than 100px because the content won't fit in the TD's, so the table is stretched up. This is common browser behaviour.
| First TD of first TR | Second TD of first TR | Third TD of first TR |
| First TD of second TR | Third TD of second TR |
However, now we have a way of really making tables as high and wide as we define in the TD's. If we
add the magical table-layout: fixed to the style sheet, the table really becomes 100 pixels wide, and Too
Bad For The Content.
However, Opera 5 on Windows is not as exact as we should
wish: it still stretches up the table to allow all content within the TD's, though the table is more narrow than
before.
| First TD of first TR | Second TD of first TR | Third TD of first TR |
| First TD of second TR | Third TD of second TR |
When you have defined no table width, table-layout: fixed does horrible things in Explorer. On Windows it assumes that the table should have width=100%, while on Mac it tries to squeeze the table in 10 pixels at most (I suppose it thinks table width is 1 px).