The Anti-hero of CSS Layout – “display:table”

http://colintoh.com/blog/display-table-anti-hero

by p0larboy • 12 years ago

130 67 12 years ago

addict3d• 12 years ago

You can achieve the same results with absolute positioning, which I prefer.

Sharlin• 12 years ago

I'm pretty sure you can't, except in the trivial case of a table with absolute-sized everything, or alternatively by reimplementing the table algorithms in JS.

bbx• 12 years ago

Problem with absolute positioning is that you remove elements from the natural flow of the page, meaning that adjacent elements aren't aware of the dynamic height of a fixed footer for example.

igvadaimon• 12 years ago

What I didn't understand from this blog post is WHY display:table is really bad.

pornel• 12 years ago

It's not. That's the point.

"Tables for layout are bad" applies only to use of <table> HTML markup for layout. `display:table` achieves the same layout, but without presentational markup and accessibility problems that html-tables-for-layout caused.

If it was called "display:stretchy-box", nobody would mind.

Leszek2• 12 years ago

Or "display:flexible-box", maybe even shortening that somehow. Hmm.

adamtj• 12 years ago

Are html-tables bad even for their intended purpose of laying out tabular data?

mattmanser• 12 years ago

That's not what he's saying. He's saying they're good at times but he took ages to realize that because the old table based layout using <table> used to result in extreme tag soup.

If you are looking for reasons why they're actually not that great anyway, this succinct post on /r/webdev reminded me why I haven't unsubbed from that highly variable sub:

http://www.reddit.com/r/webdev/comments/2k8ud2/why_does_no_o...

In this case, the example the OP gave at the beginning, a dashboard, can't work with a responsive layout using display:table, which is a feature you'd kinda expect in this day and age.

So they finally release a half decent display:table and it's too late as we now need responsive designs.

Pretty much sums up how pants the W3C process is.

joshuacc• 12 years ago

So they finally release a half decent display:table and it's too late as we now need responsive designs.

I'm not sure what you mean by "finally release." The display: table property was part of the CSS 2.1, which became a Candidate Recommendation in 2004 and an official Recommendation in 2011. It also works perfectly in IE8, which was released in 2009.

The term "Responsive Design," on the other hand, wasn't even coined until 2010, and didn't really become mainstream for another 2-3 years.

There were a couple of years when working with display: table was perfectly reasonable and the "Responsive Design" trend hadn't yet hit the tipping point.

I dislike overdone/late W3C processes as much as anyone, but this isn't a good example of that.

icantthinkofone• 12 years ago

He mentions it in the article. People associated it with the HTML table element. Using the table element for page layout affected the document's structure which is why that's a bad thing but the CSS table property does not affect structure.

ZeroGravitas• 12 years ago

It's not. But nobody ever got to use it, because IE6 and IE7 didn't support it, and now it's only useful for supporting IE8, IE9.

insin• 12 years ago

It still takes me a few beats from thinking "I need a flexible grid layout here" to remembering I can just use display:table, having spent so many years discounting it off-hand because of Internet Explorer.

archagon• 12 years ago

As a fairly new web developer, who's doing it for fun, I'm so glad that I can just say "screw it, I'm using flexbox" for 99% of these sorts of problems!

OniBait2• 12 years ago

What does IE have to do with this? Wasn't the whole anti-table movement a response to the abuse of <table>, <tr>, <td> HTML tags for layout? I can't think of any particular issue with Internet Explorer and display:table...

recursive• 12 years ago

I think IE7 doesn't support display: table;

vixen99• 12 years ago

'I absolutely dissent HTML table-layout'. Don't you have to dissent from?

jrochkind1• 12 years ago

yeah, that makes no sense grammatically, I think maybe OP meant "detest".

darrhiggs• 12 years ago

> E8 and IE9 still make up 32% of the browser market share and that is a lot to give up if I was to revert to the flex solution

Yes, if you have an even worldwide visitor share. Can I Use[0] puts USA IE9 usage at 3.86% and IE8 at 7.28% (11.14% in total). If your user base is different it would be wise to examine the data before discounting flex-box based on worldwide stats.

If anyone has access to netmarketshare's USA[1] (used in the article) data, it would be nice to see what it is.

