A Blog Not Limited

to web design, standards & semantics

WTF Is the Big Deal? Don't Use <table> for Layout!

Nov 12, 2008

Published in

Yesterday, Chris Heilmann threw together Should I use tables for layout?. It gave me a nice chuckle and I shared it on Twitter.

Not even 12 hours later, I stumbled across this "gem" on Twitter: Give Up and Use Tables.

Yes, I do have a sense of humor and, yes, I do appreciate that CSS can be a challenge, even for seasoned professionals.

But what the fuck is the big deal with learning to do one's job well using the industry standards!?

Lazy Bitches

Yeah, I said it.

Because that's what comes to my mind when I hear someone whining about CSS.

Or when I get a client who is miserable with a site that was sold to them for thousands of dollars and the entire thing is a mess of nested <table>s.

Or when I see a visually beautiful site and then look under the hood and, again, nested <table>s.

All that I can think of is a lazy designer or developer who cares more about getting the job done, than getting the job done well.

What Happened to Pride in One's Work?

I used to use <table>s and making the switch to CSS-based layout was a challenge (to say the least).

But I took the time necessary to learn, because I want to be excellent at what I do. I care about the work I produce. I care about my clients and their web sites's users. I care about the web industry.

So I want to offer the best I can to my clients and colleagues, and do my damnedest to represent what is the best out there. Granted, this can be a daily struggle. But I wouldn't stay in my field if I didn't feel this way.

I'm interested in more than collecting a paycheck.

CSS Is Better …

Aside from taking pride in my work and striving for excellence, I believe CSS-based layout is better than <table>s. Why?

… In Most Cases

<table>s serve a purpose on the web. And anyone who tells you otherwise is as much of a douchebag as the person who uses <table>s for layout.

<table> is the right semantic element to use for data.

What kind of data? Tabular data such as bar charts, calendars, spreadsheets, etc.

And when you use a <table> for data, keep accessibility in mind.

But that is it. Seriously.

It Doesn't Have to Be Difficult

Learning CSS, especially CSS-based layout, can be difficult.

But if you aren't interested in rising to that challenge, at least take advantage of some of the CSS frameworks out there. They have been tested across browsers, and you can modify them to suit your needs.

True, frameworks have their issues. But I think when compared to the issues with <table>-based layout, frameworks are a better option.

Be a Craftsman

Or take a leap and learn your craft. There are more than enough resources available:

Rant Over

For now.

I know that bitching and whining about this sort of stuff does little than soothe my own frustration … and temporarily at that.

I'm learning (thanks to some of my wonderful colleagues) that they key is to understand why people still design layouts with <table>s. Not to assume (as I've already done in this article) that it is laziness or apathy.

If you care to explain why you choose <table>s, please educate me. Because as much as I enjoyed that rant, I would much more enjoy an opportunity to understand, so that perhaps I can help.

HTML5 Cookbook

Interested in HTML5?
Get the Cookbook!

I was a contributing author for HTML5 Cookbook, available for sale on Amazon! Get yours now! (I hear chapters 1, 4 and 5 are particularly good.)

P.S. Don't forget my book Microformats Made Simple is still for sale!

Tags:

Share the Love

Keith's Gravatar

Keith opines:

11/12/2008

How about this for a reason: no employer worth their salt will hire you if you don’t know how to craft CSS-based layouts.

I’m actually very surprised this post even needs to be made in 2008.  Hell, I would have been surprised in 2005.

Oh, and to those who think tables are easier? I assure you that is not the case.  I used to use tables for layout because I had no other option (back in the days before CSS was really much of anything) and, like that old man who walked to school and back uphill in a snow storm, I can assure you, you’ve got it easy.

Heck, I don’t even understand CSS fully and I can do it, and do it pretty darn well.  There really is no excuse at this point.

:)

Jeff Croft's Gravatar

Jeff Croft opines:

11/12/2008

To anyone who says “tables for layout is easier:”:

What a cop out. The only reason they’re easier is because you’ve been doing them for years. I have absolutely no doubt that someone learning from scratch could pick up CSS layout far quicker than they could make sense of tables.

Get off your ass and learn something new. If you won’t, you’re not a “professional” by any definition of the word.

Love,

Jeff

Adam Wiggall's Gravatar

Adam Wiggall opines:

11/12/2008

Agree with everything you have said here, and I think that the main reason is reiterated by Jeff, habit, and a bad one.

Trouble may be brewing though. With the release of Rachel Andrew and Kevin Yank’s, new book being backed by at least one big gun in Andy Clarke, the use of CSS tables (for layout) looks like it is on the way.

They’ll be saying something like “I told you so”  (possibly).

Keep up the good fight!

Adam

Phillip's Gravatar

Phillip opines:

11/12/2008

@Jeff Croft - I absolutely agree! I actually learned to use CSS for layouts in the first place. I can honestly say that until recently tables confused the hell out of me and I could not imagine laying out an entire site only using them.

Emily's Gravatar

Emily responds:

11/12/2008

@Keith - True that any employer "worth its salt" won’t hire someone without CSS layout skills. BUT there are a ton of employers who aren’t and who will. And even more smaller companies who will hire a freelancers without those skills. The problem is particularly bad in Albuquerque (and I’m sure other markets). It was a shock moving here and seeing what “quality web site” means here. So, yeah, even in 2008 this is problem.

@Jeff - It is a total cop out, and I have a hard time thinking of folks who still use tables as "professionals." But they are out there and they are charging clients ridiculous amounts of money for pure crap. And the clients don’t seem to know any better. There is a disconnect somewhere. I wish I knew what it was, because even at WJS, you and I both saw sites (in the critique session) that were built with tables. This was my point about why it is important to point that sort of stuff out (granted, while being "kind and respectful").

