
Why CSS Should Be Used for Layout - JoelSutherland
http://www.newmediacampaigns.com/page/why-css-should-be-used-for-layout
======
jerf
The CSS/Table argument has been settled, and tables won (by absorption):
<http://www.w3.org/TR/CSS21/tables.html>

The CSS standard has _already conceded_ the point that tables can do things
that pre-table CSS couldn't do. It's over. The pro-CSS side, at least in the
way it is being argued (as if the IE subset _is_ CSS, rather than the
standard), is just wrong and totally out of date. They've been abandoned by
CSS itself. Quite a long time ago, actually.

As for their assertions that this is for "tabular relationships between data"
in the standard, who cares? Table support is implemented as certain boxes with
certain behaviors. If you need those behaviors in your layout, use them. They
are well defined. And since content and presentation are so darned separate,
it's not like it actually hurts anything, right?

(That's a critical point. If you move all the table stuff into CSS, that's
_fundamentally different_ than using the standard table tag. That's
presentation in CSS and content in HTML, exactly as it "should" be!)

Getting all huffy about the fact that somebody declared that some behavior
should "only be for tables" is really missing the point. The behavior simply
exists, regardless of what it was "designed" for, and if you need it, use it.
Besides, just _read_ about the table support... if you can't see how that
stuff might be useful in a layout, I can't imagine how your mind works.

The CSS table support is actually pretty rich, better than the conventional
table tag by a lot, or at least, more flexible.

~~~
olavk
There is this strange myth that "the pro-CSS side" is somehow against tabular
or grid-based layouts, or believe that this kind of layout should only be used
for "tabular data". That is a fundamental misunderstanding.

Note that CSS does not say that _disply:table_ is only for tabluar data. The
whole point of CSS is that you can use it any way you like, since it doesn't
change the semantics of the document. This is totally different from HTML
which indeed states that HTML tables should only be used for tabular data.

CSS has not "conceded" anything by including display:table - rather this is
the whole point of CSS: to allow you to use grid-like layouts for other things
than just tabular data.

~~~
jerf
"There is this strange myth that "the pro-CSS side" is somehow against tabular
or grid-based layouts, or believe that this kind of layout should only be used
for "tabular data". That is a fundamental misunderstanding."

I agree with you... except it is _not_ a myth. There are tons of people
walking around and spouting off who have come to believe that "Tables are
evil!"

People with considered opinions like you are not in the majority of those
speaking.

"Note that CSS does not say that disply:table is only for tabluar data."

It says "Table layout can be used to represent tabular relationships between
data." Direct quote, and skimming that page, it's the only normative comment
about what it is for. I again agree that CSS doesn't forbid the use in layout,
but there definitely are people thinking tabular layouts are forbidden and
that only the "IE subset" (again, my best guess at what incoherent thing these
people are arguing for) is "pure".

You basically re-iterated my point, but I assure you that you are wrong about
what other people think. Go check out the parallel /r/programming post.

~~~
olavk
I think when people say "tables are evil" they really mean "HTML-table markup
used for purely presentational purposes are not ideal." But maybe you are
right.

Anyway, I agree we are in agreement, except I don't think the quote from CSS2
you mention is normative. (It says _can_ be used, not _must_ be used or
_should_ be used) It is just an example. There is nothing normative in CSS
about when to use the different styles.

------
ejs
This whole argument seems to be spiraling out of control, and I doubt a single
person will change their mind either way.

Things not to bother arguing about in public (since no one will change their
mind):

Religion

Politics

CSS vs Tables for layout...?

~~~
alabut
True, it hasn't changed my mind away from being pro-CSS. It has however, made
me realize how much of a learning curve CSS must be for many programmers
compared to tables, much more than I thought, so I'm less likely to debate the
finer points with coders that use tables and just stick to enjoying the
benefits of stylesheets for myself.

~~~
fauigerzigerk
It's not about the learning curve. In my view, it's about the productivity of
competent web developers and designers. Referring to the learning curve is
just repeating the disputed claim that people who deny the suitability of CSS
for layout are just invariably incompetent. That's an excuse.

And I don't agree with ejs. I think it's an important debate because CSS
layout problems are a major reason why so many people use Flash. My own
opinion about this matter is not cast in stone. I may change my mind based on
good examples of CSS layouts that don't break and actually make maintainance
easier.