EDIT: Also the article's stats[2] are for desktop only. It seems[2] that mobile support is relatively high with Can I Use[0] stating that total USA support = 86.46%.

[0] http://caniuse.com/#search=flexbox [1] http://www.netmarketshare.com/browser-market-share.aspx?qpri... [2] http://www.netmarketshare.com/browser-market-share.aspx?qpri...

marknutter• 12 years ago

netmarketshare also tracks users based purely on the user agent, regardless of how much browsing they do. As a result, it skews toward older browsers like IE8 and IE9 whose users typically don't surf very much at all. IF you track browser usage based purely on page views per browser IE8/9 represent a far lower percentage of all browser usage.

Keats• 12 years ago

I was going to comment on that as well.

That depends on your target, my blog gets about 1% of traffic from IE8/9 so using flexbox would be ok if I wanted. If you're working on gaming/tech things for example, chances are most of your users will be on chrome/firefox and you can safely use it.

And flexbox is so nice.

IkmoIkmo2• 12 years ago

Agreed. A friend of mine suggested Flexbox for a web-app I was going to build him. I glanced over the requirements and then asked him his traffic for <IE10, and it was nearly 10%. (Website has 1m+ pageviews per month).

Not nearly as bad as 32%. And the number continues to drop.

btown• 12 years ago

That said, if I told people on this site that I was offering a PaaS with only 1 nine of reliability, I'd be laughed out of the park. And yet that's exactly what I'd be saying if I were to advocate for ignoring <IE10.

wattengard• 12 years ago

... something something inhouse-app on ie9 install base ...

rpwverheij• 12 years ago

interesting! will look this up again when I have one of the described problems. In the meanwhile, I'll push an update to my brain: not everything related to tables is old / bad!

avighnay• 12 years ago

> the holy grail layout

gave me an instant smile, I remember 7 years back, wracking my brains out to get it done for a project!

blablabla123• 12 years ago

Most of the examples can be achieved with flex layouts, Stylus+nib even manages the browser prefixes for you. Just mentioning this, because last week I considered a {HTML|CSS} table layout. As it turned out, solving the problem with tables was more difficult than using other methods...

amwelles• 12 years ago

I've been using this in some of my latest projects. Works like a charm!

yoklov• 12 years ago

The biggest downside of display: table and friends is performance. Changing any CSS or DOM properties will basically cause a full page (!) relayout and repaint on a lot of browsers (especially mobile safari).

scotty792• 12 years ago

Doesn't

  table-layout: fixed;

help in Safari?

pcwalton• 12 years ago

As someone who just implemented automatic table layout and is now intimately familiar with the details of how it works, I'd like to suggest that the problem with table-based layout is that it's excessively complex and largely undocumented and unspecified. The results will differ between browsers. Even the parts that have draft specs (which don't include, for example, percentage heights) are much more complex than CSS blocks and inlines: look at sections 4.1 through 4.4 of [1] for example.

[1] http://dbaron.org/css/intrinsic/

mariusc23• 12 years ago

Yes! I remember running into a really obscure bug that was caused by having an element nested into a parent with display: table. I don't remember the details, but I remember we were using the sticky footer technique described in the article.

macNchz• 12 years ago

I ran into a similar situation a while back while building an internal dashboard that had a fairly complex nested-table layout. It wouldn't render properly because of a bug in Firefox that had been open since 2000. I think this was the one (it seems they've fixed it): https://bugzilla.mozilla.org/show_bug.cgi?id=63895

DigitalSea• 12 years ago

I remember the anti-html table movement fondly. While everyone knew tables were bad for certain purposes, the hate movement brainwashed people into thinking that using tables for anything (including tabular data) was bad. And so, people started marking up tabular data using DIV's and CSS properties that suffered from a myriad of compatibility issues, convincing themselves that using floats was the right thing to do.

And we all bought into it, well most of us. Every time an overzealous developer would spot the use of a table tag, hell would reign down upon Earth lambasting the developer for using a table, even if it was being used for the right purpose. "how dare you use a table you noob, use floats and DIV's, they are so much better" - for a good while people were hating on using the table tag to the point where many were hating it, but could not really tell you why other than, "because tables are bad"

