Why CSS?
Tempest asks: why use CSS instead of tables for laying out web pages?
I'll start by noting that CSS is used for two different but overlapping things: styling text and laying out pages. I'll be talking about both here.
The main reason to use CSS is to separate content from presentation as much as possible. There are several reasons to do that:
- Allows you to update the presentation without touching the content. More specifically, you can change the entire look of a site by changing one CSS file, rather than having to change every page on the site one at a time. For some astonishing examples of how this works, visit the CSS Zen Garden and try clicking some of the designs listed in the sidebar. All of the designs have exactly the same content; the only thing that's different is the CSS.
- Allows you to present the content in multiple media/contexts (like screen readers and PDAs and printouts—and btw, print stylesheets are totally cool).
- Makes it easier to use markup for semantic purposes rather than to specify how things look on the screen; semantic markup is good for disabled people and for displaying in other media and other screen sizes and formats. (I can go into lots more detail about semantic markup if you like, but I'll leave it at this for now.) Table-based layouts tend to be awful for people who use screen readers, in particular.
The major philosophical problem with using tables to lay out a page is that tables were designed for displaying tabular information, not for doing layout, so doing an entire page's layout using tables almost always results in massive kludges, often involving deeply nested tables and carefully sized spacer images.
And in theory, using CSS will get you away from all sorts of awful browser-compatibility issues around tables.
However, in practice, switching over to an entirely CSS-based layout is, as Tempest discovered, often difficult and frustrating. A lot of CSS advocates are still using tables for some layout tasks, while using CSS for as much other stuff as possible. (For example, my redesigned front journal page still uses a table, because what I'm displaying is essentially tabular data in rows and columns—though based on some of y'all's comments, it still needs a little work to get the layout to look good. I'll do that soon.) As long as you're not using a lot of nested tables or a lot of kludges, and as long as you understand the drawbacks and pitfalls of tables, there's nothing really wrong with a clean and straightforward table-based layout, imo.
And it must be noted that CSS is not necessarily the best tool for the job for all layouts. There are two basic reasons for that:
- CSS is still being developed; there are some advanced capabilities that it doesn't have, and trying to do certain kinds of common layouts (especially a three-column layout) using only CSS is difficult. There are various ways to do CSS positioning, but none of them is ideal for some layouts.
- Browser support for CSS is still kind of problematic. First because the older browsers that are still in use don't support it well at all (NS4.5 crashes when it encounters some CSS, and older browsers may just ignore most CSS), and second because some of the more recent browsers—notably IE5—have certain serious bugs in their CSS implementations. There are ways around the browser-compability issues (such as using various hacks to hide some CSS code from certain browsers), but they're not pretty.
So at the moment, CSS isn't quite the perfect tool for layout; I'd recommend using it where possible, but I'd also recommend sticking with tables in places where CSS is just too painful. But in the Glorious CSS Future, tables will wither away.
And even if you're not using CSS for layout, it's a good idea to start thinking about using it for text styling. Among other things, using CSS text styling with tables eliminates one of the big problems with tables: the necessity for putting font tags all over the place.
Oh, and as for the issues you ran into using Dreamweaver, Tempest, it's true that older versions of DW had some problems displaying certain kinds of CSS layout. CSS support has been greatly improved in recent versions, though. (I still need to file a couple of bugs about some small CSS layout issues I've run into lately, but for the most part it seems to do a pretty good job.) And in Dreamweaver MX 2004, there's a Getting Started guide that guides you through the process of creating a CSS-based layout, though in recent months I've learned some things about CSS layouts that I wish I'd known to include in that guide. (And btw, note that just 'cause a piece of CSS code works in IE doesn't mean it's right; it's always worth checking in multiple browsers to see how stuff looks. And if you're using XHTML, it's worth validating the pages too.)
Here are some potential starting points for CSS positioning/layout (aka "CSS-P"):
- Apple's Web Page Development: Best Practices page. Good discussion of "minimal tables" approach.
- Brainjar.com's CSS Positioning pages.
- Flowing and Positioning: Two Page Models
- The CSS-discuss wiki's CSS Layouts page (looks like the wiki may be down at the moment, though)
- AListApart's reconstruction of Slashdot using CSS