7 ms·

I've seen people seriously recommend marking up your document like this: <div style="display: table;"> <div style="display: table-row;"> <div style

I've seen people seriously recommend marking up your document like this: <div style="display: table;"> <div style="display: table-row;"> <div style="display: table-cell;"> </div> </div> </div> How in the nine fires of hell is that better than just using a table?

castis 7y ago
I am convinced that people who recommend things like that have no idea where we are or how we got here.
HideousKojima 7y ago
Probably to avoid the dumb limitations on having forms within a table? Still an awful and ugly way to do it
mgr86 7y ago
This makes me cringe. I may have been 12 but I was making websites in 1998. And they were decent--I mean, it was a lot of right click > view source copying. But I fell in love with the Web Standards movement. I was probably the only 13 year old whose book shelf included books on perl, css, xml, and the like.
- carldaddy 7y ago
  I feel the same way. It's probably because I'm 90s kid and nostalgia, but I wish web standards were taken seriously.
hinkley 7y ago
CSS Zen Garden seemed to have a message that you don’t need tables for everything, but it was astonishing how few of the featured designs ever handled responsive layout properly. Getting text to fit into a rectangle by cheating was very common and you’d see bleed everywhere at a different resolution. Until flexbox, there was no way to fix this without resorting to table cell behavior. It ultimately soured me on the Garden. And thankfully I got to use CSS3 shortly after.
- gridlockd 7y ago
  Even with "display: table" or flexbox you couldn't do something as simple as colspan.
  - hinkley 7y ago
    Oh man, I had blotted that out. There’s a somewhat arcane set of table styles that will give you proportional layout of blocks that is more powerful than colspan. I found that it was often worth the trouble of reaching for the more sophisticated solution.
- djsumdog 7y ago
  Keep in mind Zen Garden was written WAAAAAAAAY before mobile layouts were a thing. Back then, you had mobile sites .. for people with PalmOS, BlackBerry or flip phones with tiny browsers. I think my edition of this book came out before the first iPhone (I remember owning it when the girl behind me at work got the original iPhone EDGE), so responsive design wasn't a thing (I don't think media queries even existed in the CSS standard, or if they were, few were using them yet).
  - hinkley 7y ago
    I was pitching responsive (or at least, fluid) design by 2011, and I was not blazing trails. I started using the iPad as an example but tiny laptops were an issue, and in a business setting, most production projectors were only 1024 pixels, hardly anyone had the 1280s, and the cheap ones were 800x600 native with terrible interpolation. Wikipedia has this timeline: > Cameron Adams created a demonstration in 2004 that is still online.[46] By 2008, a number of related terms such as "flexible", "liquid",[47] "fluid", and "elastic" were being used to describe layouts. CSS3 media queries were almost ready for prime time in late 2008/early 2009.[48] Ethan Marcotte coined the term responsive web design[49] (RWD)—and defined it to mean fluid grid/ flexible images/ media queries—in a May 2010 article in A List Apart.[2] He described the theory and practice of responsive web design in his brief 2011 book titled Responsive Web Design. Responsive design was listed as #2 in Top Web Design Trends for 2012 by .net magazine after progressive enhancement at #1. And while the Garden was indeed around long before that, IMO it didn’t get properly cool until maybe ‘07. And once fluid and responsive came in it wasn’t keeping up. The point, I thought, was to be able to send people there to learn, and I was afraid of having to fix that kind of smoke and mirrors in our production code so I stopped telling people about it, other than other seasoned UI people fora particular design, and half the time it was to laugh at one, not learn from it.
