Will you adopt display:table for layouts?

IE6/7 don't support it, but IE8 and FF do

[steve]

I've just glanced through a book called 'Everything you know about CSS is wrong'

The basic argument is that using floated layouts or absolute positioning will become obsolete because IE8 supports display: table.

Note, this is not the same as using old html tables for layouts, CSS is used to style divs as 'tables' allowing for more robust layouts. It doesn't work with older versions of IE, so this is for the future.

I've just checked my stats, IE8 - 1.2%, IE7 - 53% and IE6 - 21.6% so for now I will not be changing, but in 6 months or a year who knows.

What do you think, is this a good technique, will you adopt it?

[choster]

It will be a long time before enough users have browsers that can understand display:table to make any sort of difference. It's not on my agenda for 2009 or 2010.

[rocknbil]

Probably not. If the content is tabular data, it should go in a table, this won't change. It it's not tabular data, it can easily fit into a semantic element that describes the content, so why would you need display:table? A list goes in a list, a paragraph in a paragraph, page divisions in divs . . .

Opinion subject to change based on experimentation and development trends . . .

[bedlam]

It it's not tabular data, it can easily fit into a semantic element that describes the content, so why would you need display:table?

This doesn't make a lot of sense.

I think you're being misled by the word 'table' in the property. It's fair enough not to put 'non-tabular' data into a table, but it's pretty absurd to think that content should not be presented in a certain way because the CSS property used to control that presentation contains the word 'table' instead of something like 'grid' or 'column'*...

-- b

*At the current rate of CSS3 adoption, we should have real columns [w3.org] in only ten or twenty years!

[sgietz]

There should be a painless way of having columns on a page without any dirty hacks. I think display:table should be viewed as an emulation of how a table handles layout, not the actual purpose of a table. Perhaps we should call it display:column, just to hush up the purists.

Designing web pages is supposed to get more intuitive as time goes on, but we're actually being fed these subjective reasons for why we can't use this and should use that. While I can agree with the basic sentiment, let's not turn CSS and HTML into a nightmare like our tax-code.

Having, say, 3 columns side by side, with control over where the content is positioned inside of those columns (i.e. vertically, horizontally), is a perfectly acceptable layout, and CSS should support it. Period.

Browser support is another topic altogether.

[rocknbil]

This doesn't make a lot of sense.

Because I don't "see" columnar data and tabular data as the same thing.

[bedlam]

This doesn't make a lot of sense.

Because I don't "see" columnar data and tabular data as the same thing.

Sorry, but I can't see any way in which this is relevant to a discussion of the presentation layer. As I mentioned before, markup should be descriptive--'semantic' if you like--but that's pretty much wholly unrelated to questions of styling.

--b

[swa66]

As far as columns go, I'd rather use the CSS3 columns [w3.org] than try to map semantic elements onto display:table-* .
You'd need to enter the row and cell elements into the content and you'd need to split the content into the cells. Leading to non-semantic stuff in the content and most probably a case of divititis with a <div class="table">, a bunch of <div class="tr"> and even more <div class="td">.
Nothing to be gained there that way.

OTOH it might be a good thing in certain other situation, such as grouping a thumbnail with its description, but even then a need to have table table-row and table-cell will require more elements than needed in the html ...

[SuzyUK]

'Everything you know about CSS is wrong'

I take objection ;) (actually I just don't believe the hypey title!)

and no I don't think I'll be using display: table; much, and especially not for page layout.. yes I might use it if I particularly want a list to look (display) like a table, or my home page div structure to look/display like a tabular grid or spreadsheet.. but you know what, I'm not about to go back 15 years to learn to splice/slice images all over again becasue then the source order might not make sense to all these new fangled media, but anyway each to their own

Careful on this one, the title of the book could be about to lull you into the false sense of security that a rigid grid can give to design and make history repeat itself regards sliced images, bloated source etc..

but then if everything I know about CSS is wrong, I could be wrong..

[poppyrich]

I might as well use a table and save myself a lot of trouble.
All I'm doing with display:table, et al, is swapping out the table, tbody, tr, and td tags with other tag names.

Why bother. What's gained?

[steve]

This is an example I've been laying around with: (not mine - taken from the book and changed, mods please delete this post if this is not acceptable usage).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us">  
<head>  
<style type="text/css"> 
#main { 
display : table; 
border-collapse: collapse; 
background-color: #FFFF00; 
}  
#header { 
background-color: #800080; 
color: #FFFFFF; 
font-weight: bold; 
}  
#nav { 
display: table-cell; 
width: 180px; 
background-color: #00FFFF; 
}  
#extras { 
display: table-cell; 
width: 180px; 
padding-left: 10px; 
border-right: 1px dotted #d7ad7b; 
background-color: #FF0000; 
}  
#content { 
display: table-cell; 
width: 380px; 
padding-left: 10px; 
background-color: #00FF00; 
}  
#footer { 
background-color: #C0C0C0; 
} 
</style> 
</head>  
<body> 
 <div id="wrapper">  
 <div id="header">Header text</div>  
 <div id="main"> 
 <div id="nav">Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
  Pellentesque at neque ac quam lobortis ornare. Duis commodo. </div> 
 <div id="extras">Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
  Pellentesque at neque ac quam lobortis ornare. Duis commodo. </div> 
 <div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
  Pellentesque at neque ac quam lobortis ornare. Duis commodo. </div> 
 </div> 
<div id="footer">Footer text</div> 
</div> 
</body> 
</html> 

In Opera and FF the 3 columns are displayed side by side, in IE7 they are underneath each other.

The html is unaffected, the layout is done purely in css. To me this is a startlingly easy way to layout a page using css, it's much easier to comprehend than some of the other methods currently used!

[edited by: swa66 at 6:59 pm (utc) on Feb. 21, 2009]
[edit reason] fixed horizontal scroll [/edit]

[poppyrich]

CSS guru Eric Meyer recently blogged about this.
The topic was the absence of layout abilities in CSS, especially the difficulty in creating equal-height columns.
He sums it up this way:

let’s put the whole “display: table-cell will grant those [layout] abilities through CSS” to rest. Saying that is just saying “use tables for layout” with different words. Turning a bunch of divs or list items or whatever into table-role boxes is no better than just using table markup in the first place, and it’s arguably worse. Using element names other than table and td to create layout tables, and then claiming it’s not using tables for layout, borders on self-deception.

[Jonesy]

Steve,

That even works in an old, ver. 3.3.2 konqueror!