4 ms·

Tables died (thankfully) to make room for flex and grid. I can't see any use case for them at all anymore.

begoon 1y ago
I personally disagree. When data is semantically a table, not just a “table-looking” layout, I would rather use the table tag.
- the__alchemist 1y ago
  I think this is the gist of it. Tables were abused as general spaced 1D, and 2D styling components. Introducing proper general spacial styling components means we don't need to extend tables beyond their original purpose, but doesn't mean we shouldn't use them for that purpose!
zetanor 1y ago
The use case for a table is to present data.
SahAssar 1y ago
Tabular data? Tables have a purpose, it's just that people misused them for layout purposes.
- loloquwowndueo 1y ago
  To be fair, we did that when there wasn’t much choice for laying out web pages other than using tables. I was there!
  - cogman10 1y ago
    Especially in ways that worked cross browser. Young folk don't understand just how wildly different IE5 was to the Netscape or the Mozilla browser. Or just how bad Javascript was when it started to be used on the internet. I've lived through and seen the evolution. For all the shit the JS community takes for constantly revving frameworks, it's 1000x easier to make a website that looks the same regardless of browser due to a lot of these frameworks and browsers themselves evolving.
  - dvratil 1y ago
    It's not that long ago that tables were the only reliable layout tool for HTML emails (mostly due to Outlook supporting only very limited subset of CSS).
embedding-shape 1y ago
How about displaying data in rows and columns in a accessible and easily styled way, without having to rely on JS and your own CSS to replicate a table? How exactly would you do that with HTML and CSS without using tables? Using flex and grid for those purposes don't make much sense unless you care about design above all else. <table> just gives you so many good defaults (semantic structure, accessibility, column styling, column alignment, keyboard navigation) for free compared to using CSS to create your own table, that I'm not sure why you wouldn't use <table> for tabular data. Of course, if you need masonry, card grids and so on it makes sense, do actual layouting with layouting tools. But thankfully <table> hasn't died just yet, it's still better than CSS for many use cases.
- dtagames 1y ago
  Nothing about flex or grids requires JS. That's entirely CSS.
andai 1y ago
This implies that you were considering -- for a split second -- making a 90s style table based website layout, using the Tables API? ;) I might have to try that now...
pikuseru 1y ago
They’re probably still quite useful for displaying tabular data - there’s also semantics involved, it’s not primarily just a layout mechanism.
theandrewbailey 1y ago
How about displaying data in rows and columns, like records in a database? Or have you forgotten SQL, because you retrieve JSON from your 1000 NoSQL microservices?
- dtagames 1y ago
  Rows and columns are exactly what grid was added to CSS for.
  - theandrewbailey 1y ago
    Using only CSS for tabular row and column data is just as wrong as using tables for layout. There are legit reasons for using <table> today that can't be replicated by CSS. Namely, CSS doesn't confer the same semantic meaning into markup that <table> does. Compare https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/table https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/... with https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la...
  - joquarky 1y ago
    I'd hate to hear that on a screen reader.
nophunphil 1y ago
I agree with many other replies here, specifically about accessibility. Once I learned how to use a screen reader, it was eye-opening. So many web applications are utterly broken for users with assistive technologies. Tables built with flex and grid absolutely can be made accessible with WAI-ARIA, but native table elements are harder to mess up.

I personally disagree. When data is semantically a table, not just a “table-looking” layout, I would rather use the table tag.

the__alchemist 1y ago
I think this is the gist of it. Tables were abused as general spaced 1D, and 2D styling components. Introducing proper general spacial styling components means we don't need to extend tables beyond their original purpose, but doesn't mean we shouldn't use them for that purpose!

zetanor 1y ago

The use case for a table is to present data.

SahAssar 1y ago

Tabular data? Tables have a purpose, it's just that people misused them for layout purposes.

loloquwowndueo 1y ago
To be fair, we did that when there wasn’t much choice for laying out web pages other than using tables. I was there!
- cogman10 1y ago
  Especially in ways that worked cross browser. Young folk don't understand just how wildly different IE5 was to the Netscape or the Mozilla browser. Or just how bad Javascript was when it started to be used on the internet. I've lived through and seen the evolution. For all the shit the JS community takes for constantly revving frameworks, it's 1000x easier to make a website that looks the same regardless of browser due to a lot of these frameworks and browsers themselves evolving.
- dvratil 1y ago
  It's not that long ago that tables were the only reliable layout tool for HTML emails (mostly due to Outlook supporting only very limited subset of CSS).

embedding-shape 1y ago

How about displaying data in rows and columns in a accessible and easily styled way, without having to rely on JS and your own CSS to replicate a table? How exactly would you do that with HTML and CSS without using tables? Using flex and grid for those purposes don't make much sense unless you care about design above all else. <table> just gives you so many good defaults (semantic structure, accessibility, column styling, column alignment, keyboard navigation) for free compared to using CSS to create your own table, that I'm not sure why you wouldn't use <table> for tabular data. Of course, if you need masonry, card grids and so on it makes sense, do actual layouting with layouting tools. But thankfully <table> hasn't died just yet, it's still better than CSS for many use cases.

dtagames 1y ago
Nothing about flex or grids requires JS. That's entirely CSS.

andai 1y ago

This implies that you were considering -- for a split second -- making a 90s style table based website layout, using the Tables API? ;) I might have to try that now...

pikuseru 1y ago

They’re probably still quite useful for displaying tabular data - there’s also semantics involved, it’s not primarily just a layout mechanism.

theandrewbailey 1y ago

How about displaying data in rows and columns, like records in a database? Or have you forgotten SQL, because you retrieve JSON from your 1000 NoSQL microservices?

dtagames 1y ago
Rows and columns are exactly what grid was added to CSS for.
- theandrewbailey 1y ago
  Using only CSS for tabular row and column data is just as wrong as using tables for layout. There are legit reasons for using <table> today that can't be replicated by CSS. Namely, CSS doesn't confer the same semantic meaning into markup that <table> does. Compare https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/table https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/... with https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la...
- joquarky 1y ago
  I'd hate to hear that on a screen reader.

nophunphil 1y ago

I agree with many other replies here, specifically about accessibility. Once I learned how to use a screen reader, it was eye-opening. So many web applications are utterly broken for users with assistive technologies. Tables built with flex and grid absolutely can be made accessible with WAI-ARIA, but native table elements are harder to mess up.