gridlockd 7y ago
Something about accessibility and screen readers that people virtue signal about, but never actually test for.
djsumdog 7y ago
There were a lot of grid base frameworks which did this. Foundation 5 was unique in that it still used these rows, but you uses scss to assign those attributes to your elements. Your pre-compiled CSS looked clean and your HTML looked clean and your final CSS was a minified blob of crap you tried not to thing about. Really CSS Grid does the same thing; there's just more in CSS now and it's a whole lot cleaner.
spdustin 7y ago
Because assistive technologies (like screen readers) won’t interpret it as a table, but the browser will, giving you the ease of table-based layouts without the accessibility hang-ups.
- 98codes 7y ago
  A11y hang-ups? It's a benefit that it makes it less accessible? That doesn't make any sense to me at all.
  - e5india 7y ago
    I think they mean to say that sometimes you might want the visual structure of a table but you don't necessarily want it announced as a table via screen readers since it isn't data that's being represented.
  - vntok 7y ago
    You have it the wrong way round, it's a benefit that it makes it more accessible. Abled people benefit from a system where their browser considers that div as "table-like" in the way content flows through it. Likewise, disabled people benefit from the fact that their screen-readers consider the div as a simple container without imparting any sort of tabular semantics ie expecting some data organized in rows and columns.
- csnover 7y ago
  At least VoiceOver on Safari uses the `display` CSS property to decide how to describe an element unless you explicitly give an element a different ARIA role in the HTML, so this isn’t 100% correct in practice (although it obviously should be!). [0] [0] https://bugs.webkit.org/show_bug.cgi?id=197786 https://bugs.webkit.org/show_bug.cgi?id=197786
- lisper 7y ago
  The right way to fix that would have been to add a simple annotation that the purpose of the table was for styling, not semantics, something like: <table type=for-display-only ...>
