I already find this technique useful sometimes when making advanced menus, like one that is centered and where the menu items are variable in width.

By the way, you can also style the <code>form</code> element with <code>display:table</code>, since it also is a container. Saves you a <code>div</code> /purist :)

The preview doesn’t allow me to use the <code>code</code> element, while the Textile preview does.

The form you’ve shown would be usable right now. With IE7 the labels just wind up above the input fields, which seems okay. However, the whole page layout doesn’t degrade very well in IE7.

CSS Tables for layout are a bad idea. They offer nothing but a semantically prettier table. With all the remaining problems of a table.

http://mattwilcox.net/archive/entry/id/1030/

David, I think you’re confusing CSS “tables” with HTML tables, which do lock in presentation and source order. CSS “tables” are simply settings in the CSS. If you want to change it so the first div moves to the right, just change it from display: table-cell; to float: right; and Voila! You might want to reread the article.

Tim, CSS3 also allows for anonymous elements… It’s possible to get DIVs to act as “table-cells” in a row, without surrounding DIVs playing the roles of “table” and “tr” This short article just scratches the surface of the possibilities

Actually, you don’t even need to add additional markup or CSS for table“wrapper” elements (display:table). You can simply create row wrappers (display:table-row) with “cells” inside and it will display the proper layout. Just removes some complexity, which is really the big problem with this approach. However, I can still hardly condone it as a standards-based approach.

Many interesting informations!!! Really great site :) CSS3 also allows for anonymous elements… It’s possible to get DIVs to act as “table-cells” in a row, without surrounding DIVs playing the roles of “table” and “tr” This short article just scratches the surface of the possibilities.
Thx

I’ve tried out the css tables before and obviously because of IEs… reputation that was instantaneously relinquished as a method.

I’d love to check out your book though looks like an interesting read… I’m wrong about css… dam 12 days till Christmas wow

As this technique is great — simple and powerful — I have to say I won’t be needing to know anything about it for many years to come yet.

IE6 and IE7 will still hang around for a long time, unfortunately (as you also, in a way, state near the bottom of this article). I envy those who can take this and similar techniques into practice right away. The project would have to be special, to say the least.

Some of the markup structure could probably work for older browsers with different styles, but this wouldn’t be more effective than just writing all the float work-arounds in the first place.

I don’t know, I’m tired of ‘dreamy’ articles, tired of waiting for the browsers to catch up. Tired of having great techniques available that I can’t really use.

I’m curious if the Dean Edwards’ JavaScript files (which Jeremy Keith mentioned a few days ago) can help with IE6&7’s handling of CSS tables. (I don’t remember anything from the documentation but could be mistaken. Please let me be mistaken!)

I read the book “everything you know about css is wrong” and I have to tell you that the title is definitely misleading and a huge exaggeration!

The book basically is about css tables (like this artikle) and shows interesting examples of how to use this.

The rest of css stays untouched, because everything we learnt about css is still right!

I’m glad someone finally mentioned that excess DIVs isn’t always a bad thing (within reason, agreed). Semantic purity does not extend to DIVs, for the reasons given. Good show.

it’s an easy way to create a page with css & xhtml
IE6 don’t support that but its not a big problem

thanks your for this useful article

I believe its up to Us, the designers and developers, to move forward. Yeah, IE is a worthless pile of garbage and everyone is lazy enough to let that garbage keep the community behind. But think about this, I work on a web application built close to 2001 and its nothing but tables. I wish the programmer had the fore site to use CSS for all its worth. Now the project is so far along and we have so many clients using the current version that its nearly impossible to change its structure to even include a ‘ul’.

Every personal project I work on now will implement current standards in css and html, and I will just plug-in legacy support for crappy browsers. Because when the time comes to stop supporting IE6 and 7, it will be much easier if all I have to do is delete a file.

I may even work on restructuring WordPress to use nothing but CSS tables.

Stop whining and break out your IE conditional comments, because not moving forward is just like supporting IE and old standards.

Using CSS tables for forms is an eye-opener—it’ll certainly make forms more bullet-proof in terms of design; and it’ll be a hell of a lot easier to define the styles than it is currently.

@chris: Whilst I sympathise with your frustrations with IE6 & 7 (oh, God, do I), abandoning them isn’t a realistic option for most of us; and it won’t be for some time to come. One of my clients has around a 90% user base of IE6 users. We can’t just treat them as second-class citizens: they pay the bills, :)

You’re right, those conditional comments will be used for quite some time; and in fact they’ll be doing more heavy lifting, now that more of the layout will (of necessity) be shunted off to them.

I’m buying the book right away! I’ve never tried using CSS tables but was intrigued after reading Andy Clarke’s article on For A Beautiful Web.

Nice work! Keep it up!

CSS Tables for layout are a bad idea. They offer nothing but a semantically prettier table. With all the remaining problems of a table.

Matt – did you even read the article? Of course, it’s possible to fall into a trap of using CSS tables badly – just as it’s possible to misuse any tool.

But look at Kevin’s log in form example. There’s no additional markup (in fact, a lot less markup than many people would currently add to provide CSS hooks). There’s nothing at all that introduces the problems associated with HTML tables for layout.

Can you use colspan or rowspan to turn it into a proper table? Or is it just for columns, not actually building a ‘proper’ table with a header and a footer?

But look at Kevin’s log in form example. There’s no additional markup (in fact, a lot less markup than many people would currently add to provide CSS hooks).

