4 ms·

>A million articles about not using tables for layout, and it took 20+ years to get a grid< To be fair, CSS 2.0 (from 1998) has “display: table” which allows t

>A million articles about not using tables for layout, and it took 20+ years to get a grid< To be fair, CSS 2.0 (from 1998) has “display: table” which allows table layout in pure CSS. [1] The problem was not CSS. The problem was Internet Explorer 6; “display: table” was not viable to use until the early 2010s when IE6 usage finally plunged. [1] Edit: CSS was designed for styled documents, such as online resumes or blogs. It was not designed to make interactive apps, which is why it doesn’t fit that paradigm well. Everyone thought Java applets would run the interactive web, and we would be making web applications in Java today if Microsoft had not killed Java on the web in the late 1990s with IE.

jheruty 6y ago
In my experience, "display: table" is not really identical to the behavior of <table>. I gave up on it for my project, though unfortunately I don't remember the specifics. I think it's just a fundamental issue where CSS is trying to be both layout and style. Works great for basic document formatting, but once you try to do something complex, it all falls apart. Or, rather, it should fall apart, but we've spent the last couple decades duct taping it together. Every JavaScript framework ultimately hits a wall where it has to interact with CSS. It can't be abstracted away. I really do believe more money and effort should be spent looking for an alternative.
- strenholme 6y ago
  The biggest thing missing in “display: table” is “colspan”, allowing a table cell to take up multiple columns of the table. That can be a big deal with some layouts. One workaround is to use “position: absolute” inside a CSS table cell to have an element which can span more than one table column.
  - nness 6y ago
    Why not use a <table>?
    - strenholme 6y ago
      For layout?? Burn the heretic! [1] The real reason we don’t use tables for layout (and only for the occasional tabular data) is because a table layout doesn’t work really well on the screen of an iPhone or Android phone, especially when they are vertically aligned. So, the workaround is to use media selectors: Desktops, laptops, and tablets get a table layout; phones get a simpler one-column layout. I believe grid and flex layouts allow one to use a single design which will appropriately scale from a phone screen to an ultrawide monitor, but I use a two-layout or three-layout design for my web pages. [1] In the days when the CSS Zen Garden was new, all of the web design blogs and comments felt using <table> for anything at all was heresy, since abusing <table> resulted in really ugly and hard to maintain webpages during the dot-com days of the late 1990s. It would be an extended discussion whether it was OK to even use <table> for clearly tabular data.
      - ath92 6y ago
        I think the don't-use-tables argument is from way before mobile devices were something web developers cared about. I recall it as being mostly about semantics, i.e. tables should only be used for tabular data, not setting up the layout of your entire page.
        nescioquid 6y ago
        That's right. The argument was separating document structure from layout. Using a table for page layout makes the document structure incoherent.
      - cutler 6y ago
        The Jeffrey Zeldman era of CSS.
      - goto11 6y ago
        I have never seen anyone arguing <table> was not OK for tabular data. I thought this was a myth on level of teenagers eating tide pods.

jheruty 6y ago

In my experience, "display: table" is not really identical to the behavior of <table>. I gave up on it for my project, though unfortunately I don't remember the specifics. I think it's just a fundamental issue where CSS is trying to be both layout and style. Works great for basic document formatting, but once you try to do something complex, it all falls apart. Or, rather, it should fall apart, but we've spent the last couple decades duct taping it together. Every JavaScript framework ultimately hits a wall where it has to interact with CSS. It can't be abstracted away. I really do believe more money and effort should be spent looking for an alternative.

strenholme 6y ago
The biggest thing missing in “display: table” is “colspan”, allowing a table cell to take up multiple columns of the table. That can be a big deal with some layouts. One workaround is to use “position: absolute” inside a CSS table cell to have an element which can span more than one table column.
- nness 6y ago
  Why not use a <table>?
  - strenholme 6y ago
    For layout?? Burn the heretic! [1] The real reason we don’t use tables for layout (and only for the occasional tabular data) is because a table layout doesn’t work really well on the screen of an iPhone or Android phone, especially when they are vertically aligned. So, the workaround is to use media selectors: Desktops, laptops, and tablets get a table layout; phones get a simpler one-column layout. I believe grid and flex layouts allow one to use a single design which will appropriately scale from a phone screen to an ultrawide monitor, but I use a two-layout or three-layout design for my web pages. [1] In the days when the CSS Zen Garden was new, all of the web design blogs and comments felt using <table> for anything at all was heresy, since abusing <table> resulted in really ugly and hard to maintain webpages during the dot-com days of the late 1990s. It would be an extended discussion whether it was OK to even use <table> for clearly tabular data.
    - ath92 6y ago
      I think the don't-use-tables argument is from way before mobile devices were something web developers cared about. I recall it as being mostly about semantics, i.e. tables should only be used for tabular data, not setting up the layout of your entire page.
      - nescioquid 6y ago
        That's right. The argument was separating document structure from layout. Using a table for page layout makes the document structure incoherent.
    - cutler 6y ago
      The Jeffrey Zeldman era of CSS.
    - goto11 6y ago
      I have never seen anyone arguing <table> was not OK for tabular data. I thought this was a myth on level of teenagers eating tide pods.