I feel like shit, and have spent a proportion of the afternoon in bed so really shouldn’t be involving myself in this right now, but I can’t help it.
Hacker News and Reddit have been bickering today on CSS vs. tables. I have, for the most part, kept out of it. Despite being an advocate of CSS, I don’t need to justify that to anyone. I am more efficient, and can produce better websites in CSS than I ever could with tables. I positively cringe whenever I have to do an e-mail newsletter/”e-shot” at work, because they generally only work in tables. Anyway, I’ve stepped in because now both sides are spreading misinformation.
Firstly, pro-tables Ron Garret used a 3-column layout taken from a 3rd party website that was “back to front” to argue that:
The reason that the order matters is that this layout, like all multi-column CSS layouts, is achieved with floats, and the way that floats get rendered depends on the order in which they appear. So we have not managed to separate content from presentation.
Then, pro-CSS Joel Sutherland agrees with him:
A central point of Ron Garret’s “Why CSS should not be used for layout” is that CSS is flawed because you cannot rearrange the elements of an html document and maintain a consistent presentation. This is true, but it misses the point
They’re both wrong. You can order your content how your like. You are restricted only by your knowledge of CSS and not its ability as a styling language to render your documents. It took me about 30 minutes to knock up a demonstration, which you can see for yourself: columns in order and columns out of order. Both are visually identical in appearance, both use CSS to control the positioning of the columns, but one is in “correct” logical order in the document (left, center, right) and the other out of order (center, left, right). (Only tested in Firefox3 on Linux.)
I have nothing against programmers who choose to use tables, nor do I care if the world takes on the CSS revolution, but these are the kind of anal perfection-obsessed hackers and programmers that freely comment on the mistakes of Jeff Atwood and Robert Scoble at every opportunity, and yet are happy to support other’s mistakes as fact when they add weight to their somewhat misguided arguments? That’s just hypocrisy.
Update (04/02/09 8:51): I took a lot of flack last night because I only tested my examples in FF3. Such is the downside of running nowt but Linux at home these days. However, I’ve had the opportunity to re-test all 5 of my examples this morning and they are absolutely identical in IE6 as they are in Firefox 3.
03 Feb at 8:54 pm
I agree with you 100%. At the end of the day, it is never the tool that restricts you, but your own knowledge of the tool. There are some cases when the ordering of HTML elements do restrict you with the order they appear, but there are heavily in the minority.
P.S I cringe too when I have to do a HTML E-mail Template – HTML Tables and inline styling FTL. :(
03 Feb at 9:26 pm
Not sure if you have this already Jem, but when I got stuck doing e-blasts myself, I decided to rely on teh googlez. Campaign Monitor has an awesome set of templates to chose from that have already been tested in other mail apps.
That way I didn’t have to waste time relearning how the heck to deal with tables! :P
03 Feb at 9:27 pm
Whoops, silly me included html!
URL: http://www.campaignmonitor.com/templates/
03 Feb at 9:29 pm
Exactly what I was thinking. If one thinks CSS is "too hard" and absolutely rigid in the way of ordering elements etc., they need a bigger brain. A poor craftsman blames his tools.
03 Feb at 9:32 pm
The header for my mom’s website is, in the code, below the two content divs. Yet somehow, I managed to make it sit nicely at the top of the page. I know it wouldn’t have been possible with tables. CSS was the only way to make that scalloped border appear correctly.
03 Feb at 9:53 pm
I just do whatever you tell me to because you are all wise and all knowing…
Mwuahaha
Well, in all seriousness I am glad you posted this because being the low-level coder that I am I generally look to others that have experience for my guides and now I know the truth in this matter in case I happened upon the argument myself.
03 Feb at 9:54 pm
I’m sorry, I don’t want to be the pixel nazi, but there is a minor difference on the alignment of the middle column with respect to the leftmost column. Could that be modified as to make both pages look exactly the same, without employing any hacky techniques (e.g., pixel offsets) and while keeping this view consistent for different resolutions?
03 Feb at 9:55 pm
For the record: I do not approve comments left with fake e-mail addresses. Don’t bother to waste my time, or yours.
03 Feb at 9:55 pm
I should add that I’m using Firefox 3 on Linux as well.
03 Feb at 9:59 pm
@Nicou: https://www.jemjabella.co.uk/junk/rearrange/modified-columns-out-of-order.htm
I modified the original code – made no additions.
03 Feb at 10:13 pm
"A crappy artisan blames his tools."
03 Feb at 10:16 pm
Jem,
You’re misunderstanding the quote of mine you used. I am saying that once you have written your CSS, changing the order the elements html will often change how it looks.
My point is the same as yours. Any arbitrarily ordered html can be displayed however you want with css. It’s just that you often must know the order of the html when writing the css.
It is also true that you can create a three column layout that this is not the case for. But there is a dependency between css and html for many rules.
03 Feb at 10:23 pm
I think you missed the point of Joel Sutherland’s "agreement" with the pro-tables argument. The statement is that if you change the ordering of elements in your HTML it will likely involve changing the CSS in order to maintain the same appearance. Your example proves this point – the CSS has changed as well as the HTML. Joel’s point is that, yes there is some coupling between CSS and HTML, but its much less tightly coupled than when using tables.
03 Feb at 10:31 pm
The orginal posts on /r/ and hn never said ‘CSS is too hard’. So you’re starting your argument off wrong to begin with.
The discussions centered around whether CSS was appropriate for layout always, or if tables were easier to write/read for layout with CSS taking up styling (you know, as a style sheet).
The major point about whether CSS truly separates content from presentation is also a valid point of discussion. As you show (30 minutes to come up with a sample example?), it’s difficult to get that separation. It can happen, but only with difficulty. Whereas, for many grid-based layouts, the use of tables works effectively and without the trial-and-error that is often present in the use of CSS. That was the discussion, not ‘CSS is too hard’. I do see comments here that ‘tables are too hard’, however, which is funny.
Not to mention that the problem you are refuting is different – the first had top and bottom rows spanning the columns.
03 Feb at 10:33 pm
Hmmm…Let me see if I can put a non-geek spin on this. I adore CSS (though I still want to kill it sometimes) & I hate tables. Does that help? LOL I have problems when I try to create anything higher then two columns floating CSS, but I am not about to switch to using tables to get the results I want. You can not get the looks or the customization with tables that you can get wit CSS. When I first started creating my web site I used tables constantly cause that was what I understood & I was good with them. Now I wouldn’t touch a table unless I had to. Yeah, they have their place for data, but that is about it, in my opinion.
03 Feb at 10:38 pm
@Joel: thanks for the clarification. :)
ETA: https://www.jemjabella.co.uk/junk/rearrange/abs-columns-in-order.htm
https://www.jemjabella.co.uk/junk/rearrange/abs-columns-out-of-order.htm
Same CSS, re-ordered columns.
03 Feb at 11:00 pm
@ Izze:
Yes, tables offer grid-based layouts without the trial and error – but tables, in my eyes anyway, are meant for one thing: tabular data.
Everything you would want to achieve with tables can easily be achieved in CSS, as Jem has proved.
I also seem to fail at spotting where Jem states that ‘CSS is too hard’? So you, yourself, are starting your argument off wrong to begin with.
03 Feb at 11:16 pm
@Ben: "Everything you would want to achieve with tables can easily be achieved in CSS"
Easily? Try again. Also, test this CSS/HTML across multiple browsers and platforms and see how well it holds up versus the table layout version.
The best answer (as it almost always is) is in the middle. Neither the extreme CSS proponents who think tables are hard, and neither the few people who think CSS shouldn’t "ever" be used for layout. An appropriate mixture of usage is likely to produce the best overall results for the least amount of trouble, i.e. don’t be dogmatic like the original author or other commenters on the myriad of posts here and on /r/ and hn.
The fact remains that content and presentation in CSS are linked for many many cases. It is possible to make cases that separate the two, but the vast majority you get trial and error and some kind of connection.
03 Feb at 11:20 pm
@ Izze: ‘Also, test this CSS/HTML across multiple browsers and platforms and see how well it holds up versus the table layout version’
Yes it would be quicker to do the table layout version, but they seem more restricting to me. I do make CSS/XHTML templates daily and test them across multiple browsers/platforms – after a while you get the knack of it and it takes you no time at all. Getting tables to look exactly the same cross browser and platform can be as much as pain in the ass as CSS/HTML.
03 Feb at 11:31 pm
@Ben:
Then by all means, continue using CSS dogmatically for all layout if you prefer. Using tables for overall grid layouts and so on is generally much less of a pain.
As a comment from hn [discojesus] states: "Just like how the fact that many people have a beef with using CSS for layouts doesn’t negate the fact that for everything else it eliminates redundancies and is generally the cat’s pajamas, the fact that tables look ugly doesn’t negate the fact that in many cases they Just Work faster and are easier to understand than CSS for standard layouts like three equal-height columns."
It’s not a case of "incompetence", that was never the discussion.
03 Feb at 11:48 pm
@izze, like discojesus you seem to be under the impression that this is another post on css vs. tables, when it’s really not. I specifically said that I do not care who uses tables, as it ultimately makes no difference to me.
The point of this entry was to correct an assumption that X sort of layout was not possible in CSS. I believe I achieved that, even if it took people a) making assumptions about my integrity; b) anonymous comment abuse and c) people assuming I’m male; to get there.
04 Feb at 1:35 am
Just want to point out that your ordered CSS examples do not address one of the main problems that Ron Garret pointed out. By using floats to arrange columns, your column elements do not all naturally inherit the same height. Were you to apply a background or border to #leftcolumn or #rightcolumn in either of your examples, it would not cover the entire height of #container. Vertical positioning and sizing on columns is one area where CSS is decidedly more awkward than tables.
Agree with the general sentiment of your post. There’s no one size fits all here.
04 Feb at 1:58 am
I agree with you , once you have a lot of experience with CSS there its usually quicker than tables and quicker to maintain. But its an uphill struggle for most people to reach that level. I think CSS needs to provide simpler layout techniques so fewer developers give up and go back to tables every time a deadline looms. On the CSS being binded to content issue, I had a similar discussion with a Desktop developer friend of mine recently and his example was a lot harder (for me) to refute. He wanted to change the order of horizontal rows of content using only CSS…
p.s my name contains an apostrophe between the O and the D, very common in Irish surnames , your comment system doesn’t allow it…
04 Feb at 3:06 am
Here’s some food for thought.
CSS is coupled to HTML, thats been said and remains true because one does somethin to the other.
However the comments about the separation, It’s not in the coupling it’s in the implementation. If for example you write all your styles inline in the HTML is it still a valid separation of content vs layout? Poeople’s opinion here are going to differ because we all come in with a certain amount of prejudice and HTML/CSS are forgiving enough for us all to do things in a hodge podge sort of way. Shit i don’t even need a doctype in any modern browser i don’t even need valid markup in others.
Maybe its the standard of HTML itself that is flawed or at least people’s own interpretations of just what HTML should be.
Some very valid points about browser wars inside:
The DOM is a mess – http://ejohn.org/blog/the-dom-is-a-mess/
04 Feb at 3:40 am
+1 misses the point.
On the original article, one of the problems discussed was the fluidity of layout when using tables (word wrapping etc). You can, obviously, position any element wherever you like (position: absolute, as your last example), but would miss the flow model (i.e: you’d have to position every element individually and potentially would also have to resize them with the browser).
Your example don’t prove an argument; fixed-size layouts are damn simple to implement, the problem is getting them to be liquid, auto-adjusting to viewport boundaries.
I think the key term was "css elements only position to it’s containers, not siblings". Using absolute positioning only changes the problem, because elements start to position to the viewport.
(btw, e-mails addresses _can_ have a plus sign on it. I like to use login+site@gmail.com)
04 Feb at 5:16 am
Like Matt said, seems to me that these people who’re against pure CSS layouts, are basically against any sort of rules regarding programming.
Meh, semantic coding? Never! I mean, wouldn’t it make sense to use a giant spaceship just to build a container for one petunia?
Technically, browsers should all be able to display CSS and HTML in the exact same way, considering that they’re built so that we could properly read HTML documents. But since each browser was coded by a vastly different set of people… who am I kidding? Next campaign to take up: everyone should thing the exact same way! *rolls eyes*
04 Feb at 7:50 am
We’ve all heard the expression "learn the rules so that you can break the rules".
CSS is like this. If you’re a talented web developer and have made the valiant effort to learn, master and bend CSS to your will for various layout scenarios, more power to you.
If after doing that, you still find it a pain in the ass, with CSS-styled tables working better & less brittle, then more power to you.
Lately I’ve been lucky enough to work with incredibly talented developers who I respect that also share this opinion on using tables in some instances.
04 Feb at 3:58 pm
@vera: "people who’re against pure CSS layouts, are basically against any sort of rules regarding programming"
You have no idea what you’re talking about. HTML/CSS/webpage-making is *not* programming anyway. But this comment fits perfectly here in this egotistical, dogmatic little group (who yet somehow find tables to be ‘hard’). (ultimately better than you/pointing out flaws in css layouts means incompetence)
Heaven forbid anyone use tables at all, for simple grid layouts and cases where CSS layout requires hacks.
Yes yes, everyone agrees that it’s possible to have cases where CSS allows order-independent layout. That point is perfectly correct (i.e. you cannot say "never"). There are no attempts here to try it with equal-height columns, which were part of the original posts.
The main point is: tables are good for some people for much layout, or just some layout, with CSS taking up the work for the rest. For others, CSS is preferable if at all possible. For a few extremists CSS is the only solution (these people waste time writing hacks and refreshing in trial-and-error as a reward for their dogmatism). And for a few odd people tables are the only option, but they are probably only making simple sites.
04 Feb at 4:04 pm
I was waiting for someone to take the tagline seriously…
04 Feb at 4:29 pm
I wasn’t taking it seriously until it began to look like a theme. CSS is great, but tables are faster/easier to use for many layouts. What’s so wrong with that? If you want to be a CSS purist, fine, but park the fake geek-ego while others finish their work faster than you because they’re not so fan-boy/girl-ish. If someone wants to use tables for some layout, who are you to blast them as incompetent or somehow ‘against programming rules’ (whatever that’s really supposed to mean)?
Can you duplicate the real example used in the original post but with true content/presentation separation? If so how long does it take to write?
04 Feb at 4:48 pm
I don’t suppose you ever heard of semantic coding, izzie? Just because it’s easier to do it in a certain way, it doesn’t mean that it’s also correct.
Tables are not faster, by the way. Browsers load divs faster.
As for how long it takes to write: depends on the person. I take the exact same amount of time to code a fluid layout as one with fixed with. The only thing I change it the container values which I set up as percentages rather than pixels. And yes, I do check for cross-browser compatibility.
04 Feb at 4:55 pm
Did you actually read the entry? Specifically "I have nothing against programmers who choose to use tables"? Because, it would appear not.
There is nothing wrong with the speed at which I work. I can turn a PSD into a valid, standards compliant, CSS driven, IE6 compatible web page in less than an hour. Without having to resort to tables, and without having to cry like a bitch because CSS is too hard. Until the boss complains that it’s not fast enough, I’ll stick to my CSS, and you/others are MORE than welcome to stick to your tables. It doesn’t make a blind ounce of a difference to me.
04 Feb at 5:29 pm
I’ve tried to stay out of it all too, and I generally try to keep anything I post online under my real name fairly sanitary, but I’ve just gotta say:
A – fuckin’ – men.
04 Feb at 5:47 pm
@Jem: "without having to cry like a bitch because CSS is too hard"
Yeah, there it goes… Who said ‘CSS is too hard’? It’s all about balance. There are times when it might make much more sense (for some more open-minded people) to just use tables for some layout. How is that (or pointing out general shortcomings of CSS) in any way saying that ‘CSS is too hard’? This stuff is barely ‘coding’ to begin with.
And I never said anything about ‘sticking to tables’ as if I was as blindly dogmatic. I’m no CSS purist, but I’m certainly no table-as-layout purist either. If you want to be a CSS purist, no problem, but there is nothing wrong to choose to diversify as the situation warrants. The defensiveness of insinuating I’m ignorant or incompetent because I choose to use table/CSS mixes for some layouts is inane and tired. Refusing to recognize that there exist deficiencies in using CSS for layouts is likewise tired.
Can you duplicate the real example used in the original post but with true content/presentation separation? If so how long does it take to write?
@vera: "Just because it’s easier to do it in a certain way, it doesn’t mean that it’s also correct"
If the result is correct and reaches all the goals of the customer plus is still easy to read and modify the content, then what’s the use of forcing yourself to write hacks to get CSS layout to work properly? Who says that is ‘correct’? The correctness is in the rendering, including efficiencies thereof. The fact that a content rectangle is named via a labelled DIV instead of a TABLE is no measure of correctness, in my opinion.
04 Feb at 6:20 pm
"Who said ‘CSS is too hard’?" I didn’t say anyone had said that. I just said that I don’t have to whine it to get shit done. You’re putting 2 and 2 together and coming up with 24.
Likewise, I didn’t say that I’m a purist, I didn’t say that there were no situations where tables would be more appropriate, I didn’t say that there are no deficinies in CSS (quite the opposite, on HN, in fact) and I didn’t say that it’s possible to entirely separate content from presentation. I would even go so far as to say that it’s not possible to FULLY separate content and presentation, because there are elements of HTML that are presentational in themselves (with or without CSS). What I said was that it’s possible to reorder elements in a page without affecting how it is displayed.
Feel free to keep jumping to conclusions though.
04 Feb at 7:12 pm
Amen, sister. (This was flagged as an error [?] so I had to submit it twice.)
04 Feb at 7:13 pm
*jump*
04 Feb at 7:29 pm
Oh my word. I’m amazed, Jem, that this post has been taken on and beaten to death with such ferocity. I say this because I think I’m staggered that so mainly tightly-wound people actually give a fuck this hard about the age-old and frankly boring CSS v table debate.
Seriously, people. Unclench.
V xx
05 Feb at 3:04 am
./shrug
From a fairly amateur point of view on both sides, I just think CSS looks nicer and is easier to maintain and change. I remember how intimidated I was by CSS but after 35 mins on your tutorial site I felt more comfortable with it than with tables. Learning it definitely helped me grow as a coder and designer, so thanks for that Jem ^^
I think people who don’t "know" you the way we do will always give you a hard time. Especially since your arguments are always so logical and well thought out. Must drive them crazy ~_~
05 Feb at 5:01 am
The mentality that because you know the rules means you get to break them irritates me. This isn’t art. This is a semantic code. There are protocols and procedures to the way things are done. Tables were designed to display tabular data. End of story. Used as anything else, it’s a hack.
If you choose to use tables as a design mechanism, that’s fine. But don’t go around shouting it’s just as correct as using CSS, but it just plainly isn’t.
Jem, nor anyone else, said anything about tables being too hard. I believe most simply found them constricting, whereas divs feel a little more controllable. While this leads to the risk of them being unwieldy, at least they’re not owning you the way tables can manage to do sometimes with their rigid structural rules. Divs are brilliant because they’re meant to be floated and pushed around and nudged in all sorts of ways. Tables, you get a box with a bunch of other boxes. That’s it.
Tables aren’t harder. Their purpose (organizing a data set) just makes them difficult for design purposes, and when their structure doesn’t interfere with design purposes, you could just as easily mock something up with CSS (which is, arguably, the "semantic" way to do things).
That’s my piece. I know I’m late to the game, but I have too much school work to deal with some guys who got butthurt ’cause a chick disagreed with them :P
06 Feb at 8:23 am
It’s 2009 folks. I can’t believe that the whole css vs table debate still rages.
06 Feb at 9:33 am
The whole time I read this I wanted to raise a sign saying "Pro CSS"…lol. I am not an expert, but I have loved working with it as it is a learning experience. Tables are great for data… when I have to use Excel and Access for work information. However I have to agree with Vix that I cannot believe this is a debatable subject. I fully agree with your rebuttle to this. My web design courses spoke little on tables and more on CSS, so it was kind of a thing to push me over. I cringe about the old days when I used tables. It was quite limiting, in my opinion.
07 Feb at 9:33 pm
I used to use tables to design my websites and I found CSS very…intimidating…for anything more than styling links and colors. Until I sat down and worked at it. With one tutorial and about three hours of trial and error, I had ironed out most of the problems that had plagued me before. It wasn’t that CSS was harder and tables were easier, it was merely that I was comfortable with what worked.
I find now that I could never get some of the layouts I have now as simply with tables as I can with divs.
Coding for the web is not the same thing as art — where rules can be broken. I can’t imagine going into my chemistry class and telling my teacher — hey, I know this is how everyone else uses this chemical, but I’m gonna do it this way. I’m pretty sure I’d be laughed out of the class.
But that’s just my opinion. It now takes me about ten minutes to do a simple layout with divs, about half as long as tables. The longer I work at it, the better I’ll get. But then again, I guess I still have the passion to learn.
03 Mar at 4:12 am
I like the concept of CSS. All I want to know is how to put three divs of different heights in one containing div, floating them all left, and have the bottoms of the three divs all line up with the bottom of the containing div, without specifiying any fixed sizes.
17 Jun at 10:11 am
I think a point that a lot of you are missing is to do with semantics. Tables are designed for tabular data, not layout. They cause havoc with accessibility requirements and screen reader compatibility.
While not always the easiest option, CSS should be used for any site layout, gridlike or not. Tables are acceptable for tabular data in a site section. Any standards complying web designer / developer will tell you the same. Please see this link:
http://www.w3.org/TR/WCAG10/#gl-structure-presentation
I have not yet had to build a CSS template that I have been unable to do without resorting to tables. Please read the W3C specifications and realise that there really isn’t a way of arguing to use tables for layout successfully.
Tables are definitely the "amateur" choice for layout. A lot of people default to them after getting fed up of the CSS learning curve, despite it being the proper way to do things.