Maybe I’m missing something, but looks to me like there are two extra elements for each label/input vs. what you’d need if you weren’t using CSS tables. The span seems wholly unnecessary, and the div wrapping each set should only be necessary for IE6… where CSS tables fail anyway, right?

Just echoing some earlier posted sentiments but worth repeating: just b/c IE8 is going to be released sometime in 2009 DOES NOT mean it is going to be so quickly adopted by all the IE6/7 users out there (who account for somewhere around 70% of typical market share still, on the conservative scale).

I’m not denying the fact that one could fork their code to supply CSS tables for all “modern” browsers and deliver “fallback” float/positioning layout styles via conditional comments to support IE6/7. But what’s the point of all that extra work? From a business/production standpoint, that’s just not practical.

Whereas, I’ve always been able to get even the most challenging layouts to work cross-browser with floats etc. Yes IE needs to be served a few fixes usually… but certainly it’s less work to make minor tweaks for one technique as opposed to fully coding two entirely different CSS layout models.

You could argue for graceful degradation and let IE6/7 basically choke on the CSS tables and merely get a simplified version of the design. But try telling a paying client their site won’t display as designed for such a large share of the market. Also not a practical option in most real world situations.

So yes, the idea of CSS tables is indeed interesting. It is definitely worth being familiar with for future use, and of course good to have in your toolbox for use whenever/wherever appropriate right now. 100% agreed.

But to call CSS tables the “first tool you reach for” as a production layout technique? That’s an overstatement. Just my opinion, though.

Speaking of overstatements, and comments above regarding the book Mr. Yank is hawking… yes, I agree the title Everything You Know About CSS Is Wrong! is misleading. The entire book is devoted to CSS tables as a layout technique, and we all know CSS covers a whole lot more than just layout.

I am curious to thumb through a copy, however, as I’d really like to see Kevin’s suggestions for addressing the source order limitations with CSS tables.

From an SEO and accessibility standpoint, layout via CSS floats provides flexibility in ensuring the most important content can come first in the source order regardless of the design requirements.

Whereas, CSS tables for layout requires the content to be in the same order in the markup as it needs to be displayed on screen, which is of course mixing content with presentation. I should probably do some tests first to confirm, but that’s my understanding. Please correct me if I’m wrong.

That’s really impressive! I’ll have to admit: I am starting to develop faith in Microsoft which I’ve never had in my young life.

Me, I’ve thrown IE6 out the window (while still supporting IE7). But objectively speaking, the rest are right: IE6 and 7 will still be around for the years to come (two, three?), and in order to move forward we’ll probably have to draw a line precise to the very micron. I concur especially with David regarding the adoption of IE8 and the practicality of CSS tables as it is now. He’s certainly hit the nail on the head.

I’m really glad to see some critics are amongst the last few commentors. The only thing CSS tables improves is the possibility to use equal-height columns in flexible layouts, but I see as much semantic clutter (among which I count divs and spans, yes) in this method as in other methods like the faux columns or the ‘holy grail’ .

Apart from that I don’t really see the difference between using css tables and regular tables. In short, I agree with Matt and David.

Echoing @David above. IE8 just coming out isn’t going to change anything. While it’s interesting, I don’t see any reason to put the entire topic on the “Become more familiar with the topic when it matters” shelf and moving on. There’s is just way too much to learn to spend my time (now) on things like this.

Additionally, in the example given, simply using conditional stylesheets for IE6 & 7 isn’t a simple or trvial matter. It seems that in most cases using CSS tables would significantly increase production time without a super big benefit.

@Jon Zuck – indeed, I understand the difference between CSS tables and HTML/markup tables. My point (one of them ;) was that the CSS tables layout model binds you to a particular markup source order.

So yes, if you want the first div to move to the right (or elsewhere just other than its natural position in the flow per source order) you would have to change the CSS to not use CSS tables and instead use another positioning model such as floats. Which is exactly the example / solution you gave – and which of course makes my point: CSS tables limits the display position of content on screen to the source order. You may want to reread my comment :)

David, I think you’re confusing CSS “tables” with HTML tables, which do lock in presentation and source order.
Very interesting :) thx

It looks much like trying to force/bend CSS where it should not go. The purpose of <table> is for “tabular data” and is being referred to as such in all modern specifications (i.e. html 5).

Changing display css attributes to make div look like a cell? It’s most funny when the css-based markup has a very similar structure to an ordinary <table> but with <td> replaced with divs.

Common people. In terms of dom structure and css, thinking out-of-the-box and as a proof of concept, you should be able to create the same effect as a <table><tr><td> with <strong><cite><blockquote> – it’s just a matter of changing the display attributes to “table-*” and you’re done. But what for ?

I’d gladly go past css 2 and dump ie6, but I really miss the times, when I’ve prepared all layouts in tables. I had my tricks to make them look the same in all browsers and IE-modes. Why I miss that? Because it took me half the time to code it (even though the html tables were nested as hell) and it ALWAYS worked the way I wanted without much trouble.

Now we have a beautiful, short, semantic markup (invisible feature, only for devs) and broken-with-each-version-of-ie-and-firefox layouts that get awful (visitors, visible feature).

It kinda reminds me of the difference between a mac and a pc – with a pc you get compatibility with anything, option to choose and pick from many vendors and technologies. With a mac, you have one platform, one vendor and one seamless technology. With the all-compatible pc came drivers, conflicts, hangs and head scratching. With the mac comes a peaceful mind and expectable results even though mac os is based on unix, and is more ambiguous if you want to hack it.

Thanks for article. Keep working, please.

p.s. found 2 useful things (new book for reading “about css is wrong” and new interesting blog CSSBIT)