goto11 7y ago
Depends - if the content isn't semantically a table (data points with a two-dimensional relationship) but you just want a table-like presentation and you want to conform to accessibility guidelines, this might be totally fine. Sure it might be more elegant to do it with a stylesheet, but for a one-off situation it is not that bad. There is a persistent attitude that presentational information in the markup is Bad and Evil. This is only partially true. Misusing semantic html elements (like using <table> for purely layout purposes) is bad because it hurts accessibility for other people. But putting CSS directly in the HTML does not hurt anybody but yourself. If you do it all over the place it becomes a mess to maintain, but in particular cases it might be the simplest solution.
jstummbillig 7y ago
This is straight out of the CSS renaissance: There used to be a world, where the only sensible way to get something look a certain way on the web was using tables. But since using the actual table element, for anyone who cared about html semantics and accessibility, was a no go, assigning "display: table" to a non-semantic element was the next best option (or rather the least bad). It will not surprise you to learn that this concept was not exactly well understood (to be fair, most things were not well understood, including js) and people started building all sorts of actual data tables out of divs with "display: table" applied, because apparently that's how you were supposed to do it. Nowadays this is obsolete, of course, mostly thanks to flexbox but also grid.
runawaybottle 7y ago
Once upon a time every website layout was defined via the Table element. Your side bar would be a cell spanning multiple rows, and inside the sidebar you’d have another nested table that defined more layout. The shift to table-less divs came almost as a massive over-correction to the abuse of nested tables. We are in similar egregious territory now days with how we’re doing styled components directly in the javascript and totally forgoing some of the principles of CSS (we are effectively in-lining styles , for everything). That’s alright, we go through this upending in frontend every 3 years anyway.
- wvenable 7y ago
  NetObjects Fusion allowed you to create pixel-perfect HTML layouts before CSS using just nested tables. It was both amazing and frightening. https://en.wikipedia.org/wiki/NetObjects_Fusion https://en.wikipedia.org/wiki/NetObjects_Fusion
  - whoisthemachine 7y ago
    I remember a tool a lot like this in my teenage days (late 90's). Even then, I knew the things it was doing were horrendous... And for what it's worth, NetObjects still exists - http://netobjects.com/ http://netobjects.com/
- deckard1 7y ago
  It's a bit worse than that, even. Instead of the abuse of semantic elements, you don't have semantic elements at all. It's a giant mess of div tags. We've 100% given up on accessibility on the web. We've also thrown in the towel on device-agnostic HTML as well. For all of the grand plans of the '90s and W3C, they all failed. Every. Single. One. This includes CSS, which is an abomination. If that weren't bad enough, let's discuss the fundamental core of the web: links. Links are dead. They are buried under a mountain of SPA walled garden jank, teased at (but never granted) on Pinterest or Quora or LinkedIn or Facebook, or out there scamming users with shortened URL services. Corporate users are subjected to annual security training lessons where they are taught never to trust links (email, text message, or otherwise) because the alternative, training users to understand domain names, is just so impractical that we have all given up. Google gave up, with Chrome. They don't even want to show a domain. It's that bad and awful. To give you an example of how shit it all really is, I recently had to look up an issue related to a Microsoft product. A quick Google search lead me to a number of Stackoverflow and blog posts on the issue. I found a number of links, pointing to Microsoft's bug tracker (links from just a year or two ago). And here's the kicker: all the links 404. The bug tracker is simply not there anymore. This is Microsoft we're talking about. They have given up on links. They have so given up on links that they can't even be bothered to let the user know what happened to those links. Things are significantly worse on the mobile web. I would estimate that a good 90% of the web doesn't work on mobile in any sort of way that would delight a user. It's more that users just deal with this massive pile of shit. Watch someone use a mobile web browser sometime. Watch the nonsense they have to deal with. The janky-ass scroll popup sluggish ad-infested dumpster fire. All of it.
globular-toast 7y ago
Ah yes. I saw this happen in the mid-2000s during the backlash against tables. You see, some visionaries had realised that the table element in html was being abused to create layout. The tools to do layout were added to css instead and the advice was to stop using tables for layout. Simple enough. But during these times there are always people who don't get the original message, or don't understand it, and just start blindly following some derivative of the original advice. That advice was "use divs". So they did. They would look at an html source and if they saw "table" they would turn their nose up but if they saw "div" they would rejoice. The irony is it was completely against the original intention which is to use html to give semantic meaning to elements. Tabular data doesn't just have a visual layout, it is rows and columns. Most people still don't understand this today although with things like markdown people are doing it even if they don't realise (unless they start embedding html/css, of course).
sgift 7y ago
Aside from what people said about screen readers (which at least makes it a bit better than tables) this is still a bad layout. Here[1] is a revised edition of a book I read in 2006 about this topic how people often just replace all table elements with div elements and call it a day instead of using all the options CSS provides. Another topic was using all the tools the browsers with the best standard support gave you while still providing a more limited, but at least usable, version for browsers which hadn't implemented some features (yet). Even back then you could make pages which read well if CSS wasn't available and were visually appealing with CSS applied and today almost any browser has all these tools available. [1] https://stuffandnonsense.co.uk/transcending-css-revisited https://stuffandnonsense.co.uk/transcending-css-revisited - there's a free online version available

castis 7y ago

I am convinced that people who recommend things like that have no idea where we are or how we got here.

HideousKojima 7y ago

Probably to avoid the dumb limitations on having forms within a table? Still an awful and ugly way to do it

mgr86 7y ago

This makes me cringe. I may have been 12 but I was making websites in 1998. And they were decent--I mean, it was a lot of right click > view source copying. But I fell in love with the Web Standards movement. I was probably the only 13 year old whose book shelf included books on perl, css, xml, and the like.

carldaddy 7y ago
I feel the same way. It's probably because I'm 90s kid and nostalgia, but I wish web standards were taken seriously.

hinkley 7y ago

CSS Zen Garden seemed to have a message that you don’t need tables for everything, but it was astonishing how few of the featured designs ever handled responsive layout properly. Getting text to fit into a rectangle by cheating was very common and you’d see bleed everywhere at a different resolution. Until flexbox, there was no way to fix this without resorting to table cell behavior. It ultimately soured me on the Garden. And thankfully I got to use CSS3 shortly after.

gridlockd 7y ago
Even with "display: table" or flexbox you couldn't do something as simple as colspan.
- hinkley 7y ago
  Oh man, I had blotted that out. There’s a somewhat arcane set of table styles that will give you proportional layout of blocks that is more powerful than colspan. I found that it was often worth the trouble of reaching for the more sophisticated solution.
djsumdog 7y ago
Keep in mind Zen Garden was written WAAAAAAAAY before mobile layouts were a thing. Back then, you had mobile sites .. for people with PalmOS, BlackBerry or flip phones with tiny browsers. I think my edition of this book came out before the first iPhone (I remember owning it when the girl behind me at work got the original iPhone EDGE), so responsive design wasn't a thing (I don't think media queries even existed in the CSS standard, or if they were, few were using them yet).
- hinkley 7y ago
  I was pitching responsive (or at least, fluid) design by 2011, and I was not blazing trails. I started using the iPad as an example but tiny laptops were an issue, and in a business setting, most production projectors were only 1024 pixels, hardly anyone had the 1280s, and the cheap ones were 800x600 native with terrible interpolation. Wikipedia has this timeline: > Cameron Adams created a demonstration in 2004 that is still online.[46] By 2008, a number of related terms such as "flexible", "liquid",[47] "fluid", and "elastic" were being used to describe layouts. CSS3 media queries were almost ready for prime time in late 2008/early 2009.[48] Ethan Marcotte coined the term responsive web design[49] (RWD)—and defined it to mean fluid grid/ flexible images/ media queries—in a May 2010 article in A List Apart.[2] He described the theory and practice of responsive web design in his brief 2011 book titled Responsive Web Design. Responsive design was listed as #2 in Top Web Design Trends for 2012 by .net magazine after progressive enhancement at #1. And while the Garden was indeed around long before that, IMO it didn’t get properly cool until maybe ‘07. And once fluid and responsive came in it wasn’t keeping up. The point, I thought, was to be able to send people there to learn, and I was afraid of having to fix that kind of smoke and mirrors in our production code so I stopped telling people about it, other than other seasoned UI people fora particular design, and half the time it was to laugh at one, not learn from it.

