Ask HN: CSS vs table based layouts • Hacker News Board

Re: Ask HN: CSS vs table based layouts

#11

Post by larrywright » Fri, Jan 23, 2009, 9:28 PM UTC

tptacek wrote: post #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'r…

+1 for cheating, and for BluePrint - it makes CSS bearable for those of us who aren't pros. 960gs (http://960.gs) is also a very nice framework.

One correction though, Blueprint isn't from Blue Flavor, though they did do an article on it. It's by Olav Bjorkoy, and currently maintained by Christian Montoya.

Re: Ask HN: CSS vs table based layouts

#12

Post by jsdalton » Fri, Jan 23, 2009, 9:48 PM UTC

I used to design using tables, then I learned how to do it in CSS and now I use CSS exclusively. There are only a few instances when I don't, namely:

* When I want vertical centering and the column height is not fixed.

* When I want the width of a column to expand to the width of its widest element, but no further.

* If I wanted a background color to run the full length of a column, not just where the content was. (Actually there are CSS hacks for this, but I don't love them. I myself never use this design pattern any more, so it doesn't matter.)

In other words, you can still deploy tables non semantically to address certain, specific challenges that are not easy in just CSS, while still predominantly using CSS for layout and tables for data.

Re: Ask HN: CSS vs table based layouts

#13

Post by Javache » Fri, Jan 23, 2009, 9:54 PM UTC

Honestly, I've used CSS for as long as I've been slicing web pages (which is now a couple of years) It'd probably cost me more time designing with tables than with CSS. Once you understand the principles behind it, it's not that hard... (for me it feels like a lego-construction snapping together when a design falls into place)

On the other hand, a professional designer often needs to know how to design with tables as well as it is practically the only way to design an email newsletter decently.

Re: Ask HN: CSS vs table based layouts

#14

Post by mcxx » Fri, Jan 23, 2009, 9:57 PM UTC

larrywright wrote: post #11

tptacek wrote: post #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'r…

+1 for cheating, and for BluePrint - it makes CSS bearable for those of us who aren't pros. 960gs ( http://960.gs ) is also a very nice framework. One correction though, Blueprint isn't from Blue Flavor, though they did do an article on it. It's by Olav Bjorkoy, and currently maintained by Christian Montoya.

Thanks for the 960gs, looks great. As I'm starting a small side project without a frontend developer and I hate writing CSS, I'll consider using it. The previous candidate was Malo (http://code.google.com/p/malo/).

Re: Ask HN: CSS vs table based layouts

#15

Post by cninja » Fri, Jan 23, 2009, 9:59 PM UTC

gruseom wrote: post #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…

A agree. In the end it is about what is going to save you the most time.

For example, if you decide at some point you want all page titles to be bright green and placed below the main text of the page, how much work will it be?

The whole argument about separating content and presentation is about speed. If they are separate, and changes need to be made to one, then you don't have to get knee deep in the other to change what needs to change.

CSS based layouts mean the changes might only require editing the one .css file. Table based layouts might mean that you have to edit each page, or if you are using a decent templating system, it might be a single page

The same goes for accessibility. Will it take more time to make your site usable by screen readers and small screens while using one layout or another? What types of accessibility are even important to you?

Re: Ask HN: CSS vs table based layouts

#16

Post by figured » Fri, Jan 23, 2009, 10:10 PM UTC

HTML is the metadata around your content, and CSS is the style that you apply to your content.

Re: Ask HN: CSS vs table based layouts

#17

Post by pwoods » Fri, Jan 23, 2009, 10:19 PM UTC

Although tables is easier than CSS, most browsers will render CSS almost the same way. But not always true for tables. Especially wider sites that need to shrink to fit a screen. I just weigh amount of work I have to do against how much I'm getting paid and do which ever way I feel comfortable with.

Re: Ask HN: CSS vs table based layouts

#18

Post by neovive » Fri, Jan 23, 2009, 10:19 PM UTC

tptacek wrote: post #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'r…

Also take a look at Bluetrip (http://bluetrip.org/) it combines features of Blueprint, Tripoli, 960 and Hartija. So you can get a nice CSS website running pretty quickly and then customize from there.

Re: Ask HN: CSS vs table based layouts

#19

Post by ryanwaggoner » Fri, Jan 23, 2009, 10:37 PM UTC

gruseom wrote: post #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…

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.

Beautiful.

Re: Ask HN: CSS vs table based layouts

#20

Post by auston » Fri, Jan 23, 2009, 10:38 PM UTC

I feel like if it's a simple table with divs inside - it probably wont be a big deal because it will be maintainable.

But if you're going to nest tables inside of tables nested inside of tables - then I'd suggest not doing it.

You want to keep it maintainable for not only yourself but anyone else who might be working on it in the future.