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.
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!
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...
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.
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).
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?
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.
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.
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.
Nothing about flex or grids requires JS. That's entirely CSS.
I personally disagree. When data is semantically a table, not just a “table-looking” layout, I would rather use the table tag.
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!
The use case for a table is to present data.
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...
Tabular data? Tables have a purpose, it's just that people misused them for layout purposes.
To be fair, we did that when there wasn’t much choice for laying out web pages other than using tables. I was there!
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.
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).
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?
Rows and columns are exactly what grid was added to CSS for.
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/...
with https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la...
I'd hate to hear that on a screen reader.
They’re probably still quite useful for displaying tabular data - there’s also semantics involved, it’s not primarily just a layout mechanism.
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.