Turning the Tables

or: How I Learned to Stop Worrying and Love Web Standards

It is widely accepted in the Web development community that tables are the best way to layout a page and have it work in as many browsers as possible. Any new users who stumble into a forum for help are quickly informed that tables are the path to HTML heaven, and any developer who hasn't mastered full control of his tables is going straight to the depths of markup hell.

Six months ago, I was of this opinion myself. In fact, it is in the main part still true. If your customers are demanding Web sites that are going to work in the browsers that most people are using, then tables are a reasonable solution for layout. However, tables were never designed for the visual layout of pages of text, navigation, graphics and so on. In fact, tables were put into the HTML specification for the purpose of organizing tables of data for presentation on a Web page. Tables are really no more of a visual layout tool than Excel is. Can you imagine trying to layout a magazine in Excel? Ouch.

Visually, of course, tables do a reasonable job of laying out a page. Granted, we have to pack hidden rows full of transparent GIFs, chop up our graphics into rectangular slices to fit around the shape of the cells, and have to trick the browsers with conflicting cell heights and widths, but on the main part the pages we output look pretty reasonable in most browsers. Most browsers are not all browsers, however, and the fact is that table-based pages don't work well anything other than a standard browser on a desktop computer. What's more, the code needed to generate all these tables is reasonably substantial and can't be reused from page to page.

The New Way

So why do we continue to layout our pages with tables? Surely we need some new technology designed specifically for the visual control of Web pages, right? The good news is that we have such a technology, and its name is Cascading Style Sheets. The not-so-good news is that although support in browsers for basic CSS features such as text formatting has been around since 1997, it is only in the most recent browser versions that full, standards-compliant CSS support is available for the more advanced features such as positioning (CSS-P).

So, how does CSS help solve our problems? Well, in the first part it allows us to layout pages with far more control than tables ever did. CSS (in conjunction with standards compliant browsers) brings us much closer to being able to offer pixel-accurate Web page layouts, for those users with standard desktop browsers. More about this later.

The second real advantage to using CSS for layout, is that it allows us to separate style from content. The way we currently build sites, all the formatting and layout (the page's style) is all coded into the page along with the content. This makes things very inflexible and means that an awful lot of page reworking has to be done when it comes to changing the style of the site. When using CSS we can separate the elements that define how the page is styled from those that define the content. By marking-up the content in terms of page structure (this is a heading, this is the navigation, and this chunk here is a footer) we can then use a style sheet to define how those elements are styled and where on the page they are placed.

The result is that instead of one file with the content and styling all jumbled together, we now have our pages of content and then a style sheet controlling the styling of those pages. When it comes to redesigning the site, it's only the style sheet that need be changed for the entire site to reflect the new style.

This methodology has another significant implication. We can now specify different style sheets for different purposes without having to maintain multiple copies of our content pages. This enables us to, for example, offer a stripped down version of our design for those browsing with a PDA, and another for those using WebTV. We can offer a high-contrast or even speech-only version for those with impaired vision. We can even present the page differently when it is printed.

This is the real crux of the matter. Not only does CSS make life easier for the Web developer, but it makes pages more accessible for users. It makes our pages comparatively quicker to download (the style sheet only needs to be downloaded once per site), and makes the content more portable for future use.

So why aren't we using CSS already?

The answer is that many of us are - but to greater and lesser extents. A good many of us are used to using CSS for styling our text instead of using font tags. However, this is as far as most people go due to the support available for CSS in 1997 browsers (such as IE4 and NN4).

The latest browsers on the market (IE5.5, NN6, Opera 5, Konqueror etc) all support a standard set of Web technologies, including CSS. This really opens up the possibilities for designing sites with CSS and abandoning the bad markup we've all got so used to. You can read more about Web standards from the site of the Web Standards Project (WaSP).

It is these standards that have enabled me to build this Web site using CSS for all the layout. The only tables on the site are used in examples within the tutorials section - and that's because most people are still using tables, so a tabled example makes sense. You can view this page without the style sheet to see the structural markup I was talking about before. All the styling and layout comes from a linked style sheet. In a later article, I will demonstrate the process I went through to construct this layout.

What about older browsers?

So what happens when someone hits a bright new CSS-driven site with an old browser than doesn't support CSS properly? In the first instance they could see a total mess, but we have ways around that.

Just as it is possible to deliver a style sheet for a PDA or a speech browser, we can also deliver a watered down style sheet for those with limited browsers. Rachel Andrew's Old Style New Style command allows you to specify a style sheet for browsers that support Web standards, and one for those that don't.

A different approach is to redirect users of non-compliant browser to a page telling them to upgrade to a better browser. This cheeky approach is great for raising awareness of web standards and the need for a compliant browser. It obviously will depend on the site's audience, whether you can get away with this approach or not. If you think you can, Rachel Andrew's Go Away Old Browsers command will help you do it.

Should we start to use CSS?

You've probably guessed my opinion on this by now. Whether you like the idea or not, this is the direction the Web is going in, and it's your responsibility as a Web developer to make sure you are up-to-speed with the latest developments. If you don't, you could find yourself left behind with unmarketable skills.

Of course, there are projects where it's just not going to be possible to go with such new technologies. Our clients are the ones who put food on our tables, and if they want a site that will work perfectly in all the current 'desktop' browsers then that's what we deliver. At the moment, that obviously means tables for layout.

However, I urge you to start fully using CSS wherever you can. If you run any personal sites (like this one) consider using CSS if you can. Once you're happy with the new technology and methods, start recommending it to your clients as a preferred solution. Show them the benefits. Tell them about accessibility legislation. Let them know they could be pushing the boundaries. See what they say - it's worth a try.

The longer we delay moving to these new technologies, the longer we have to put up with bad browsers and bad working methods. At the current time, every site built using CSS is helping the movement towards good browsers. You really can make a difference to the direction of the Web, and at the same time teach yourself new skills that will keep you in work for a while to come.