Toss out your Tables! CSS is the scene! Boulder CO

provided by: 
Originally published at Internet.com

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

* Accessibility: When you look at a well laid out page, it's obvious which part is the main content area, and which is mere sidebar material. But to an unconventional Web client such as a text-to-speech converter or a Braille reader, the intended layout may be far from obvious, especially if the client has to pick through layers of nested tables to get to the content. This affects not only disabled people, but an increasing number of people who surf the Web using non-computer devices (phones, PDAs, car systems, simultaneous translator wrist watches, etc.).

* Search Engine Indexing: The same problem comes up when a search engine's spider indexes a site. Many search engines grab the first twenty or thirty words of text they encounter, and use that as the description of the site. Whatever appears in your top left table cell becomes the description of your page, whether it accurately describes the contents or not. We've all seen search engine results in which page after page has a description that reads "Home...Products...Services...About Us..." or some such gibberish. More savvy marketers see this as an opportunity, and pack the top left table cell of each page with keywords.

Because CSS allows absolute positioning of page sections, you can place each section wherever you wish in the HTML code. If you place the main content section of a page first in the code, spiders, alternative browsers and other forms of cyberlife can see the meat of each page up front (and also wade through much less code).

* Endless Code: Properly laying out a page requires specifying all kinds of details such as margins, text alignment and so forth. Using tables, you have to specify all this stuff right in the tags, resulting in labyrinthine code that often takes up far more space than the page's contents. To get things to line up the way we want them to, we resort to tables within tables, little 1-pixel invisible images, and all sorts of hacks. So-called WYSIWYG editors, as well as DTP and word-processing applications that claim to allow you to "Save as HTML," use mazes of nested tables in Quixotic attempts to recreate your page layout.

* CSS has more power: Absolute positioning, maddeningly difficult with tables, is a snap with CSS. Text alignment and margins are a second snap. Overlapping layers, a staple of DTP programs but impossible with tables, are no problem. CSS also lets you associate formatting with possitioning. For example, you can create a sidebar style that dictates not only where the sidebar is to be, but what kind of typeface it uses.

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

* A. Accommodating the needs of those less fortunate, who don't have access to the latest browsers, or * B. Pandering to an ever-smaller number of inexpert Web users who can't get it together to download and install a free piece of software.

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 supported by Internet Explorer, Netscape Navigator and Mozilla, and Opera. Figuring out exactly what features are supported in which browser versions is an arcane subject indeed. The House of Style guide includes 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.

The position of what I call the "standards camp" is this: Most current browser versions support HTML 4.01 and CSS 2 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 MSIE.

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.01, CSS 2 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 casssette tapes are still the state of the art in stereo gear, and lots of people spend all day working with Pentiums running Windows 98.

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)

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:

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:

* Borders, padding, etc. Just like table cells, divisions can have borders, background colors, padding and other properties. * Stretchability. Like tables, divisions need to be able to stretch to accommodate different user window sizes. You can specify dimensions in percentage values as well as in pixels. Another handy trick is leaving a division's size unspecified, and using margins to position the contents of the division. * Inheritance. That pesky inheritance can upset your best-laid positioning plans, especially if you're using relative positioning. * Browser bugs. Remember how we covered our posteriors at the beginning of the article by mentioning certain "notable exceptions" to current browsers' support for CSS?

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 propertiies 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

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.

The old floating head trick, eh?

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, as in the example below.

Flags for every occasion

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.

* WDVL Style Sheets Section * W3C Cascading Style Sheets Home Page * Web Design Group * Glish
Excellent sample layouts with detailed explanations, and lots of links to CSS tutorials. * The Layout Reservoir
Another set of excellent sample CSS layouts. * The House of Style
Tutorials, a browser compatibility guide and a massive list of other CSS resources.

This article originally appeared on WDVL.