Fun with tables

Below you find old compatibility notes. For the modern browsers, see the Table of Contents.

On this page I explain some of the new CSS declarations to be used with tables.

Default table

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.



empty-cells

Supported by Opera 5, Konqueror, Safari and Mozilla.

Supported slightly buggily by Explorer 5.1 on Mac (not by 5.0).

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.



border-collapse

Supported by Explorer 5 and 6 on Windows, Mozilla, Safari and Opera 5.

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.



border-spacing

Supported by Opera 5, Konqueror and Mozilla.

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.



table-layout

Supported by Explorer 5 and 6, except for 5.1 on Mac, and Mozilla.

Slightly buggy in Opera 5 on Windows.

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).