Toss out your Tables! CSS is the scene!

by Charlie Morris

I was a loyal apologist for tables. When I designed sites, a template containing a 600-pixel wide, two-column table was the blank canvas upon which I began each new work. After all these years, however, I've seen the light. Using HTML tables to position elements on a page is not only insensitive, it's messy, limiting, and downright counter-revolutionary. So, although I know it will cause tremendous turmoil in the Web development world, I'm moving to the other side of the aisle. Cascading Style Sheets are my scene now.

Simply stated, using CSS for page layout is — once you get the hang of it — much more powerful and much simpler than using tables. CSS enables you to separate presentation from content, which we'll just say is a good thing. Theory aside, there are several practical problems with tables which most of us would be glad to be rid of.  

Problems with Tables 

 

Just one tiny catch...

There is, of course, one big argument against replacing tables with CSS divisions. How you phrase it depends on your ideology. Older browsers support CSS poorly or not at all, so forgoing CSS in favor of the more backward-compatible tables is either:  

These two viewpoints represent opposite sides in a debate that has recently become very lively — the question of adhering to current standards versus designing for backward compatibility. The CSS-versus-tables issue is not directly parallel, since there's nothing technically incorrect about using tables for positioning, but it is one of the fronts on which the standards-versus-compatibility war is being fought.  

CSS is partially supported by Internet Explorer 3.01 and later, Netscape Navigator 4.6 and later, and Opera 3.6 and later. Figuring out exactly what features are supported in which browser versions is an arcane subject indeed. Eric Meyer's Style Sheet Reference Guide and the House of Style both include browser compatibility charts. For any given browser version (and there are often differences between Windows and Mac versions), there are features that work, features that don't, and others that work some of the time or in some weird way. Something close to full CSS-1 support is found only in the most current versions. According to WebReview, IE 5.5 supports 92.5% of the CSS1 spec, Netscape 6 supports 98.5%, and Opera 5 supports 98.9%.

The position of what I call the "standards camp" is this: Most current browser versions support HTML 4.0 and CSS-1 pretty darn well (with certain notable exceptions), so let's start using these standards to their fullest, instead of being so obsessed with making our pages backward-compatible.

One of the torch bearers for this worldview is the Web Standards Project (WaSP), which describes itself as "a grassroots coalition fighting for standards on the Web." WaSP encourages developers to take advantage of current W3C standards "even if the resulting sites fail (or look less than optimal) in old, non- standards-compliant Web browsers."

These true believers point out that the more developers dumb down their code for the benefit of old browsers, the less incentive users have to upgrade. Instead of encouraging people to keep their old browsers, we should be encouraging them to grab a nice shiny new free copy of Internet Explorer 5.5, Internet Explorer for the Mac, Netscape 6, or Opera 5, and get those old browsers off the highway. WaSP's Browser Upgrade Initiative aims to spread the word. The case is stated very well in an article from A List Apart called To Hell with Bad Browsers.

Predictably, some folks strongly disagree with this sort of thing. One member of the "compatibility party" points out that the Web is supposed to be a free-form, cross-platform, do-your- own-thing medium. What gives anyone the right to tell people what platform or browser version to use? However, newer standards such as HTML 4.0, CSS and XML don't force anyone to use a particular platform — rather the opposite. The idea is simply to enforce standards so that everyone can talk to everyone else.

A more thought-provoking rebuttal came from a professional pundit, who pointed out that those nice new browsers come with hefty system requirements that many people in the world simply can't afford to meet. As the Web truly is a worldwide medium, this is something worth keeping in mind. Billions of potential Web users live in countries where cassette tapes are still the state of the art in stereo gear, and lots of people spend all day working with 286s running DOS.

The most compelling need to choose backward compatibility over current standards is felt by those selling products online, especially those brave souls who aren't targeting computer users per se. The mantra of the e-commerce crowd is Turn No Potential Customer Away. If you're a niche vendor running a mail-order business, then the danger of losing business among less sophisticated Web users may loom larger than the benefits of a standards-compliant Web site.

In the end, the choice is up to you, and you must make it based on the goals of your site and the demographics of your readership. In a previous article, I explained how to analyze your server logs to determine the mix of browser versions your visitors are using. The higher the percentage of old clunkers in the mix, the more incentive you have to stick with your old non-compliant, kludgy, hard-to-edit (but it works) code. And the less interest you're likely to have in the rest of this article (but we have others you'll like!)

How to Do It

You only need one tag to solve all your positioning woes. Although you could use almost any tag, the DIV tag serves the purpose nicely, as it adds no formatting of its own, and it can contain any and all elements. As with any type of styling, positioning can be specified as an inline style (within an individual element) or as a document-wide style (within the HEAD section). The most powerful way, however, is to define positioning classes in an external style sheet, which requires three steps:  

  1. Create a style sheet, and link one or more HTML documents to it (by using the LINK tag within the HEAD section).
  2. In your style sheet, create a class that defines a position on the page.
  3. In your HTML document, create a division (a DIV element) which refers to that class. Include in this division whatever elements you wish to place in that position.

