Hacker News Reader

Comment by igvadaimon | Hacker News Reader

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

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.

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

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.

Yeah, fair point actually.

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

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.

>"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

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.

"I seem to recall there's a term for what I'm reaching for." Conflated?

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.

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.

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.

> 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.

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).

At least it was mostly copied from Netscape, and source for that is available as Mozilla Classic (from the cancelled Mariner project). I used it to figure out where HTML legacy color parsing come from.

Sadly, we know that what web compat relies on isn't quite what NN4(-ish) does, so the mere fact that that is available doesn't really help too much. :(

Actually, the same thing is true for HTML legacy color parsing too, but the only difference there is a few lines of code. I think it is these lines that was added (from http://mxr.mozilla.org/classic/source/lib/layout/layimage.c#...):

  if (bytes_per_val > 4)
  {
        bytes_per_val = 4;
  }

Table parsing is nowhere near that similar. It's almost certain IE's algorithm is largely different — it just obtains similar results to NN's in most cases.

But yea, I have been thinking of the idea of a IE only shared source program for a while now.

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.

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.

Reply on news.ycombinator.com