21 CSS tables

“I’m saying the W3C has failed to come up with a way to layout designs in CSS that is better than using tables.”

That’s not correct. The W3C has included CSS tables in CSS2. CSS tables work very well for such layout – in browsers that support them. Unfortunately most browsers don’t. But that’s hardly the fault of the W3C.

posted at 12:05 pm on January 10, 2004 by Bertilo

22 re: CSS vs. Tables

Brad Bice:
>But we’re moving forward. We have the
>techniques and technology available for CSS-
>based layouts to work now, why not use them?

Because these “techniques” are nothing more than hacks and workarounds used in an attempt to overcome CSS’ limitations.

Bertilo:
>That’s not correct. The W3C has included CSS
>tables in CSS2. CSS tables work very well
>for such layout – in browsers that support
>them. Unfortunately most browsers don’t. But
>that’s hardly the fault of the W3C.

W3C: Content developers should avoid using (tables) to lay out pages (“layout tables”). http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-avoid-table-for-layout

posted at 12:53 pm on January 10, 2004 by steve

23 re: CSS vs. Tables

There really isn’t an argument here. Proper markup will lead to proper styling using CSS. See: http://www.csszengarden.com

Sure, some “hacks” are used, but can’t slicing up images and sticking them into table cells be called a hack? Shouldn’t using tables for design layouts be called a hack, since it is using tables for methods other than what they were originally for?

Bottom line is CSS is made for style/display/visual effects. Tables are made for data. There’s no reason today’s websites can’t be created to take advantage of both and leave the table layouts of the past behind us.

I don’t see this article’s technique as a hack. If you look at it as a hack, ok, that’s you. But why be negative about it, and just look at it as it is. It’s a great way to develop great looking designs.

posted at 02:49 pm on January 10, 2004 by Brad Bice

24 Good technique

I had been using a outer div with the background color of my left column, then absolutely positioning a content column with a different color background and a left margin.

This is a good alternative and is very simple.

posted at 03:30 pm on January 10, 2004 by Ryan

25 display:table != <table>

steve:
> W3C: Content developers should avoid using
> (tables) to lay out pages (“layout tables”).

I don’t think you get the difference. Styling divs AS tables keeps you content structured, but you can style using a table layout. Using tables to create a layout is a BAD thing, since your content isn’t structured anymore.

posted at 04:51 pm on January 10, 2004 by Anne

26 Lets take a step back here!

“Yet another approach, which I take a perverse glee in suggesting, is to emulate table behavior through your CSS.”

With all due respect, table behavior is not being emulated here. The table tag was hijacked to create layouts, something for which this tag was not intended (wrong tool for the job, but it gets it done; is this not a hack?).

Take a step back and realize that this approach is being used for presentation, to acheive a layout, not to emulate anything, but rather to acheive a goal (layout or presentation) that once was done with tables (wrong tool) and now is being done with css (right tool).

One of the goals of css was to separate presentation from structure. Dan’s column presents a method in which presentation is separate from markup. I see no hacking here, but rather the proper use of a tool to do the job it was intended to do.

posted at 03:54 am on January 11, 2004 by Mike

27 Finally, that happen !

Thanks Dan, I was looking for a such method for a while, and finally I [em]invent[/em] it by myself. Indeed my own blog http://www.cafefort.com uses the same technique but have a very little problem, even using the Tantek hack, i must decrease my width by 2px to keep the design presentable. Now it works fine :) I’m so proud ;)

posted at 09:19 am on January 11, 2004 by Karim

28 re: display:table != <table>

Anne:
>I don’t think you get the difference.
>Styling divs AS tables keeps you content
>structured, but you can style using a table
>layout.

I don’t think you get my point. I have no problem with a tabular design, I’m saying CSS is inferior to <table>‘s as a layout tool, and that shouldn’t be the case.

posted at 09:25 am on January 11, 2004 by steve

29 A little quirk

I had a little problem with this technique that took me quite some time to solve.

My site is divided into two columns, much like www.alistapart.com, but the background was a little off centre with respect to the content.

The solution was to make the width of the two columns together an even number.

I just thought I’d share this in case anyone else was having the same problem.

posted at 04:02 pm on January 11, 2004 by cqmoi

30 re: Lets take a step back here!

Mike: I don’t want to quibble over semantics, but if you look at the CSS I wrote in my sample page, you will see that it does emulate table formatting: DIVs and Ps are styled as “display: table-row” or “display: table-cell”. I think it is fair to say that is emulating table behavior.

Steve: how are clever CSS techniques “hacky” but using table tags (which were intended as a way to mark up spreadsheets and the like) to lay out web pages is not? CSS is not inferior to table-tagged layout—indeed, as my example shows, it encompasses that exact style of layout without ever putting a structurally irrelevant table tag in your HTML. Plus a lot of other types of layout that would be difficult or impossible to achieve using table tags.

posted at 05:56 pm on January 11, 2004 by Adam Rice