~~~
cedsav
You could look at the html source of csszengarden. I'm guessing it uses a bit
less markup and is a bit more readable than an equivalent table based layout.

CssZenGarden also shows that refactoring a CSS-driven site is easier since you
can do it without changing your templates.

~~~
chairface
> CssZenGarden also shows that refactoring a CSS-driven site is easier since
> you can do it without changing your templates.

In my experience, this just doesn't happen in the real world.

~~~
SystemOut
That's not true. One of the products my team has built is a "white-label"
syndication system for our content. We built that driven by CSS because it's
the only way to drastically change the look and feel without touching the
JSPs. We currently have at least 30 or so different looks for the same
outputted HTML. As long as you attach classes/IDs everywhere and do it
intelligently you can do all sorts of funky overrides (learn selectors!) to
change the way the pages render and seriously never touch the HTML.

You can't radically change the flow of the pages but that's not the point.

The other area where CSS driven design makes things easier is debugging or
experimenting with the look and feel of the page using Firebug. It's alot
easier if all of your positioning and layout is set via IDs and CSS classes
because I can go in and modify properties, add properties, etc. without
needing to change CSS files or edit the document inline (it's much easier to
modify CSS than inline style settings). Tables make this harder to do because
tables are a pain in CSS with regard to which elements take specific CSS
elements.

I'm not a CSS zealot but once you learn CSS properly (and it seriously doesn't
take much time if you just focus on it a bit and find someone good to mentor
with a bit) it makes things so much easier, especially if you're using the
same generated code across different sites requiring different look and feels.

~~~
chairface
> learn selectors!

The grand majority of those selectors are not available in IE6, which most of
us still have to support, so this is a non-starter. Nobody is arguing that we
wouldn't be much better off with better CSS support. The argument is that with
CSS support as it is now, most non-trivial changes to a sites design are nigh
on impossible without changing the markup.

> You can't radically change the flow of the pages but that's not the point.

You know, sometimes it is.

> once you learn CSS properly

Can we quit with the "you probably don't know CSS" schtick?

------
cedsav
Front-end/Web design has evolved into a discipline of its own.

If you come from a different field, say programming, I can see how CSS looks
like a bad solution to an already solved problem. So you're incentive is to
stick to what you know and use tables for everything.

However, there's much more to front-end design that just having text and
images show up where you want: user-agent targeting, SEO, accessibility,
typography, graphic design, etc... There's a lot to learn, and CSS is just a
small part of it.

------
briancooley
Context-sensitive Presentation, Better Accessibility, and the most complex
designs are easier with CSS. These seem to fall under the YAGNI rule. In
particular, if it took me a couple of hours to build using tables versus a
couple of weeks using CSS (see the Ron Garret post), the above listed benefits
would be cold comfort for the wasted time.

The first rule should be to get something working quickly, even if it's
suboptimal. And the jury seems to still be out on the suboptimal part.

~~~
KrisJordan
The jury is not still out on whether tables are suboptimal. They're easier,
that's their only advantage.

The rule of getting something working quickly should not increase the cost of
doing it right in the future.

~~~
briancooley
What's optimal depends on your objective function. For Ron Garret, it appears
that his objective function was "most intuitive." When smart people are on
both sides of an issue, I consider it undecided.

I personally prefer using CSS for layout, not because it is more intuitive
than tables, but because I prefer to remove the table-cruft from my html. I
think it makes php and rhtml files easier to read. However, in the limited
freelance work that I've done, I've run into more than one client that
preferred I use tables because they couldn't or didn't want to maintain their
layout with CSS.

Anyway, that discussion is ancilliary to my point, which is that the benefits
offered by the author aren't going to be convincing to someone who sees a
40-fold or so difference in time-to-production.

------
zach
It seems illogical to me that the most complex designs are easier with CSS
alone and no tables. Pragmatically, there's no room for a multidisciplinary
approach?

And I must vent about the you-poor-thing defense, which was only mildly
present in the article but has popped up loads of times in the discussion of
the past few days.