For example, include this in your style sheet:  

.leftcolumn {
position: absolute;
width: 200;
top: 0px;
left: 0px;
background-color: #00FFFF;
}

Now you've created a class called leftcolumn. In your HTML document, create a DIV that calls the leftcolumn class, and you have a red box 200 pixels wide in the top left corner of the page. Fill up the box with whatever you want to be in the left column, like so:  

<DIV class="leftcolumn"> Contents of left column. </DIV>

You can do the same thing using IDs instead of CLASSes if you prefer.

Of course, a left column is seldom encountered without a right column, so you'll need to define a rightcolumn class as well. For best results, everything on the page should be in a division that has its position specified in a style sheet.

We can create a right column class like so:  

.rightcolumn {
position: absolute;
top: 0px;
left: 200px;
}

Remember that the left column is 200 pixels wide. Since the right column begins 200 pixels from the left edge, it should be right next to the left column, where it belongs. Simple, eh? A bit too simple, in fact. The layout we've just created serves as a good, clear example of how positioning with CSS works, but in the real world, your style sheets will need to be much more complex to get the results you want. Some other things you need to consider are:  

The important point to remember is that if you're going to use CSS for positioning, you have to get it right. A tiny error can cause a page to appear as a jumbled mess, although perhaps only in certain browsers. To get the most out of this powerful set of tools, you need to know all the positioning properties of CSS backwards and forwards. Peruse some of the CSS tutorials you'll find here at the WDVL, and keep a good reference at your elbow as you code (such as Eric Meyer's Style Sheet Reference Guide).

Or, if you're not the studious type, you can simply copy what someone else has done. There are two excellent sites that offer prefab CSS layouts that you can freely copy and modify for your own use. Eric Costello's excellent site glish.com features several great layouts including 2-column and 3-column layouts both fluid (stretchable columns) and static (fixed-width columns) and one that is particularly amazing, a nested float (which allows you to wrap text around a division). The Layout Reservoir from Bluerobot.com is another similar resource.

I strongly recommend glish.com to anyone dabbling in CSS positioning. Their layouts are the product of collaboration among several leading CSS geeks, who have tested their layouts in lots of browsers. They've figured out exactly how padding and margins work, something that has baffled many a designer. They also have clever workarounds for the browser-specific problems we mentioned above. Glish also has lots of links to CSS tutorials and other resources.

Overlapping Layers

If you've read many CSS tutorials, you know that overlapping layers can create all sorts of wild and crazy stuff. But they also come in handy for some conservative but attractive effects, and for solving a couple of age-old HTML dilemmas. The z-index property defines the vertical stacking order of elements. For example, an element that has {z-index:2} will appear on top of an element that has {z-index:1} if their positions on the page overlap.

A heading, or a graphic, that overlaps two columns is a common sight in the print world, but rare on the Web, because it's a trick that's incredibly hard to pull off using tables. With CSS — you guessed it, it's a piece of cake! Simply create a class for the heading that specifies the desired position, and give it a higher z-index than the classes that you want it to overlap, as in the example above. 

Graphic text or HTML text?

Many a sleepless night have I spent considering whether to use a graphic image or plain HTML text for a banner, button or heading. HTML text is easier to change later, and it's friendlier to search engines and non-conventional browsers. But it's awfully nice to incorporate a photo or other image into your logo. Wouldn't it be great if you could combine the two? Thanks to CSS, you can. Simply put your graphic and your text in two different divisions, with the same (or overlapping) x and y coordinates, but different z-indices.

Okay, Now You May Use Background Images.

Of course, the overlapping text 'n image trick can be done with any size image, including a background image for a whole page. Readers of my previous articles know that I have always scorned background images, at least single-image, non-tiling ones. If you use the BODY tag to define a background image, it will often tile whether you want it to or not. In other words, if the user's browser window is wider or taller than the image, then the beginning of a second copy of the image will appear at one or more edges. This looks so abysmally amateurish that I always considered it a good reason not to use background images at all.

Thanks to CSS, this particular problem is history (although there are other reasons not to use backgrounds — harrumph!). You can place a background image exactly where you want it, covering a whole page or any part of a page. Simply place it in a division with the desired coordinates, and put the foreground elements in an overlapping division with a higher z- index.  

Further Exploration

If you learn the language carefully, and use your imagination, you can do some amazing things with CSS. We've thrown out the tables — maybe frames are next! Here are some of the best CSS resource sites, each also a springboard to dozens more sites.  

Charlie Morris has been involved with the Internet since caveman times (1994). He was previously the managing editor of The Web Developer's Journal and The Tapeless Studio. His other activities include freelance writing, freelance Web site design, Internet marketing consulting work, and playing guitar in a blues band. He divides his time between Europe and Florida.
View the original article Toss out your Tables! CSS is the scene!