[strenholme]

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

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]

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]

Why not use a <table>?

[strenholme]

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]

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]

That's right. The argument was separating document structure from layout. Using a table for page layout makes the document structure incoherent.

[goto11]

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.

[strenholme]

Those kinds of discussions have dropped off of the Internet over the last decade and a half, being hosted at places like the now defunct original Digg website. It was an era when one could said something really stupid online and it would become mercifully forgotten.

What I have found is a 2014 blog posting where another web designer from that era says “the early anti-HTML table movement was strong. It managed to brainwash many generation of developers into thinking that any usage of table is evil. [...] I am one of those developers who avoided table layout, even for displaying tabular data.”

Reference: https://colintoh.com/blog/display-table-anti-hero

[cutler]

The Jeffrey Zeldman era of CSS.

[goto11]

These days you actually can use <table> without compromising accessibility, by adding aria-annotations. So if you prefer this to CSS, go ahead.

Most of the angst around <table> was before aria support, so using <table> purely for layout impacted accessibility, which meant it was not viable for most real-world scenarios.

That said, if you need stuff like colspans for a layout, you are probably better of using grid.