In many ways the web has gone full circle, Flexbox is merely a more powerful CSS version of tables, in-fact there are many similarities like the ability to have columns of content of varied size sitting alongside one another. We added in a new set of properties, changed the name and made them a little bit more powerful.

I am one of those developers who have been quietly using display table for non-tabular data for a while now to solve issues I have seen other developers resort to additional markup and CSS hacks for, that either makes me a lazy developer, an efficient developer or perhaps both.

Just recently I proved a remote developer wrong in regards to responsive tables. He tried telling me and the business responsive tables cannot be done without hacks. I implemented a solution using display table and DIV's. This is for part of an app that only logged in users see, not search engines, so while it was not a true proper use of the properties, it allowed me to implement a true responsive solution for tables that will not degrade SEO or performance, as it is not public.

Simply using media queries I was able to make my table DIV's collapse by setting them to display block, adding in some type and colour adjustments, and it just worked. No need to use before and after pseudo selectors to hack in support for titles and stacked tables. No hair pulling when the business asked me to support IE9 either.

As developers we all mostly want to do everything correctly and use the proper tags and CSS properties in the appropriate way, but sometimes when you have a deadline to meet and time is running out, you have to do what you have to do to get things done.

StefanKarpinski• 12 years ago

Using tables is back? Sweet. Now my knowledge of HTML is relevant again.

vlunkr• 12 years ago

Exactly, too many developers think that tables are always bad. Really it's about using the right tool for the right job, and there are times when display:table will save you tons of work. There was a time when tables were used for everything, so people started blaming the tool instead of the bad practice.

georgemcbay• 12 years ago

Yup. Same thing that happened to goto, basically. People got so up in arms about the overuse of the concept (and they had a wonderful catchphrase thanks to Dijkstra) that it became vilified to the point where any time it showed up in code you'd likely incite a mini holy war that would usually end in its removal (if for no other reason than to shut everyone the fuck up). This despite the fact that (in C in particular) goto is sometimes absolutely the clearest, most practical way to deal with a function localized many-to-one flow control situation.

alex_duf2• 12 years ago

To be honest the css property display:table isn't bad itself.

What we were reproaching to the <table> tag was to be wrong on the semantic side.

If you use divs and style them with display:table I see absolutely nothing wrong here, semantic is right, you infer the display behaviour through css.

crystaln• 12 years ago

For tabular data, tables are semantic.

cpncrunch4• 12 years ago

I think you're still falling into the religious trap here. Quite often I will put inline css into the html page, or use a table tag. Normally I would never admit this, as I would be hounded by css zealots. Often I do this when I'm building a user interface in html/javascript, or for a single one-off layout in a single page. Using external css in these cases would make it much more difficult to understand/maintain.

I can understand the argument that "you should put styling into an external css so you can just change it in one place rather than throughout the code". However that argument doesn't apply to many use-cases.

rado• 12 years ago

My IE8+ grid is based on display: table and just works. http://natuive.net

scotty792• 12 years ago

If you use table for layout, remember to also use

  table-layout: fixed;

It will improve table behavior (content will no longer affect horizontal layout of the table) and performance, saving repaints, reflows and whatnots.

cpncrunch4• 12 years ago

It really depends why you are using the table layout. Quite often the reason for using tables is to lay out multiple items based on their content size, so you want the default automatica layout.

rporrata2• 12 years ago

We have come full circle. Tables to CSS grid based frameworks back to Tables?

Tables are generally for structured content. They work and are perfect - Excel for example. Hundreds of cells on a page? Rendering / performance would be a nightmare.

CSS grids for layout - perfect and may cause some pain. Once you get it right the performance is there.

With css/tags there can be abuse and we must think of how we plan to present our content to the user who ultimately judges our work.

They do not care about the how it was implemented, they just want it now and that it works consistently.

We need to ensure we keep our sanity the balance is in between the two.

On another note, the use of colgroups should be mentioned with the above. It does help with rendering performance. http://www.w3.org/TR/html5/single-page.html#the-colgroup-ele...

- Enjoy!

lacoolj• 12 years ago

This is the most appropriately-named article, ever.

The Anti-hero of CSS Layout – “display:table”

Related Stories