gridlockd 7y ago

Something about accessibility and screen readers that people virtue signal about, but never actually test for.

djsumdog 7y ago

There were a lot of grid base frameworks which did this. Foundation 5 was unique in that it still used these rows, but you uses scss to assign those attributes to your elements. Your pre-compiled CSS looked clean and your HTML looked clean and your final CSS was a minified blob of crap you tried not to thing about. Really CSS Grid does the same thing; there's just more in CSS now and it's a whole lot cleaner.

spdustin 7y ago

Because assistive technologies (like screen readers) won’t interpret it as a table, but the browser will, giving you the ease of table-based layouts without the accessibility hang-ups.

98codes 7y ago
A11y hang-ups? It's a benefit that it makes it less accessible? That doesn't make any sense to me at all.
- e5india 7y ago
  I think they mean to say that sometimes you might want the visual structure of a table but you don't necessarily want it announced as a table via screen readers since it isn't data that's being represented.
- vntok 7y ago
  You have it the wrong way round, it's a benefit that it makes it more accessible. Abled people benefit from a system where their browser considers that div as "table-like" in the way content flows through it. Likewise, disabled people benefit from the fact that their screen-readers consider the div as a simple container without imparting any sort of tabular semantics ie expecting some data organized in rows and columns.
csnover 7y ago
At least VoiceOver on Safari uses the `display` CSS property to decide how to describe an element unless you explicitly give an element a different ARIA role in the HTML, so this isn’t 100% correct in practice (although it obviously should be!). [0] [0] https://bugs.webkit.org/show_bug.cgi?id=197786 https://bugs.webkit.org/show_bug.cgi?id=197786
lisper 7y ago
The right way to fix that would have been to add a simple annotation that the purpose of the table was for styling, not semantics, something like: <table type=for-display-only ...>

goto11 7y ago

Depends - if the content isn't semantically a table (data points with a two-dimensional relationship) but you just want a table-like presentation and you want to conform to accessibility guidelines, this might be totally fine. Sure it might be more elegant to do it with a stylesheet, but for a one-off situation it is not that bad. There is a persistent attitude that presentational information in the markup is Bad and Evil. This is only partially true. Misusing semantic html elements (like using <table> for purely layout purposes) is bad because it hurts accessibility for other people. But putting CSS directly in the HTML does not hurt anybody but yourself. If you do it all over the place it becomes a mess to maintain, but in particular cases it might be the simplest solution.

jstummbillig 7y ago

This is straight out of the CSS renaissance: There used to be a world, where the only sensible way to get something look a certain way on the web was using tables. But since using the actual table element, for anyone who cared about html semantics and accessibility, was a no go, assigning "display: table" to a non-semantic element was the next best option (or rather the least bad). It will not surprise you to learn that this concept was not exactly well understood (to be fair, most things were not well understood, including js) and people started building all sorts of actual data tables out of divs with "display: table" applied, because apparently that's how you were supposed to do it. Nowadays this is obsolete, of course, mostly thanks to flexbox but also grid.

