Ask HN: CSS vs table based layouts

You're tapping into a quite a bit of psychology there :) I've been thinking about the idea of popularity as a measurement of "goodness" (think PHP vs Python), and I think in the end, the answer depends on the programmer.

Some might like to get things done quickly so that their not-necessarily-geeky idea is off the ground early (which is arguably a strong factor for a technology's popularity), and some might prefer to "invest time" and learn about complicated problems (scalability, for example) as they go along. I'd say things are (as usual) a mix of both extremes, so we need to prioritize what's important to us.

As far as tables vs css goes, I find that tables make layouts easy for the average person to visualize while building it, but css is far easier to maintain (especially when you are responsible for maintaining/revamping 50+ stylesheets per year in sites and apps of varying degrees of complexity - think heavily widgeted layouts)

Clearly, from what you've stated, CSS is not your forte. There's nothing wrong with that. In fact, there was a time that I felt exactly like you. Now however, I find CSS/tableless html easier, faster and cleaner overall. I use it exclusively for general presentation. It really shines when I need to fix websites after the fact, or two clients want different presentations of the same code/datasets. It's a lot of fun to limit presentation to 2-3 files, rather than your entire codebase.

That said, what's your motivation here? Do you believe/recognize the benefits of CSS, or are you just feeling guilty because "all the cool kids are doing it"?

If the former is your thinking, you have to realize that you are in learning mode. Of course it's going to be harder. You're comparing a learning state to a mastered state. Riding a bicycle is a lot harder if all you've done is ride tricycles. It says nothing though about whether learning to ride a bike is beneficial to you or worth the time and effort.

If you can see that moving to CSS layouts would have noticeable impact on your production, tough it out, it gets easier I swear. If you can't see any benefit to switching, then don't.

The beginning

Initially tables were the only way to layout a web page, and so much abuse occured - this was before CSS and the only way to make a layout was to use 'spacer' gifs. spacer gifs were one pixel gifs that you had to put in td elements so they would retain there shape. As you can imagine this was a mess.

Then came CSS and the DIV tag, many books were written about 'spacer gifs were evil' use Divs and CSS, and this was correct spacer gifs were a nightmare.

However what seems to have happened is the baby was thrown out with the bathwater. Tables are the easiest way to do what's now called 'liquid layout'. You can do these using Div's but it takes a bit of fiddling, and the result can sometimes be wrong if the screen width becomes too small.

From a software development point of view I regard using div's for liquid layout as an optimisation - semantically what you want is a spaced layout that resizes dynamically. However, using tables does cause a couple of problems that div's avoid (which I mention below), div's avoid these problems but at a cost (which I also mention below).

The real crunch was early on - Netscape 4.7 (the one that was widely used) crashed with multiple nested tables (try this on browsershots if you're curious). So Div's were used and techniques for using div's in browsers became prevalent.

The combination of the Netscape problems and spacer gifs created the 'tables are bad' thing and new developers coming in were told 'tables are bad' and it continues.

So people used div's and IE6 became the dominant browser, but the engineers who built IE6 never expected anyone to use divs for layout - that's what tables were for - and so the mess occured with div's and css and IE6. This, I think, made the situation worse, as to use div's meant you could MS bash, it also required a deeper understanding of HTML and CSS and so arose the specialist web designers who used multiple incantations in DIV tags and CSS to create what any joe could do in 5 minutes using table tags. This strengthened the DIV/CSS camp until anyone who used table tags was openly scorned as a newb.

In any argument you have with the DIV people the last one they always bring up when they're on the ropes is that braille readers can't handle tables - because the ordering isn't defined. However most of these people don't actually write for disabled readers and this too seems to be without base, I have asked many times for concrete examples, and never have received any.

There are some negatives with tables:

1) The whole page needs to be loaded before it can be rendered (in some cases), as the layout can't be done until the contents of each cell are known.

2) This seems to be a big one - it's very hard to edit nested tables in notepad and figure out where you are, you need more expensive tools to navigate the document, something web developers seem to be averse to for some reason. Me, I buy whatever tools make my life easier.

The negatives with Div's as layout are there too:

1) If you have a few fixed width div's with the rightmost floating (the usual way) and make the page smaller than the width of the div's the rightmost falls below the other div's, it's not possible to stop this from happening. If you use tables a scroll bar appears.

2) You have to have a deep understanding of CSS and a lot of time to experiment on multiple browsers to see what works

Div's can start to display quicker as they have a fixed width usually and so no layout algorithm is required to be calculated. (The actual time to calculate the layout is no longer an issue, but it used to be for tables).

So that's the issues as I see them, and how we ended up with these two camps. If anyone has some more data I'd like to see it. Personally I use a couple of layers of nested tables to establish the rows and columns and fill it up with div's as necessary, and don't worry too much any more. Oh and use styles to actually describe the TABLE/TR and TD elements, which is CSS as far as I can see.

There are a number of reasons not to use tables. The main 2 are maintenance cost and accessibility.

Maintenance cost the main point here is by separating the visual styling from the data you have much greater control over redesigning, changing the way the data is displayed, etc.

Accessibility since many people who use the web can't see they listen to their web pages. This means the source order of the site matters. If you create tables that don't linearise then the information becomes out of context and difficult for these users to understand. Using CSS it's possible to create a source order which makes sense but display a different visual order.

My recommendation for a way to do this is to use a grid system like YUI Grids. Like many other parts of development rolling all your CSS from scratch doesn't make sense any more. There are plenty of libraries which take care of the hard problems for you. My favorite CSS library for this is the YUI Grids library. (http://developer.yahoo.com/yui/grids) It has tons of documentation and examples to get started with. I use it for all my work and personal projects.

You might also consider the YUI Reset, Fonts and Base CSS libraries which reset default CSS styles across browsers, standardises the fonts and sets back a common default styling across all browsers respectively.

Disclaimer: I work for Yahoo!

Funnily enough I just altered two sites this week by moving columns around. One was a simple CSS change, the other was one altered margin declaration and one moved div - I also get to see the alterations as they will appear live in a browser (FF).

>>> " Every time I find myself typing style="clear:both" I wonder why the hell I'm doing it."

Because of IE?

>>> "equally hard to change later"

It depends what you're trying to achieve, if you require a pixel based layout that renders identically in all browsers and completely misunderstands the original web paradigm (accessibility of information, not accessibility of design) then yeah, tables .. though you'd probably be more comfortable with Flash or just going the whole hog and printing it out on paper and pasting it to your screen.

When columns finally arrive in CSS3 (http://www.w3.org/TR/css3-multicol/) across the major UA will you still use tables for non-tabular data?