Live data from Hacker News

Ask HN: CSS vs table based layouts

news.ycombinator.com

1–10 of 52 posts

Ask HN: CSS vs table based layouts

#1
I'm working on my own site, and I was able to come up with a decent layout in about an hour or two using tables. I then had a pang of guilt, and started re-doing things in CSS, and but it's taking me forever.

I know that from time to time, PG gets crap for using tables for HN, but it seems to work rather well, and it renders the same across all the browsers I've used, including my Android phone.

I'd love to hear an educated discussion on table based vs CSS based layouts. Please discuss.

Re: Ask HN: CSS vs table based layouts

#3
post #2

a 30 second review: tables: easier to design with and more intuitive for people who aren't well-versed in css. css: much greater flexibility, smaller code, separation of design and information

CSS-based sites are also supposed to be better in terms of accessibility as screen readers etc. can separate out the semantically distinct parts better.

CSS layouts take some practice, and they made some design choices I'd describe as bizarre, which make your task more difficult, but now that I've got a good grasp on it, my markup is much more compact and I wouldn't want to go back.

Re: Ask HN: CSS vs table based layouts

#5
Doesn't your question include its answer? Guilt is not a very productive motivation.

I've noticed that once people settle on something as "the" right way, they measure everything against that yardstick. This is so common, I wonder if having a yardstick -- an easy way to answer questions -- is the purpose of settling on "the" right way in the first place.

Software people do this a lot because software projects are so uncertain: if you can do anything (computable), why do X rather than Y? That's overwhelming, so we look for paradigms and processes and yardsticks. These reduce hard questions like "is this good" to easy ones like "is it standards-compliant". It's like the drunk looking for his keys under a streetlight, rather than down the block where he dropped them, because the light is better.

I noticed this when everyone around me was equating "good" programming with "object-oriented" programming. It was too hard to answer "is this good", so people instead would answer "is this OO". I caught myself doing it one day and was shocked. I decided never to use the phrase "the right way" again, but always to replace it with "a right way".

The trouble with the yardstick instinct, of course, is when it produces fake reductions. It gives you false positives ("it must be good because it's OO, CSS, or whatever") and false negatives ("it must be bad because it isn't"). I think the false negatives are more harmful than the false positives; they shut down options and inhibit creativity. There's a joke in which a Frenchman says to an Englishman, "I can see it works in practice, but does it work in theory?" (Told by an Englishman of course.)

Coming back to CSS vs. tables: if it looks good, is fun for you to make (apart from guilt), and does what users want (or will get you there), what's bad about that? Conversely, if it's hard to make, not fun (apart from guilt relief), and doesn't make things look better or work better, what's good about that?

This is way more than I intended to write, damn you, but one more thing: if you haven't, go read Adam Bosworth's classic 2004 talk on the web as the triumph of the "simple, sloppy, and flexible". I can't recommend it enough. It addresses all of this profoundly.

Edit: Surprisingly, it hadn't been posted to HN, so I just did. http://news.ycombinator.com/item?id=447086

Edit 2: Whenever I recommend that piece to someone I go back and re-read it. How's this for apropos:

What is more, in one of the unintended ironies of software history, HTML was intended to be used as a way to provide a truly malleable plastic layout language which never would be bound by 2 dimensional limitations, ironic because hordes of CSS fanatics have been trying to bind it with straight jackets ever since, bad mouthing tables and generations of tools have been layering pixel precise 2 dimensional layout on top of it. And yet, ask any gifted web author, like Jon Udell, and they will tell you that they often use it in the lazy sloppy intuitive human way that it was designed to work. They just pour in content. In 1996 I was at some of the initial XML meetings. The participants' anger at HTML for "corrupting" content with layout was intense. Some of the initial backers of XML were frustrated SGML folks who wanted a better cleaner world in which data was pristinely separated from presentation. In short, they disliked one of the great success stories of software history, one that succeeded because of its limitations, not despite them. I very much doubt that an HTML that had initially shipped as a clean layered set of content (XML, Layout rules - XSLT, and Formatting- CSS) would have had anything like the explosive uptake.

Re: Ask HN: CSS vs table based layouts

#7
CSS layouts offer a whole host of advantages over their ancient table-based brethren. Historically, there has been a lot of discussion on this, but the conversation has basically been concluded with CSS layouts overwhelmingly recognized as the best option.

A CSS layout lets your site be flexible, scalable and semantically pure. When you do a table-based layout, you're basically locked into that presentation unless you choose to overhaul all your files, and chances are good that you've also partially destroyed the semantics of your document, which ruins accessibility and can be bad for SEO. Tables were basically a layout hack that let designers solve a presentation problem for which adequate tools didn't exist; their true purpose is to display tabular data. When browser support for CSS became relatively ubiquitous, people gradually switched over because there was no longer any reason to suffer the inherent inadequacy of table-based layouts.

Once you learn the syntax and the basics of how the box model works, CSS makes everything faster, easier, and more precise. By all accounts, it's the standard for web design nowadays.

I think the proof is in the pudding though; csszengarden.com is a shining example of the benefits of CSS. Surf there, and you can select different stylesheets to be applied to the page. Same HTML, different CSS, hundreds of designs.

alistapart.com is a great resource for discussion on the benefits of web standards and how to apply them. quirksmode.org has technical tips, and w3cshools.com has quick descriptions and examples of most almost everything web-design related.

Re: Ask HN: CSS vs table based layouts

#9
Cheat. Use Blueprint, from Blue Flavor, which gives you semi-semantic layout in table style using DIVs and spans. Blueprint actually gives you more layout control than tables do --- your stuff will look better --- but gets rid of almost all the CSS headaches.

Standards zealots get all up in Blueprint's face because it's fundamentally non-semantic (you end up putting presentation details in your markup). But now you're splitting hairs. If you're using Blueprint, you get to call yourself a CSS designer.

Re: Ask HN: CSS vs table based layouts

#10
I'm so glad I'm not the only one that feels this way.

As far as I'm concerned, CSS is a miserable piece of work. Witness how hard it is do a simple three column layout. It fails half of the simple edict:

Make easy things easy and hard things possible.

Post reply on HN