Styling Tables with CSS

It is truly sad that IE6 for Windows does not support the border-spacing style! Luckily, that browser does at least get rid of the cell spacing when you use border-collapse. IE for Mac, however, doesn't even do that. So, if you're designing a table and you don't want to use border-collapse, you'll need to add the cellspacing='0' attribute to your table if you want it to work in IE for Windows. And you'll always need that attribute if you want it to work in IE for Mac.

Versions of Safari before 1.2, unfortunately, do not support the border-collapse style. Luckily Safari users will most likely be kept up to date, as Safari gets updated with the regular system automatic software update

Table with no stylesheets applied to it.

Browser 2000 2001 2002 2003 2004
MSIE 6.x 23 52 74
MSIE 5.x 45 72 64 39 18
MSIE 4.x 30 12 4 1 < 1
Netscape 6+ / Mozilla < 1 < 1 2
Netscape 4- 18 10 4 1 < 1
Opera < 1 < 1 < 1 < 1 1

Styled Versions

All of the tables below use the exact same markup as the table above. The only change is to add a class to the <table> tag, such as: <table class="Design1">. Obviously, on a real Web site, you would want to come up with more meaningful class names :-).

Design 1

Browser 2000 2001 2002 2003 2004
MSIE 6.x 23 52 74
MSIE 5.x 45 72 64 39 18
MSIE 4.x 30 12 4 1 < 1
Netscape 6+ / Mozilla < 1 < 1 2
Netscape 4- 18 10 4 1 < 1
Opera < 1 < 1 < 1 < 1 1

Design 2

Browser 2000 2001 2002 2003 2004
MSIE 6.x 23 52 74
MSIE 5.x 45 72 64 39 18
MSIE 4.x 30 12 4 1 < 1
Netscape 6+ / Mozilla < 1 < 1 2
Netscape 4- 18 10 4 1 < 1
Opera < 1 < 1 < 1 < 1 1

Design 3

Browser 2000 2001 2002 2003 2004
MSIE 6.x 23 52 74
MSIE 5.x 45 72 64 39 18
MSIE 4.x 30 12 4 1 < 1
Netscape 6+ / Mozilla < 1 < 1 2
Netscape 4- 18 10 4 1 < 1
Opera < 1 < 1 < 1 < 1 1

Design 4

Browser 2000 2001 2002 2003 2004
MSIE 6.x 23 52 74
MSIE 5.x 45 72 64 39 18
MSIE 4.x 30 12 4 1 < 1
Netscape 6+ / Mozilla < 1 < 1 2
Netscape 4- 18 10 4 1 < 1
Opera < 1 < 1 < 1 < 1 1

Design 5

Browser 2000 2001 2002 2003 2004
MSIE 6.x 23 52 74
MSIE 5.x 45 72 64 39 18
MSIE 4.x 30 12 4 1 < 1
Netscape 6+ / Mozilla < 1 < 1 2
Netscape 4- 18 10 4 1 < 1
Opera < 1 < 1 < 1 < 1 1

Design 6

The following table has a slight addition to the markup: class="Odd" is added to the each odd-numbered <tr> within the <tbody>, thus abstracting the odd rows to be styled.

Browser 2000 2001 2002 2003 2004
MSIE 6.x 23 52 74
MSIE 5.x 45 72 64 39 18
MSIE 4.x 30 12 4 1 < 1
Netscape 6+ / Mozilla < 1 < 1 2
Netscape 4- 18 10 4 1 < 1
Opera < 1 < 1 < 1 < 1 1

Design 7

This table has the opposite treatment of Design 6: odd columns are abstracted by adding <class="Odd"> on each odd <td>.

Browser 2000 2001 2002 2003 2004
MSIE 6.x 23 52 74
MSIE 5.x 45 72 64 39 18
MSIE 4.x 30 12 4 1 < 1
Netscape 6+ / Mozilla < 1 < 1 2
Netscape 4- 18 10 4 1 < 1
Opera < 1 < 1 < 1 < 1 1