Hockey-stick learning curves are inherent, objective flaws for software
interfaces, not subjective ones that don't matter once the cretin beginners
have been sufficiently shamed to overcome them. Interfaces are for humans.
They should make "easy things easy and hard things possible." When they don't,
there is a general feeling of malaise. Steep learning curves actively
foreclose productivity and decrease user enthusiasm. Let us not forget the
lessons of Kathy Sierra:

[http://headrush.typepad.com/creating_passionate_users/2005/1...](http://headrush.typepad.com/creating_passionate_users/2005/10/getting_users_p.html)

Furthermore, defending steep learning curves in general puts one in poor
company and makes people wary. We've all seen people defend their sunk
investments in genuinely crummy systems with a zeal which, seen from the
outside, is comparable only to Stockholm syndrome.

------
soyverde
I have to admit, I default to tables for layout (not a designer, obviously).
Hopefully once all of the major browsers support CSS3 (and more specifically
CSS tables), this argument will be moot. Of course, the only major browser
that doesn't is IE (prior to 8), so we probably have quite a while before IE 6
& 7 disappear from general use.

------
ivankirigin
Jesus, what a boring topic. Making something is so much more important than
how it is made.

------
mattmcknight
This article won't load on my Blackberry. All of the pro-tables articles
looked fine... (To be fair, it's probably a .js issue)

I haven't read much of the what's so wrong with tables argument in this
debate. A lot people saying x is possible with divs and css is different from
saying it's faster, better, cheaper. The div approach is harder to debug, the
tables approach fails to set you apart from the hoi polloi...end of story?

------
lbrandy
This argument is why the entire css/html/javascript client paradigm is broken.

Someone fix it, please.

~~~
quantumhobbit
I have the feeling that if someone did come up with a better alternative it
would fail due to the sheer inertia of the current system.

------
nshah
To me this argument itself is wrong; One of the reasons why using CSS is
considered difficult by some developers is because of the different levels of
support shown by different browsers.

The whole argument that CSS has a learning curve, or that we need hacks, etc -
all point to the same problem. The reason it takes such a long time to get the
layout just right is because there is some browser out there (typically IE6)
that does not behave the way you want it to.

We would not even be having this "war" if all the browsers were standards
compliant, so my gripe as a developer is - why are we not fighting the correct
war? As a developer, I must be able to write code, whether using div tags or
table tags, and expect that it works just as it is supposed to, and not have
to waste hours trying to hack it to work with non-compliant browsers!!

~~~
braindead_in
how about, because the world is not perfect.

~~~
nshah
The world is never going to be perfect... the question is: are you trying to
steer it towards perfection or are you content going with the flow and just
doing what everyone else does?

~~~
braindead_in
Perfection. Of course. Its not a choice. Its a demand.

------
cedsav
There's also quite a few css frameworks out there that take the hard part out
of laying out a page: Blueprint, YUI grid. See also:
<http://www.contentwithstyle.co.uk/content/a-css-framework>

~~~
uniwiz
CSS frameworks are great way to get the job done quickly, with no need to
worry about the different browsers and their issues.

CSS extermists will tell you how using those frameworks is evil, lame, etc. I
think the problem is that web developers feel threatened of loosing their jobs
(gigs), since regular Joe Sixpack can now go and create a decent looking
website in XHTML/CSS with minimal effort.

~~~
ja2ke
Any web designer who is worried that "regular Joe Sixpack can now go and
create a decent looking webpage" which looks or functions better than
something they would be willing to accept payment for, should probably not be
trying to make it as a professional designer.

------
sh1mmer
Ironically Joel seems to be missing something that YUI Grids
(<http://developer.yahoo.com/yui/grids>) and Blueprint
(<http://code.google.com/p/blueprintcss>) both allow you to reorder the
content of a page. Sure it's not totally arbitrary, but it gives you much more
freedom than tables.

Or you could just make your CSS render out tables ([http://www.digital-
web.com/articles/everything_you_know_abou...](http://www.digital-
web.com/articles/everything_you_know_about_CSS_Is_wrong/)).

------
anatoli
It's funny that this issue will only come up with someone who doesn't have to
code designs for living or at least regularly. No offense, but if you actually
got out of your little shell people and worked on some real designs, created
by great designers, you would understand why CSS is superior.

This isn't even an argument.

------
mjnaus
Seriously? Are we still on this?

