Using CSS instead of tables is still using a hack

April 16, 2007

It's an article of faith in modern web page creation that using tables for layout, especially column-based layout, is an evil hack and that using CSS instead is virtuous, proper, and accessible. (These people probably turn up their noses at WanderingThoughts' table-based layout, which has its reasons.)

I have news for these people: it isn't so. Using CSS floats for layout is still using a hack. In fact, it's using a worse hack; at least tables make it clear what's going on. With CSS, there are two problems: first, CSS is an assembly language to start with, and second CSS creates columns only through indirect implication, which has various problems.

(You don't actually create columns in CSS; you create enough constraints that the browser theoretically has no choice but to put your content into columns. If you miss a constraint, some of your content stages a great escape.)

Thus, the net result of moving from a table based column layout to a CSS based one is replacing a clear hack with an indirect and opaque one.

How about accessibility, one of those claimed benefits? As far as I can see, there are two problems with that idea:

  • basic table based column layouts are common enough that any accessibility technology that wants to be usable in the real world already handles them.
  • because the CSS involved is indirect and opaque, it's almost certainly harder for accessibility technology to work out that your stuff is in a multi-column layout and what's in what column.

(In any case, per here, the most important thing for screen readers and the like is to put the important content first in your HTML and the boring navigation afterwards.)

For more reading on this, start with Aristotle Pagaltzis and follow his links.


Comments on this page:

From 87.79.236.202 at 2007-04-17 02:10:07:

I don’t agree with the CSS language = assembly language metaphor.

As for accessibility, by the same token by which table layouts must be handled by any realworld web browsing device, float layouts must also be, so that can’t be an argument either way.

Note, though, that what Dave Shea was saying in the quote from my article that you linked is that IE should implement the parts of the CSS spec by you can make content other than tables be laid out just like tables. That doesn’t mean you should use tables for layout. The idea is that you should not have to resort to floating-related directives in your stylesheets nor to tables in your markup. You would use semantic markup for the content, then specify that it behaves like a table in the stylesheet.

Aristotle Pagaltzis

From 199.172.169.7 at 2007-04-17 04:32:05:

I think you have the wrong idea, the idea behind using CSS instead of tables is, while yes it is a hack, it takes the layout away from the content. This is an important issue, not just for screen readers, but for the owner of the site makes it much easier to redesign the look of the pages. If you start having to change the html, you have to make the changes in many places. Templates help, but they are not perfect, you still have common design features accross many files.

Now I agree that broswer support is more consistant with tables than CSS, but it is still not perfect. Remember also - HTML is not a layout language, tables are to represent tabular data, not for creating columns.

By cks at 2007-04-17 09:29:54:

I agree that CSS would be the right choice if it could clearly or at least directly express the actual layout (and do a layout that is as good as tables, without limitations like mangling long lines in various ways). Unfortunately that is not the current state of CSS as far as I've been able to see.

(I have a memory that even the CSS 'acts as table' properties supported by Firefox weren't good enough when I was trying it, but this was two years ago and my memories have faded by now.)

From 87.79.236.202 at 2007-04-19 07:36:03:

Well, the CSS 3 Advanced Layout Module would do that directly… but whether we’ll see it implemented in our lifetimes is another question.

Aristotle Pagaltzis

Written on 16 April 2007.
« chkconfig --add considered misleading
A disappointment with ZFS »

Page tools: View Source, View Normal, Add Comment.
Search:
Login: Password:
Atom Syndication: Recent Comments.

Last modified: Mon Apr 16 22:45:00 2007
This dinky wiki is brought to you by the Insane Hackers Guild, Python sub-branch.