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 |