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.
Tables are perfectly good HTML. They're not supposed to be used for page layouts, but the validator doesn't know what you've used them for.
One huge reason why your page is invalid is, the DOCTYPE at the top says you're using XHTML, but you're not.
BTW, MSN and ESPN use CSS and not tables, and they are way more complex layout than most sites.
HTH
You can be a hobbyist web developer, just like I can be a hobbyist bridge maker. I can build a little wooden bridge over the creek in my backyard. That works for me. But you know what? I'm not going to tell somebody who knows how to build a concrete and steel freeway bridge over a river that wood is a better bridge building material just because I can build my wooden bridge faster and cheaper. I'm not going to tell them that 99.9% of people who use the bridge could care less about the chemical properties of concrete. I'm not going to call a REAL bridge engineer a "holier-than-thou, loudmouthed wanker" just because I don't have to worry about whether semi tractor trailers can make it across my little wooden bridge safely.
So maybe your hobbyist table based web design works great for you. Maybe 99.9% of your visitors don't notice or don't care. But that's your website. That's not a professional website.
And maybe there's a bunch of users coming to your website on a mobile phone, and they can't use your site because you chose tables instead of CSS layouts.
And maybe Google bot comes to your site, and wants to build a smart list of keywords, but it can't because you aren't using semantic tags.
And maybe, oh I dunno, a blind person comes to your website because they want to buy your product or read your article. But guess what? Their screen reader doesn't work worth a damn because you are using tables instead of CSS layouts. Did you know Target is in a class action lawsuit right now because their website is inaccessible to the blind?
I bet 90% of you folks defending your use of tables don't know about semantic markup. I bet you've never seen a label tag in your life. I bet you don't give your images alt attributes. Those validation errors are there for a reason.
If you are still using tables, you are doing twice as much work, with half the return. And that might be generous. If you ever were a web professional, you aren't anymore.
And yes, again, I concede that tables vs CSS doesn't matter for your personal blog, or any other website that nobody cares about. But if you fancy yourself a major web player, if your website is a major piece of your business, then hire a real web professional who can give you a website design with semantic markup using CSS layouts.
And if you have a job as a web developer, and you code using tables, keep your mouth shut. Stop talking about things you know nothing about. Stay as far under the radar as you can, and hope that the next 20-something employee at your company doesn't expose you for the fraud that you are.
Standards are great, but until we get decent enough CSS to do the same thing, tables will stick around.
And while it's true that 90% of the web may never know that your site is tables vs. CSS, or if it validates, it's those 10% (and the search engines!) that really show a what a top-notch web developer or designer can do.
Oh, I could go on and on....
And I love this site.
You might be able to create a half-decent layout with tables, but you will never make something as dynamic, robust, or customizable as you can with CSS. So why use a tool that's so much weaker?
@bean - as opposed to what? WordPress is a great blogging platform, and their continued success and growth reflects that.
Now, I'll gleefully join in the fray about tables vs. CSS. As you can tell, I'm on the side of tables - yes, I'm an old school website coder. BUT, I didn't code Neatorama using tables just to be forever living in 1999 - tables make much more sense to me than CSS (I'm talking about positional CSS. Of course it makes sense to use stylesheet to define fonts and such).
No doubt positional CSS has many benefits - but I find that most of them are exaggerated:
1. TRUE: CSS loads faster BUT not that much faster. Your viewer's Internet connection speed matters more than whether he's viewing a CSS or table-layout based website. Moreover, on a website like Neatorama, images and ad serving are the culprits for slow loading. Not because it uses tables.
2. TRUE: CSS allows for smaller file size (hence faster loading time above) BUT not that much smaller. Any savings in file size is trumped by having to store large image files.
3. TRUE: It takes browsers longer to figure out how to display table layouts than CSS BUT that's only with older computers. With today's computer there is no practical difference.
Then there are supposed benefits of CSS that I find completely bunkum:
1. CSS are faster to design
Not if you have to take into account all the different hacks and work-arounds for all the different browsers on the market today.
2. CSS are faster to update, all you have to do is edit the stylesheet.
That's the same with tables. The beauty of dynamic website like this blog is that all I have to do is change one file. Even on a static website, I use templates, which do the same exact thing.
3. CSS give you better SEO result
Not true - not true at all. SERP is determined by many more factors than just position of content in the HTML. Look at high ranking web pages and you'll see that a good number of them use tables, or if they don't they have a lot of javascript in the HTML header, thereby pushing the "content" section further below in the file.
Neatorama ranks pretty well on Google - with no SEO at all. And the blog leaks outlinks like a sieve!
But there are TWO real reason I use tables are because of the particular weaknesses of positional CSS:
1. No standard application of CSS.
What works for one browser doesn't work for another. Why do you think there are so many hacks and work-arounds with CSS? Did it look beautiful in Firefox? Great - but it looks bad in Explorer. How about in Safari? AOL browser?
After you spent hours writing work-arounds for all the browsers, do you ever think about future browsers? What will happen to your website if Microsoft released a new browser that is incompatible with the CSS work-around? It has happened before, you know.
Tables, on the other hand, are rock solid. Every browser displays table the same way.
2. CSS doesn't handle error well.
Neatorama's layout is simple: two fixed column, centered on the page.
Now, what happens when an author uploads an image that is slightly larger than normal for a post?
CSS: The layout blows apart. That single picture will cause the two column to display like two rows on some browsers (interestingly, different browsers will display the error in different ways). I know because I've tried it.
Table: Nothing - the table column it's in just stretches a little bit. The two column layout remains intact.
@Zach: that's great - but my "little wooden bridge" handles much more traffic than most of the blogs/websites in the world. And it's built with tables!
It's not CSS/tables that matter when we get to this point: it's server capabilities and configurations.
If it works...it works.
CSS is far greater than tables for PAGE positioning but a quick grid INSIDE a page layout? Hit it up with tables, yo. Get over yourself and your faux "better than thou" standards.
I'm a designer and a programmer. I'm very well aware that the end result to the average user is what matters. The CSS disc jockeys are deluding themselves.
Tell you what: get Internet Explorer to adhere to the standards and THEN we'll talk about what's better than what.
Too bad it wasn't a competition on quality content, because I'm sure you'd win.
@Alex
Thank you! I was just about to make many of the same points you had about good old sturdy tables versus positional css.
@Zach
I really hope that you (at least one day) look back some day and /facepalm after reading your own post.
I go to a lot of professional sites, including local software companies, that use tables and CSS positioning. Despite all the CSS purists' bellyaching, they're still searching for their Holy Grail.
It works; don't fix it.
You just named 3 ways that CSS is better than tables. You claim because it is only "slightly" better it isn't worth doing. I find your position to be untenable.
As for your point about only having to edit one template... with CSS redesigns you don't have to create a new template. I think you miss the point. See: http://csszengarden.com/
As for your point about "all the browser hacks for CSS" ... that's just your inexperience with CSS positioning speaking. Remember all the little issues with table layouts to figure out when we were all first doing those once they became available? I promise you, work with CSS layouts as long as you have with tables, and it'll become second nature.
I have done table layouts from 1995-2002. I have done CSS layouts from 2002-2008. Are you sure you have enough experience with CSS layouts to be making the claims you are making?
Do you know how to run a successful website / business? Yes. Clearly. I'm not disputing that. Can you run a successful / profitable website that has a table based layout. Yes. Of course. Does this mean table based layouts are the best web development technology? No.
As for your point about SEO, I agree that it isn't strictly about CSS positioning vs table positioning. However, semantic markup really does make a difference, as do numerous other best practices. I think many people who are still using tables to do their layouts are not up to date on web best practices. I guess you are.
As for your claim that there is no standard application of CSS, that's just FUD. I could redesign your site for IE6, IE7, Firefox, and Safari with a single template and style sheet. No problem.
I am thinking about future browsers. Are you?
How does your little wooden bridge handle mobile phone users and blind users? Maybe you think you don't care because that is such a tiny fragment of your audience. But if your template was CSS positioned you could support them with no extra work.
Carl,
IE7 does adhere very well to standards. IE8 will even more so. Microsoft is on board... finally. I'm seeing IE6 usage that is down 50% from where it was, too.
Artifex,
My post was actually very moderate. I agree with most peoples' points. I didn't say you have to validate every single page. I didn't say every website must be CSS positioned. However, table layouts have the same fate as did the dinosaurs. If I'm wrong, are there web conferences and web experts dedicated to the subject of CSS layouts sucking and table layouts being the future? I'm happy to hear what they have to say.
In conclusion,
Web Business != Web Marketing != Web Communications != Web Usability != Web Accessibility != Web Programming != Web Design != Web Markup/CSS Coding... We can't all be good at everything. I know that all of you must be good at some part of that list, and probably some more I left out. I just don't know why you are so threatened by the fact that maybe you aren't an expert on Web Markup/CSS Coding. And I don't know why you refuse to accept what the experts have to say. I'm not trying to tell you how to write your copy or how to run your business. I'm just trying to open your eyes to a better way to do your markup. You don't care? Fine, but that doesn't make you right.
If you build a 200 page website with tables good luck trying to redesign your site without going in to every page or template and re-writing all the html.
If you build a 200 page website using CSS for positioning by creating a div for your masthead, a div for your navigation, a div for your content, a div for your sidebar etc. you will be able to completely redesign the entire site by editing a few values in 1 single css file.
As far as i'm concerned that pretty much puts to rest any notion that "tables are better".
I'm sure for some people using tables for positioning may be easier. But that in no way makes them the right choice.
(In fact, you can do exactly the same with table or tableless design, since you can convert any element to a table or a cell with CSS if you wish.)
Really, you should be ashamed. To comply with standards is pretty easy to do. :-P (I do AA Conformance level WCAG design on a daily basis and it's not difficult, to be honest.)
And your readers, specially those with disabilities, will thank you for the effort.
google does not validate but bypasses the aforementioned problem by serving pages depending on the device viewing it.
also, particulary for a high traffic site like neatorama a saving of a few kilobytes (with a CSS site design) would result in a huge saving in bandwidth and money.
problems such as a too wide an image can also be handled automatically by CSS so that it does not destroy the layout - particulary on what is a very straight forward layout.
i know CSS can be very frustating to learn at first, but take some time reading up on it and you will understand why there are so many converts. we're not all standards zealots! i certainly don't consider it a necessity for a site to pass w3c testing but there is no harm in making a site accessible to a wider audience through CSS.
neatorama is great - but tables are not!
I named 3 advantages of CSS that turned out to be minimal, 3 that turned out not to be advantages at all, and 2 disadvantages of CSS (one of which turned out to be a fatal flaw for me to consider using it on this blog).
Let me expand on the two disadvantages of CSS:
1. It's buggy - different browsers implement/support CSS differently.
See, for example this chart at Westciv and you'll see that even IE 7 don't support some element type properties that Safari and Opera browsers do.
I'm sure a very experienced web designer can tackle any and all inconsistencies across browsers, but that's actually very hard to do. This gets complex very, very fast:
Take for instance this article by Rob Swan at A List Apart just a couple of weeks ago. It's how to produce a layout with a flexible-width column that fills out the browser space with a fixed-width side column (for navigation, for instance).
This is dead simple to do with tables, but as you can see in the article, it's HARD to do with CSS.
Let's take a look at another example: absolute vertical and horizontal positioning, this time an article at Perishable Press.
Again, dead simple to do with tables, but very convoluted if you have to do it purely with CSS.
2. CSS doesn't handle error well
I think this is worth repeating, because this is the main problem I have with implementing CSS on Neatorama (and the one that you didn't address in your reply)
If your website is a static one, then this is not a problem. But say you have a blog like Neatorama: it has a simple layout. Not counting the header and footer rows, it's basically a two fixed-width column design, centered on the page.
The left-hand side column is 500 pixels wide. This is where the content of the posts go.
With CSS, if someone accidentally upload an image that is larger than 500 pixels wide - say 501 pixels, then the two column layout completely falls apart. But with table, everything is fine - the table column just stretches a little bit.
So far, no one can tell me how to solve this problem with CSS (maybe you can do it with a tricky javascript to detect widths of each img elements but that solution is worse than simply doing a table). If you know how that is solved, 6ixty, then please let me know. I've looked for it, and I couldn't find a trivial solution.
@Daelan: the separation of content and layout has become a mantra that in many instances go too far.
Have you programmed in PHP? The beauty of that language is how it plugs into HTML very easily - but someone decided that there should be a separation between content (the code) and layout (HTML) and created a web template system for PHP called Smarty.
I've had the misfortune of having to code something with smarty before. It was miserable. Something that should've been straightforward became so convoluted.
Re: changing 200 page websites using CSS or templates. I used to work with a website that has thousands of pages - and I opted to use templates because it's much more powerful than CSS. (It really should've been done on a dynamic system, but I couldn't change that. Fine, you work with what you have.)
Why? Because subsets of pages share differing sets of web elements. For instance, a set of pages have the same header bar and navigational bar. A different set of pages share the same header bar as the first set, but a different nav bar. Another set has different header bar but the same nav bar. And yet another set have different header and nav bars. Confused yet? Worse, some have OPTIONAL nav bars that may or may not change depending on the particular page.
This was very hard to do with CSS (keeping track who has what) but very easy to do with templates (and sub templates, and if necessary, sub-sub templates).
All I had to do was find the element I wanted to change - find the right template (or sub template). Change that ONE sub template (and have the web design program change all the pages that use that template), then FTP 'em all. Boom. Done.
---
@Rick, Re: indexing - tables do not interfere with Search Engine indexing. Neatorama uses tables (and gasp - tables within tables). We're indexed by search engines just fine.
Again, No CSS guru will (or should) say that turning your website from table to CSS will result in better SERP. That's because there are many on-site and off-site factors that go into SERP algo.
In fact, trying too hard in SEO can backfire. (Anyone familiar with OOP?)
---
Re: disabled user with screen reader. Actually, I used to correspond with a blind person who reads Neatorama regularly using a screen reader. Never once did he complain about tables. Screen readers read tables perfectly fine.
The largest problem on the web for screen readers are Flash and Ajax websites, not tables.
---
@6ixty: So, let me get this straight: A) Table is more intuitive B) older browsers display tables better than CSS but CSS is still better than tables? :)
Re: mobile markets - I've only seen Neatorama on two mobile phones: a side kick and an iPhone. It displayed both fine, but the sheer amount of graphics on the blog really made it unfriendly to mobile phones.
Re: saving in bandwidth - this is something that I often hear when someone tauts the advantages of CSS, but what they don't realize is that the saving of bandwidth really only comes into play if you're a really, really big sites (like ESPN - I read somewhere that they save a TB in bandwidth a month just by converting to CSS). We have a long way to go before we reach that level and when we did, and I can afford it, you betcha I'll hire a CSS-competent web designer (maybe Zach!) to redesign the blog :)
---
My final note on this subject, then I'll let other people have the last word:
I'm a practical web designer - meaning I'll use whatever tool that works for me, as long as the end result is the same (and by end result, I mean what you see in the browsers).
Neatorama is built with tables AND CSS. I find that in some cases, CSS works better - and in other cases, tables work better.
Can I force Neatorama to be purely CSS? Yes - I have tried. But it came with one big disadvantage (layout blowing up on accidentally oversized photo) so I used tables instead.
If it were the other way around, then I'd use CSS. :)
having designed with tables before i think you underestimate how much of their quirkiness you have internalised. their intuitiveness is mainly because they're a visual way of designing but that does not make them bug/hack free.
anyway i understand your practical web designer argument. bandwidth wise, i suppose the long blog roll is probably more of a factor than the few tables you've used. at least it is not crazy nested table-mania!
But what bothers most of us about Neatorama using tables is not that it may have problems while rendered on a browser or if it's indexed by a search engine, but that it fails to separate content from presentation.
I repeat: if you like tables to position your content you can easily turn all your content to tables using CSS. You can turn inline elements to block elements and viceversa, and assign any element table like properties, making a semantic desing behave like a table desing (and taking advantage of table's strenghts.)
This is not an argument about table vs. tableless design, but more about separating or not separating content from presentation.
If you separate your content from your presentation, and then you learn a little about, for example, XSLT, you'll realize how easy it is to manipulate your content if you decide in the future to change from, say, Wordpress to another blog software, or if you want to offer a printable version, or a PDF file of your content, or, as other people mentioned, a version for a different client or gadget.
The nice thing about XHTML + CSS is that it allows you to do ALL that you previously did with HTML (and table design) plus much, much more.
And when you finally 'get' tableless design, you realize how fast, efficient, flexible and clean it is, and you can't believe how obnoxious table desing is and why you didn't abandoned it before.
And finally: don't take this too personally. If we criticize the site is because we really like it and we care about ir, and as professional web designers we want the best for it. I hope you understand us.
Kind regards.
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.
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.
"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.
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. ;)