@Adam - Thanks and I will! Regarding your point about Everything You Know About CSS Is Wrong: If trouble brews it is because of ignorance. There is a complete difference between using CSS to present content using display:table and using <table>. It just isn’t the same. :)

Adam Wiggall's Gravatar

Adam Wiggall opines:

11/12/2008

Emily,

Total Ignorance, you are correct, but isn’t that the currency of these people?

Adam

Jeff Croft's Gravatar

Jeff Croft opines:

11/12/2008

Emily-

Not really disagreeing with you, but just for the record: I think the people we saw at WJS, at least for the most part, fall into the “inexperienced, not aware there’s a better way” camp, rather than the “i know CSS exists and I know people say I should use it, but I’m too lazy to learn something new,” camp. Which is a pretty big difference. :)

Emily's Gravatar

Emily responds:

11/12/2008

@Jeff - You are completely right. Which makes it all the more important for the folks who do know to educate those who don’t.

We’ve had the discussion already that the critique session wasn’t structured in a way to allow further discussion on something like table layout, but ... I don’t know ... I personally feel there’s a certain level of responsibility on the part of seasoned professionals to bring it up when looking at table- or image-based site. Which I talked your ear off about enough already :)

Maybe next year’s critique will allow for that or if it doesn’t, a "sidebar" discussion between sessions.

Heather Meadows's Gravatar

Heather Meadows opines:

11/12/2008

My blog is still laid out in tables!  But I’m not an advocate, I just haven’t taken the time to change.

A lot of the web design places that do table layouts seem, to me, to actually specialize in computer maintenance.  So they build computers and troubleshoot computer problems, and oh yeah we can make a website for you too.  And places that specialize in design don’t necessarily specialize in web design…again, it tends to be tacked on later.

I’ve never worked at a place that did web design and nothing else, so I can’t speak to any of those who may still be doing tables.  But I would say that the places that “also” do web design probably stuck with tables because they don’t have the time/impetus to learn anything new.  That’s why it’s great that people like Chris Harrison are championing the Refresh movement in their cities!

Emily's Gravatar

Emily responds:

11/12/2008

@Adam - Too true ... *sigh of frustration*

@Heather - I can appreciate time constraints as much as the next person, particularly for a personal site or blog. Still, I hope you do go the route of CSS layout in the future.

You make an excellent point about community groups like Refresh. There needs to be more inexpensive and locally-accessible opportunities for people to learn and collaborate.

Heather Meadows's Gravatar

Heather Meadows opines:

11/12/2008

Oh, I do plan to!  ...eventually.

Virginia's Gravatar

Virginia opines:

11/13/2008

I just reviewed “Everything You Know about CSS is Wrong!” on my blog today http://www.webteacher.ws/2008/11/13/review-everything-you-know-about-css-is-wrong/ and want to point out that CSS tables are not HTML tables. The semantics of HTML that make a table a table are not present in the CSS display property that make something appear as a grid. display: table isn’t about semantics, it’s about appearance.

Sean's Gravatar

Sean opines:

11/14/2008

Jeff Croft wrote:

What a cop out. The only reason they’re easier is because you’ve been doing them for years. I have absolutely no doubt that someone learning from scratch could pick up CSS layout far quicker than they could make sense of tables.

That would be me! Tables scare me - I can’t read them and need a generator to create them. CSS just works.

Daniel's Gravatar

Daniel opines:

12/14/2009

The problem is simply that the CSS standard is such a huge mess and not in the least bit geared towards creating layouts. There are just so many issues that cannot be solved through CSS, and the solution is always either some hack with background pictures, which I personally find even uglier than nicely written «table» layouts, or a JavaScript. Of course written in a dozen different versions so it stays somewhat consistent across browsers. The reason why so many people still feel compelled to use «table»s is because they’re lazy, but because the results are much more consistent and predictable. I just can’t be proud of code that is up to the latest web trends, but full of IE conditionals, JavaScripts and other little hacks people had to come up with over the years.

There’s just too many layouting issues that cannot be dealt with in CSS. Of course you can design your sites around these restrictions, which is what most people do, but this shouldn’t be necessary. Granted that CSS3 will address a lot of the issues and mistakes, but we’re still going to have to keep legacy hacks and workarounds in the code for people without CSS3 browsers for decades. It’s just very frustrating.

Nate's Gravatar

Nate opines:

03/17/2010

I use both, and I use them well. I just get sick of cssnobs who think tables are useless. Tables are time savers - just like the second link in your article. Saving time is not being lazy, it’s being efficient. If a site is beautiful and consistant on all browsers, then a little tablage doesn’t mean it sucks. Fuck industry-standards if it means I have to spend an extra 2 hours for no reason. Change the standards. As mentioned in the comments above, a swarm of float:left divs and IE !important hacks are just as annoying as keeping your tr’s properly tabbed.

But honestly, I say screw tables AND css - Let’s jump on the apple train and build app-like sites employing technologies like flash and silverlight.

Commenting is not available in this channel entry.

The Coolest Person I Know

Emily Lewis

Yeah, that would be me: .

I'm a freelance web designer of the standardista variety, which means I get excited about things like valid POSH, microformats and accessibility. I ply my trade from my one-person design studio in Albuquerque, New Mexico 87106 USA.

A Blog Not Limited is my personal blog where I pontificate about web design, web standards, semantics and whatever else strikes my fancy. Head on over to Emily Lewis Design if you'd like to see my work or, even better, hire me.

More

I Tweet, Therefore I Am

Follow @emilylewis on Twitter!