Browser Differences With Tables

There are a lot of little differences in the ways the various browsers handle tables. A lot of these differences are very minor. But now and then one of the browsers can completely mangle your nice looking table. Moral: Look at your pages with as many browsers as possible, especially when using tables.

One thing to be very careful of: Don't forget your closing </table> tag. If you do, Netscape 4 won't display the table at all! Or anything from the <table> on. This is a surprisingly common error. I've even seen commercial sites that just displayed a blank page - and looking at the code turned up a missing </table> tag.

With HTML 4.0, the </tr>, </th> and <td> tags have been made optional. But Netscape has problems with tables that are missing these closing tags, especially when tables are nested. So you need to include the closing tags for nested tables. You might as well include them all the time just to get in the habit.

I have worked with tables in IE 3, 4 and 5 and in Netscape 2, 3 and 4. Of these browsers, the real oddball is IE 3. For IE 4, Microsoft made IE much more Netscape-like in a lot of ways (not necessarily for the better!). But what I've learned is that it's important to look at your pages with IE 3 if at all possible - you can get some very rude shocks.

Sometime back, I took an advanced JavaScript class from Rick Scott. One of the projects in that class involved coding a JavaScript jukebox. The jukebox itself was very cleverly drawn with a table. But the class was for Netscape only, and the jukebox was not intended to work with IE. Part of what I did in the class was reworking it so that it could work with IE. I did get it to display well and to work with IE 4. But IE 3 ... well, it never has displayed well there. Which doesn't matter too much, because it's not functional there either.

The one on the left here is the jukebox as it appears in Netscape 4.5. It appears very similarly in Netscape 3, Netscape 4.0x and IE 4 as well. The one on the right shows how IE 3 mangles this table.

 

If you're interested in looking at the code, you can find a slightly different version of the jukebox on my old web site at

http://home1.gte.net/lcoats/Js/room4/myjuke.html.

If you visit this link with IE 3, be forewarned that you'll get a JavaScript error.

You'll find a large amount of JavaScript code in the HEAD section, just ignore that. The items inside the table are mostly form things. The actual table code is not all that complicated.