Smashing Magazine, the uber-web design blog on the blogosphere, did a really nice study of the 50 most popular blogs (as ranked by Technorati) in terms of their design, information architecture, functionality, and so on.
Neatorama's mentioned in the article (thanks guys!) and the blog even won an award of sorts. It won an award for having one of the most markup validation errors! Actually, all of the blog surveyed have errors save one (A List Apart, but then you'd expect it of the web design experts). In reality, this sort of stuff is meaningless: even yahoo.com and google.com failed validations.
Anyways, Neatorama is old school - it's built with tables (why? Because tables are better than positional CSS, of course!) and that, my friend, is why it has so many validation errors.
Having to scroll a web page in both the horizontal and the vertical on a tiny screen sucks the big potatoes! Your page layout that makes sense on a desktop with a huge screen doesn’t make any fricken sense on my phone running opera mini."
Actually, the benefit to having tables in a variable width layout is that it will collapse as needed for a browser as small as 320 pixels wide (if you design it to allow for such), the most average width for mobile browsers.
A lot of CSS sites will have alternate layouts for mobile browsers, but what happens when the browser outrights strips out the CSS? Pretty ugly. It doesn't fall back nearly as well depending on the needs for a mobile browser. The Opera Browser for the Nintendo DS, for example, is as far back as you are likely to get... when it comes to mobile browsing and generic apps on cell phones and such. So I like to use that. It supports CSS rerendering and stripping, so you get to see it both ways.
Here's the interesting thing:
Stripping CSS caused a lot of pages to lose the order of their layout. Things on the right side column ended up being the first thing on the page due to the habit of prerendering an area, through CSS, but backwards, to preserve text formatting around those div areas. It's one way to guarantee that text will wrap and fill its containers around overlapping/underlapping areas, but it's pretty horrible for anyone trying to browse on anything that doesn't support full CSS... and it happens a lot.
The Opera DS Browser will also to something else: Render the page to the DS's maximum width, dropping down table areas below and resizing images... no horizontal scrolling bars. A lot of modern (within the last 2 years) browsers do this.
At least with a well designed table layout with no minimum width, you can get away with the lack of CSS and preserving a layout and the order of its contents for mobile browsers to make it easier to read.
The catch is that like with desktop browsers, IE, Mozilla, Opera and Safari, CSS behaves differently on all three...
It's even worse with Mobile browsers. When it comes to CSS, throw logic completely out the window and just accept that you're never going to get a consistent layout depending on what's being used to render. (Which is pretty much the reason I have the Opera DS Browser, it recreates a lot of the mobile browser quirks I've seen.)
Tables work on darn near everything and due to the age of the feature and the spec it's part of, it's pretty rare for something to not render a table accurately unless the table itself was malformed/improperly coded.
It's a hack, but it works. CSS Purity is not going to be possible, or practical, for as long as inconsistencies exist between how it is renders... despite it being a spec that tells these browser makers how to render it!
So. I use tables. Shoot me. ;)
"Pages that I’ve built with tables all retained their layouts/formatting [on mobile browsers]"
That's exactly what you DO NOT want on most mobile devices. This is why we use CSS positioning! So we can display the same content in different visual formats tuned to the relevant media (devices). Separation of content and presentation, like Demian said.
Having to scroll a web page in both the horizontal and the vertical on a tiny screen sucks the big potatoes! Your page layout that makes sense on a desktop with a huge screen doesn't make any fricken sense on my phone running opera mini.
(Unless of course you've got something like an iPhone that has magic zooming business. And because the iPhone can do this, it honors screen media styles instead of handheld media styles.)
And even if you foolishly want your website to have the same layout on mobile phones and desktop browsers, there's nothing stopping you from doing this with CSS positioning.
Mobile browsing. On a PDA, A Nintendo DS, palmtop, iPhone, etc... You'll have different behaviours.
CSS tends to fare the worst. Pages that I've built with tables all retained their layouts/formatting even if the mobile browser abandoned CSS to render the page. Colors and font styles would be missing, but the layout was completely preserved. It's just another thing that people are now going to have to consider with the proliferation of cheap, portable mobile devices.
CSS simply sucks for consistent positioning. There's a whole slew of issues to consider if you're not making a layout that is absolutely fixed width in all aspects. Not just some, but all.
Neatorama does have a maximum width to its layouts, but it also has a minimum width as well.
A lot of pure CSS sites that look great, also look horrible for the same reason: I browse at 1200x1040 for crying out loud! Why should a website be absolutely fixed to 640 or 800 pixels wide?
I had a Movable Type setup for a blog. The program blew up when I relocated to a different server and I felt like it was time for something new. I wanted something that wasn't SQL dependent, so I tried out SimplePHP Blog. It works great for my uses, but I had one consistent gripe: All of their templates were fixed width.
So I tried to make a variable width template based on an existing theme that I liked well enough.
HHAAAA HOOOo ho ho ho... what a laugh.
I had one simple rule in addition to variable width: It had to look the same in every browser. With pure CSS, that will... NEVER... EVER... HAPPEN.
An example: All values for padding, size, placement, etc... inside of #page that affect both #sidebar and #content had to be in percentages totaling no more than 99.9% - Cause anything more than that would cause the sidebar to drop in Opera and Firefox.
In Internet Explorer, both 6 and 7, the sidebar always dropped if the percentages were above 98%.
This became a real problem if you were trying to use percentages as padding (0.5% for one side, 0.5% for the other, etc...) to make the math work out to total 100% of the browsing area.
The fix? I went into the PHP code, found the page generating bit, threw in some dummy CSS calls and replaced the layouts with TABLES using styles to define the table colors, border types, fonts, etc...
The moment I did this, saved the file and hit reload... the page rendered perfectly and identically in -every single browser that I threw at it.- Every single one.
CSS, in concept, is great. But the way it is implemented, both on the creation side and on the browser side, is horribly flawed if you're trying to create any page layout with flexibility.
If you want a layout that is fixed at 640 pixels wide, permanently, regardless of the user's browser settings (I have a 1650px wide monitor. Pages stuck at 640px wide look, uhm. annoying. even at 1024 wide)... then CSS is great. Otherwise, it's tables for me, all the way.
And yes, it is possible to have a nice, solid, consistent layout without making the user aware that the site uses tables. The trick is to set only the width in the page and define everything else about the table using class="tableclass" with CSS.
Use PHP includes and you don't even need to have more than one page to edit to define (and change for all) table areas.