One might question the value of layouts that can only be (eloquently) created with tables.

I've never run into any layout that cannnot be done with CSS. Yes, breaking out of the tables mind-set is hard for many. It was hard for me to break "in" to it oh-so-many years ago, and then to break out of it again for CSS. There's not really a guide at all - rather, an excellent knowledge of the box model is needed. I don't have an excellent knowledge of it, however if I'm ever stuck I can usually find an answer somewhere - CSS layout resources are more prolific than ever before.

I think it's very important to start as simple as possible. Use appropriate tags, and create a very vertically-linear webpage with things appearing in a logical order in your code. Start with a minimal amount of tags; only what you need to contain your content. Then begin styling them, from top down. This is the process I usually use, however even today I have to fight with floating divs occasionally (esp. 3+ floating divs side by side!)

If things get too complicated, look at your (x)html. Is it clean? Imagine Googlebot or another bot crawling over it. Would it make sense? Do you have an abundance of extraneous divs serving only as containers for other divs? Are you needlessly positioning elements on the page?

One point I haven't seen mentioned yet is accessibility. Screen readers and the like can't really make much sense of pages that are presented with tables because the underlying structure of the page is so mangled.
When semantically correct usage of tags is applied, screen readers are given a much easier task, and hence pages become a lot more accessible to people with disabilities.

Semantically correct pages also tend to be easier to read for devices or browsers that can't use images, or simply dont apply styling. This is because the underlying code is, 9 times of 10 in a logical order.

Another point, only partially revealed by the mention of Zen Garden, is that if done properly, pages can be completely re-styled with absolutely no alterations to the data on the page. Only the stylesheet needs to be swapped.

For the last point, the only reason CSS makes some things more difficult is because it is infinitely more powerful than tables and 'hardcoded' attributes.
Much akin to how REGEX makes it more difficult to search a string.

Anyway, a good rule of thumb to see if your XHTML is semanticlly correct (ignoring the use of tables for layout) is to view the page with no styles at all. If the page still makes sense with no styling, you are on the right track.

Quote:Original post by Fuzztrek
One might question the value of layouts that can only be (eloquently) created with tables.

I've never run into any layout that cannnot be done with CSS.

That's not really the point though... there are a lot of layouts that do not naturally or easily fit into CSS. A brief look at the various approaches to 3-column layouts should make that point. Many of them abuse attributes like margins in a way that is barely any better than abusing tables to the same end. Maybe life will get better if more people use the CSS3 stuff in Firefox, and/or if IE7 supports it.

(Edit -- appalling grammar. :( )

[Edited by - Kylotan on June 21, 2005 5:09:16 PM]

Quote:Original post by Kylotan

Quote:Original post by Fuzztrek
One might question the value of layouts that can only be (eloquently) created with tables.

I've never run into any layout that cannnot be done with CSS.

That's not really the point though... there are a lot of layouts that do not naturally or easily fit into CSS. One only needs to take a brief look at the various approaches to 3-column layouts should make that point. Many of them abuse attributes like margins in a way that is barely any better than abusing tables to the same end. Maybe life will get better if more people use the CSS3 stuff in Firefox, and/or if IE7 supports it.

There are limitations in CSS, of course. IMO, the most obvious difference between tables and css is the change in meaning of "100%". We need a keyword that can be used to "fill remaining space". That way we won't have to rely on margins for the three column layout; we could simply float two columns, set fixed widths for how ever many we would like, and then use that new keyword on which ever elements we would like to fill the remaining space. Using margins currently may be considered a hack, however they alone would not be nearly as bad if we didn't have to quadruple our code to fix errors in IE5.5.

We also need something to control even-height problems. "Misusing" background-images to make a column appear as though it is streching the full length of it's neighbours is an unfortunate workaround.

Even though the CSS my not be perfect, I can't say I prefer the table "solution".