Hacker News new | past | comments | ask | show | jobs | submit login
Table-Based Layout Is The Next Big Thing (sitepoint.com)
31 points by rglullis on March 5, 2008 | hide | past | favorite | 19 comments



Obviously this sort of thing is an improvement over all the various contortions one must do to achieve that w/o "css tables"... nesting and negative margins and what-have-you, but I feel like using "display:table-cell" obscures the designer's intent, kind of. That sample layout isn't a table, it's a layout.


Yes, but it functions like an HTML table, and that's the point. While a Firefox tab may look completely different from what a tab originally is (like one in a folder), it functions the same, and so the term is carried on.

I think the important thing is that CSS can finally model behavior identical to using a table tag. And as I said in my other comment, it's about time, since tables are one of the most used HTML design (what CSS is for, after all) elements.


The two problems with html table designs are loss of accessibility and semantics. CSS tables do indeed combat both of these by separating content from presentation.

The part that you're sore over is just the name. I agree, as it goes, but that doesn't mean CSS tables are obscuring intent.


There is a good way to do accessibility - the same way you make a mobile version of your site. Make a second version optimized for the domain.

You think that not using tables will just automatically give you loads of accessibility? It won't.


Of course avoiding tables doesn't automatically make things accessible. It makes it possible to be accessible.

Accessibility is tricky. For instance, one of the largest things that HTML tables break is the linear flow of the page. For people using screen readers or text-only browsers it becomes far, far more difficult to understand the content of a page.

CSS tables can be applied with consideration only against the hierarchal structure of the page allowing you to write pages that are accessibly legible yet stylish.

That is unless you want to make whole new versions of your site for any number of accessibility domains: modern browsers, IE 6-, blind people, lynx, mobile browsers, mobile safari, colorblind people, &c. Good luck with SEO on all of those, too.


Real, successful sites do make multiple versions for mobile and regular browsing. If neither of those work for you then you are a rounding error on a rounding error that's ignored.

Regardless, use of tables means absolutely jack * as to whether real life sites are "accessible." Lots of this anti-table stuff makes sites less accessible to regular users.


Regular and mobile browsing is one major exception. It's also generally not the trend that I'm referring to. A good site probably does make up to three versions for screen, mobile, and print views. Some sites might even, serendipitously, make out by just changing the stylesheet.

Avoiding table based layouts is not the definition of accessibility and I never implied that. They are frequently a symptom of poor accessibility, however, and then they almost always obscure the intended hierarchy of a page which defeats accessibility for text based browsers and screen readers and messes with SEO.


HTML was designed so that if you're using it correctly the first version of the site should be accessible.


Exactly--tables (CSS or otherwise) are meant for _tabular_ data, like you would see in a spreadsheet, not page layouts. And if you want to use a table, the semantic way is to use a <table> tag, not a <div> or something else disguising as one.


No, CSS tables are not meant for tabular data. The fact that something is tabular data is semantic information, not style information. Markup should denote tabular data. CSS should denote display style. There is nothing wrong with having CSS that says "lay this out in the style of a table" while the markup shows that it isn't semantically a table.


Do what the committees and bloggers tell you to, you must obey!

Does restricting yourself to using tables just for tabular data make html coding easier, faster, or more readable? No, it doesn't.


I love you tim2. Or maybe I'm just fed up at people who never have to deal with cross-browser design getting uppity about someone using a table tag to ensure consistent display.

Either way, you're right. Lack of cross-browser consistency in CSS display support (vertical centering anyone?) is what makes implementing tables in CSS a living nightmare.


One thing I've always been curious about is why the same people (not referring specifically to you, illicium) who decry the use of tables for layout use unordered lists (ul) and definition lists (dl) for their forms. If a table should only be used for data, then so should an unordered or definition list.

It's as if they still need a tag for layout, but just can't bring themselves to use the table tag and resort to other markup to accomplish essentially the same thing.

It seems like it's a matter of fashion over function (and reminds me somewhat of the "cool kids" dynamic in music, clothing, gadgets, etc.).

Disclaimer: Yeah, so I'm using divs for mostly everything now, too.


It gets worse. I have seen tabular data mangled by <div>'s...

Tables are for tabular data. Examples can be product listings and IMHO forms. You just have to look at a printed form to see that it is tabular data.


Somehow that really hurts. I know it is probably a good thing, but why not just use table, instead of redefining other elements to be tables?


You aren't redefining other elements. You're styling other elements such that they're laid out as tabular data would be, without having to redefine them as tabular data.


Next big thing? Maybe in 5-7 years when we finally stop supporting IE6/7. Until then, all these CSS3 tricks will be for hobby sites only.


The only reason I find this remotely interesting is that it stands a chance of giving table-layout loving folks no excuse to move to CSS layouts. On the other side I find it a shady under-handed not fully cross-browser supported and not backwards compatible way of making a table-layout without making a table.

Comments on the site devolved into tables vs css so I didn't read too far down.


About freaking time.




Consider applying for YC's Spring batch! Applications are open till Feb 11.

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: