Practical Web Design - Introduction to Tables, Part 2

Some sobering facts:

• two-thirds of the world's installed PCs are three years old or older
• Windows 98 is the operating system most used in the world's PCs

This means that a huge number of people view our Web pages with "out of date" browsers such as Internet Explorer 4.x or 5.x, or earlier versions of Netscape Navigator. And you know as well as I that most users don't bother to update their systems or their browsers, either at work or home. They stick with what came out of the box. It would be optimal if everyone were using up-to-date browsers that were fully CSS- and CSS2-compliant, but they're not. In fact, most of the surfing world doesn't use up-to-date browsers; hence most users can't view your beautifully-constructed, tableless, CSS-based pages correctly.

So, unless you're coding Web pages for an audience that’s composed completely of cutting-edge users (i.e. the typical SitePoint or Slashdot user), you're going to have to deal with tables. It's just a fact of life. And if you're a burgeoning Web designer, you need to learn about tables, even if they're rapidly becoming obsolete. Think of it as learning how to drive a manual transmission vehicle ... sure, you'll probably spend most of your time driving cars with automatic transmissions, but it's worth knowing how to drive a stick. You'll understand the operation of the automobile better. And there will be times where driving a stick isn't just an option, it’s a necessity.

In the first part of this primer, HTML Tables: A Primer, Part I, we discussed the basics of table construction, along with a few more (relatively) advanced options. This part will provide an overview of the options provided for tables in HTML 4, along with a few other items. As with the first column, this article won't cover anything new or different for veteran Web designers. This is strictly for the less expert among us.

The best way to learn to use these tags is to play with them. Cut and paste the code examples below and put them into your HTML editor. Build an example table and insert these commands one at a time to see what happens. Use them in groups to see how well they interact with each others. Have fun with them!

HTML 4 and 4.01

First released as a W3C recommendation in December 1997, HTML 4.0 gave us a tremendous number of "new" options for table construction. "New" is a relative term: many of these options were introduced by either Netscape or Microsoft and originally worked only in those browsers (some options are still browser-specific). In December 1999, HTML 4.01 became the W3C standard, and still is today as we slowly evolve towards XML/XHTML. Following are some options for tables that became standard in HTML 4. Again, note that not all browsers support strict HTML 4, and therefore not all of these commands will work in all browsers.

If you intend to use a lot of 4.01 tags, you'll need to work within the confines of "strict" HTML. That means using the following DOCTYPE:

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict //EN
"http://www.w3.org/TR/html4/strict.dtd">

If you decide to do this, be prepared for a lot of incompatibilities with older, deprecated HTML commands. Strict means just that -- strict. The older tags will not work in strict HTML format. It's a tradeoff: do you want to lose the use of the older, deprecated tags (and risk losing those members of your audience who use older browsers that won't display strict HTML properly) and gain the use of the new 4.01 tags (not to mention full usage of CSS)? It's something to consider, and something to spend some time working with. IE 5x and IE 6 are supposedly able to handle the constraints of strict HTML, as are Netscape Navigator 6, Opera 7.02, and Mozilla 1.2. Don't bet on earlier browsers being able to handle strict HTML, and don't bet that even these browsers will fully handle strict HTML 4.01.

Also, be aware that there have been a lot of issues with some versions of Mozilla handling strict HTML properly, along with Mozilla-based browsers such as Netscape 6, Netscape 7, Camino, Galeon, the recently-released Phoenix/Firebird, and Beonex. Some browsers such as Mozilla, Mac's Safari, Opera 7, and IE 6 have two main layout modes, "Quirks" and "Standards." Mozilla and Safari also have the "Almost Standards" mode, which affects table layout. All these are factors to be investigated and worked with before you make any long-term decisions on what DOCTYPE you'll use.

General rule of thumb: the "transitional" DOCTYPE may work better in an overall sense for coding today, but the HTML world is rapidly moving towards strict standards and away from supporting "transitional" HTML documents. It's a good idea to get used to working in a strict compliance atmosphere. For a general review of the different kinds of DOCTYPES, see my earlier article, Fundamentals of Web Design.

Go to this page to test your browser's capabilities.