Categories
Blogroll
Contact Us
- blog @ open-node.net
August 10, 2004
Css-design vs tables
???I understand that style sheets are great because they allow you to make global changes by modifying only one file (much like server-side includes). But apart from lighter page weights (and the zen ???enlightenment??™ that comes with re-learning everything you know about web design), what is the argument for CSS v. table-based layout? I’m just not convinced that it’s worth the trouble.???
I’d like to take the opportunity to respond to this debate with the following remarks on the real-world benefits of CSS-driven layouts.
First of all, I’m glad that you’ve had a chance to see some of the advantages of style sheets. I agree with you that style sheets can be a great time saver. Being able to change your site’s link properties, for example, in one (.css) file sure beats a risky Find and Replace or a manual cut and paste job on all of your site’s pages.
In his book, Designing with Web Standards, Jeffrey Zeldman devotes time to explaining how to create hybrid layouts, using the best practices of CSS in combination with lean table layouts. If you write compact, semantic code, you can still have performance gains while keeping your table-based layout. Perhaps you’re already doing that.
Yet tables were not intended to be used as layout devices; they are explicitly for displaying tabular data. We used tables in the past because we didn’t have a better way. With the advent of CSS support in modern browsers, we have a better way, and it is CSS layout.
Sites that use style sheets to control layout and positioning can be easily re-designed, in most cases without changing the underlying HTML markup at all. Changing the site’s layout from three columns to two half-way through production isn’t a problem: modify rules for your site elements in your master style sheet and watch the changes propagate globally. Clients can be fickle. CSS layouts allow your designs to be flexible.
Alternate stylesheets are a popular feature of many personal and professional sites. While this may not be necessary for your project, this technique can be invaluable when pitching to clients. Construct a standard structural HTML page containing all of the important site elements: navigation, company logo, content, advertisement space. Then create multiple style sheets, with different positioning of the elements, different type, and different colors. Finally, tie them all together with a simple style switcher.