runawaybottle 7y ago

Once upon a time every website layout was defined via the Table element. Your side bar would be a cell spanning multiple rows, and inside the sidebar you’d have another nested table that defined more layout. The shift to table-less divs came almost as a massive over-correction to the abuse of nested tables. We are in similar egregious territory now days with how we’re doing styled components directly in the javascript and totally forgoing some of the principles of CSS (we are effectively in-lining styles , for everything). That’s alright, we go through this upending in frontend every 3 years anyway.

wvenable 7y ago
NetObjects Fusion allowed you to create pixel-perfect HTML layouts before CSS using just nested tables. It was both amazing and frightening. https://en.wikipedia.org/wiki/NetObjects_Fusion https://en.wikipedia.org/wiki/NetObjects_Fusion
- whoisthemachine 7y ago
  I remember a tool a lot like this in my teenage days (late 90's). Even then, I knew the things it was doing were horrendous... And for what it's worth, NetObjects still exists - http://netobjects.com/ http://netobjects.com/
deckard1 7y ago
It's a bit worse than that, even. Instead of the abuse of semantic elements, you don't have semantic elements at all. It's a giant mess of div tags. We've 100% given up on accessibility on the web. We've also thrown in the towel on device-agnostic HTML as well. For all of the grand plans of the '90s and W3C, they all failed. Every. Single. One. This includes CSS, which is an abomination. If that weren't bad enough, let's discuss the fundamental core of the web: links. Links are dead. They are buried under a mountain of SPA walled garden jank, teased at (but never granted) on Pinterest or Quora or LinkedIn or Facebook, or out there scamming users with shortened URL services. Corporate users are subjected to annual security training lessons where they are taught never to trust links (email, text message, or otherwise) because the alternative, training users to understand domain names, is just so impractical that we have all given up. Google gave up, with Chrome. They don't even want to show a domain. It's that bad and awful. To give you an example of how shit it all really is, I recently had to look up an issue related to a Microsoft product. A quick Google search lead me to a number of Stackoverflow and blog posts on the issue. I found a number of links, pointing to Microsoft's bug tracker (links from just a year or two ago). And here's the kicker: all the links 404. The bug tracker is simply not there anymore. This is Microsoft we're talking about. They have given up on links. They have so given up on links that they can't even be bothered to let the user know what happened to those links. Things are significantly worse on the mobile web. I would estimate that a good 90% of the web doesn't work on mobile in any sort of way that would delight a user. It's more that users just deal with this massive pile of shit. Watch someone use a mobile web browser sometime. Watch the nonsense they have to deal with. The janky-ass scroll popup sluggish ad-infested dumpster fire. All of it.

globular-toast 7y ago

Ah yes. I saw this happen in the mid-2000s during the backlash against tables. You see, some visionaries had realised that the table element in html was being abused to create layout. The tools to do layout were added to css instead and the advice was to stop using tables for layout. Simple enough. But during these times there are always people who don't get the original message, or don't understand it, and just start blindly following some derivative of the original advice. That advice was "use divs". So they did. They would look at an html source and if they saw "table" they would turn their nose up but if they saw "div" they would rejoice. The irony is it was completely against the original intention which is to use html to give semantic meaning to elements. Tabular data doesn't just have a visual layout, it is rows and columns. Most people still don't understand this today although with things like markdown people are doing it even if they don't realise (unless they start embedding html/css, of course).

sgift 7y ago

Aside from what people said about screen readers (which at least makes it a bit better than tables) this is still a bad layout. Here[1] is a revised edition of a book I read in 2006 about this topic how people often just replace all table elements with div elements and call it a day instead of using all the options CSS provides. Another topic was using all the tools the browsers with the best standard support gave you while still providing a more limited, but at least usable, version for browsers which hadn't implemented some features (yet). Even back then you could make pages which read well if CSS wasn't available and were visually appealing with CSS applied and today almost any browser has all these tools available. [1] https://stuffandnonsense.co.uk/transcending-css-revisited https://stuffandnonsense.co.uk/transcending-css-revisited - there's a free online version available