5 ms·

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

pornel 12y 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.
- Leszek 12y ago
  Or "display:flexible-box", maybe even shortening that somehow. Hmm.
  - wavefunction 12y ago
    A flex-box container is pretty different than a table. Flex-boxes have a major axis whereas tables are just rows and columns, as one specific difference.
    - Leszek 12y ago
      Yeah, fair point actually.
- adamtj 12y ago
  Are html-tables bad even for their intended purpose of laying out tabular data?
  - jerf 12y ago
    No. And again, that's part of the point; "HTML table tags aren't good for layout" semantically collapsed[1] to "tables aren't good for layout" collapsed to "tables are bad" collapsed to "tables are EVIL". No, they aren't. The first collapse is easily explained by the fact that for a long time HTML table tags bidirectionally implied table layout (no way to have one without the other), but now that CSS has broken that in both directions it's not a valid simplification. (Less well known aspect of CSS table support, I'm pretty sure it's possible to take a series of HTML table elements and "undo" their tableness if you're feeling feisty. But it's a weird way to do things.) [1]: I seem to recall there's a term for what I'm reaching for. Much obliged if someone can remind me.
    - pbhjpbhj 12y ago
      >"for a long time HTML table tags bidirectionally implied table layout" // You're right, tables are fine for tabular data. But it was always thus. Perhaps if you were a html noob and hung out listening to people pissed off with table layouts you'd get confused and think all tables were bad (you definitely want a graphical layout helper app though as keeping track of them in code is a PITA). It was table tage |- table layout V tabulated data rather than just table tage |- table layout
      - nitrogen 12y ago
        I've worked on HTML that was written by someone who cargo culted all of the tables into rows of Bootstrap columns, for tabular data. It happens.
    - jeremyswank 12y ago
      "I seem to recall there's a term for what I'm reaching for." Conflated?
      - jerf 12y ago
        Specifically, a complicated concept getting simplified to a simpler concept that is easier to spread around culturally. Complicated treatises on when tables are and are not valid are much harder to spread around than "Tables are EVIL!", so the latter has a significant memetic propagation advantage. The fact that nobody has popped up so far suggests that I may be wrong about an existing term. I'd really have expected a LessWronger or something to speak up by now.
  - namsterdamus 12y ago
    Well with the world moving towards mobile display compatibility people are generally depreciating tables in favor of grid-systems via CSS because they are more customizable for formatting tables intelligibly on smaller displays. Tables don't collapse or reformat properly on small screen and what you'll get is usually multiple columns with one letter on each line while grid-systems can stack columns making it both more legible and organized. CSS grid-systems of course require more work but you can generally find them already integrated into frameworks like bootstrap. Even still if you have complex table formats it'll require more customized situational grids than generalized grid-systems but in most cases bootstrap grids works fine. However I have had times when I have tables with minimum copy and mostly icons so we opted for tables because even on small displays it collapsed just fine as opposed to grids which left a lot of empty space.
mattmanser 12y 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_one_do_layout_with_displaytable/clj374t 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 12y 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.
  - gsnedders 12y ago
    Even earlier, display: table was part of the original CSS Level 2 which became a REC in 1998 — twelve years before "responsive design" came into being. It largely followed what had been added to HTML 3.2 in January 1997 — based on what most browsers (with Netscape first) in 1996. There's also a lot of unwillingness to do much around display: table — it remains largely unspecified (mostly because we basically know web compatibility requires you to do what IE6 does — and nobody knows quite what that is, and MS people have struggled to get permission to disclose the detail).
icantthinkofone 12y 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.
deleted 12y ago
[deleted]
ZeroGravitas 12y 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.

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.

Leszek 12y ago
Or "display:flexible-box", maybe even shortening that somehow. Hmm.
- wavefunction 12y ago
  A flex-box container is pretty different than a table. Flex-boxes have a major axis whereas tables are just rows and columns, as one specific difference.
  - Leszek 12y ago
    Yeah, fair point actually.
adamtj 12y ago
Are html-tables bad even for their intended purpose of laying out tabular data?
- jerf 12y ago
  No. And again, that's part of the point; "HTML table tags aren't good for layout" semantically collapsed[1] to "tables aren't good for layout" collapsed to "tables are bad" collapsed to "tables are EVIL". No, they aren't. The first collapse is easily explained by the fact that for a long time HTML table tags bidirectionally implied table layout (no way to have one without the other), but now that CSS has broken that in both directions it's not a valid simplification. (Less well known aspect of CSS table support, I'm pretty sure it's possible to take a series of HTML table elements and "undo" their tableness if you're feeling feisty. But it's a weird way to do things.) [1]: I seem to recall there's a term for what I'm reaching for. Much obliged if someone can remind me.
  - pbhjpbhj 12y ago
    >"for a long time HTML table tags bidirectionally implied table layout" // You're right, tables are fine for tabular data. But it was always thus. Perhaps if you were a html noob and hung out listening to people pissed off with table layouts you'd get confused and think all tables were bad (you definitely want a graphical layout helper app though as keeping track of them in code is a PITA). It was table tage |- table layout V tabulated data rather than just table tage |- table layout
    - nitrogen 12y ago
      I've worked on HTML that was written by someone who cargo culted all of the tables into rows of Bootstrap columns, for tabular data. It happens.
  - jeremyswank 12y ago
    "I seem to recall there's a term for what I'm reaching for." Conflated?
    - jerf 12y ago
      Specifically, a complicated concept getting simplified to a simpler concept that is easier to spread around culturally. Complicated treatises on when tables are and are not valid are much harder to spread around than "Tables are EVIL!", so the latter has a significant memetic propagation advantage. The fact that nobody has popped up so far suggests that I may be wrong about an existing term. I'd really have expected a LessWronger or something to speak up by now.
- namsterdamus 12y ago
  Well with the world moving towards mobile display compatibility people are generally depreciating tables in favor of grid-systems via CSS because they are more customizable for formatting tables intelligibly on smaller displays. Tables don't collapse or reformat properly on small screen and what you'll get is usually multiple columns with one letter on each line while grid-systems can stack columns making it both more legible and organized. CSS grid-systems of course require more work but you can generally find them already integrated into frameworks like bootstrap. Even still if you have complex table formats it'll require more customized situational grids than generalized grid-systems but in most cases bootstrap grids works fine. However I have had times when I have tables with minimum copy and mostly icons so we opted for tables because even on small displays it collapsed just fine as opposed to grids which left a lot of empty space.

mattmanser 12y 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_one_do_layout_with_displaytable/clj374t 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 12y 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.
- gsnedders 12y ago
  Even earlier, display: table was part of the original CSS Level 2 which became a REC in 1998 — twelve years before "responsive design" came into being. It largely followed what had been added to HTML 3.2 in January 1997 — based on what most browsers (with Netscape first) in 1996. There's also a lot of unwillingness to do much around display: table — it remains largely unspecified (mostly because we basically know web compatibility requires you to do what IE6 does — and nobody knows quite what that is, and MS people have struggled to get permission to disclose the detail).

icantthinkofone 12y 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.

deleted 12y ago

[deleted]

ZeroGravitas 12y 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.