old_expat - 5:25 am on Aug 3, 2011 (gmt 0)
Thanks to those who provided thoughtful comments.
It also depends on how the CSS/html is constructed and I still see a lot of wasted divs being used even these days. Things like wrapping a ul in a div instead of using the ul as the wrapper. Wrapping heading text in divs instead of using heading tags and so on...
Mostly I use styled p's, styled lists -- divs only where required. All header tags are styled. But that seems to be a separate issue from Tables or CSS.
the only reason for switching that i'd pay attention to, is that a table layout will tend to look rubbish on a smaller screen, because it wont fit. whereas a CSS layout can adjust itself to fit the smaller screen.
Will a table layout designed for a small screen " .. look rubbish .. and [not] fit? Remember, tables were used on small screens for years. How different is a 640 X 480 layout from an iPhone? (480 X 320) I really wonder how successfully a CSS layout designed for large screens will ".. adjust itself to fit the smaller screen."
I just tried an experts CSS redesign of a tables site. I re-sized the browser and, you're right -- nothing changed. But who want's to browse on an iPhone with a horizontal scrollbar. I don't have an iPhone, but have read that using a horizontal scroll on a smart phone is a real pain.
For mobiles, I plan on using a completely different and scaled layout. I just can see trying to force 5 pounds of navigation and content into a 1 pound bag.
by using the empty cell trick.
Been doing that for years.
Do you validate [validator.w3.org] your pages?
Yes. I run all my sites through a validator. BTW, are you aware that the Google +1 code will not validate on the W3 machine?
Last is one that will hit home for most of us - once you get past the learning curve, it's far easier to maintain. A table "locks" you into a set of rows and columns.
I'm locked into:
1 row (colspan="3") for header
1 row of 3 colums
1 row (colspan="3") for footer
As I said in my OP, everything else is CSS.
I have a system of modularizing my sites with SSI's:
Header include - contains and top navigation, search box, logo, etc.
Footer include - contains the column 3 goodies, aforementioned "empty cell trick" side navigation, footer, footer menu, etc.
My content can't be "reordered" with the stylesheet, but I would wager that reordering the content in a realistic manner on most pure CSS sites is not as easy as some folks claim.
This was really an eye-opener for me - the concept is the browser must render from <table> to </table> before it displays. It can be a simple table but if it's socked with content, it won't render as quickly. I've seen it happen even with a single cell container table.
I just tried an experiment:
I deleted the footer cells (including the footer tr's and td's as well as the closing "table" tag) from one page of one site and reloaded the page, flushed the cache (FF).. What was left displayed just fine. Then I tried IE9 and Chrome. Same result.