CSS vs. Table-Based Layouts
An Introduction to Web Standards

A battle has been brewing behind the scenes of your favorite web pages – the battle between two popular layout methods: The relative newcomer, Web Standards, vs. old-school table-based layouts. If you’re working with a talented web designer, your average site visitor may never know (or care) which is which. But if you’re planning to remodel your web site, or build a new one, it makes sense to learn about the key differences.

For years, many web designers have relied on tables for producing pixel-perfect layouts. Table-based layouts can provide consistent and reliable page designs across many browsers and platforms. The problem is that tables weren’t invented with web design in mind; they were designed for tabular data. Table-based layouts are code-heavy, which can make them slow to load – and for heavily-trafficked sites (think Amazon, etc.) it makes them big bandwidth hogs. (So if your table-based pages load quickly and you don’t get enough site visitors to tip the bandwidth scales, you might be saying “so what.” But there’s more…) For many, the biggest problem with table-based design is that it doesn’t separate layout from content. Your content is buried in code, behind the scenes. Practically every new electronic device, from your TV to your toothbrush, is becoming web-capable – and while you have no problem reading your web content in tables, all those non-human, web-capable devices are having a hard time figuring out what’s what.

The alternative is standards-based design, produced with Cascading Style Sheets (CSS). CSS allows you to separate layout from content, which means that more browsers, more search engines, and more of these other non-human devices will have a much easier time finding and delivering your content. The problem with CSS has been the “standards” part of “standards-based design.” The standards themselves have changed faster than browsers could keep up in recent years, making things very…non-standard. Worse yet are the different ways that the standards have been accepted and handled by different browsers. Widely-used browsers (most notably Internet Explorer) have been slow to adopt the standards, so your final CSS page display could be wildly inconsistent from browser to browser – even from browser version to browser version. CSS is clearly the best forward-looking design practice – but it’s still one of those “in theory” types of arguments (depending on the layout you’re trying to achieve – some are easier than others). The best decision for your new web site will depend on how you weigh the issues above, and just how “pixel-perfect” your final design needs to be.

In my opinion, Internet Explorer 6 has been the last major obstacle to adopting web standards. Firefox, Opera, Safari, Navigator…these may show subtle differences. But IE6? Some of its interpretations are truly out in left field. And even today, IE6 accounts for almost forty percent of the surfers out there. Hardly something to be dismissed.

With the release of IE7, Microsoft is still a little off, but it’s a major improvement (IMHO). When IE7 began rolling out with Windows Automatic Updates earlier this year, Silverline Creative decided the time was finally right to advocate standards-based design for most new projects. It’s our feeling that standards-based design is now officially “mainstream,” so we’re helping to acquaint our clients with it. We hope that this introduction has given you a good foundation on the issue and encourage you to contact us with your questions about web standards, or about how these issues might affect your own web site.

In closing, I’ll note that Silverline’s own new site is standards-based - nary a table to be found here. And I’ll admit, there are minor fluctuations in the way it is displayed across various browsers. But rather than focus on the differences, I’ll say that we’re willing to accept minor imperfections until the wrinkles in standards implementation are finally ironed out - all in the name of forward-looking design. If you can be accepting of minor flaws in browser versions past, then you’re ready to join us in that pursuit. We’ll do everything we can to help.

Steve Lovisa
President
Silverline Creative