This is true, <table> elements are for tabular data. But look at almost any web layout, and you will notice things are in a table layout most of the time. Even flexbox conceptualizes the flow of children as flex-direction: row/column. I think tabular concepts like rows and columns just make sense to humans making websites, and our 2D x/y axis conditioning.
The real issue with using <table> is semanticism, breaking DOM flow (sometimes creates issues for screen readers), and separation of concerns wrt data and style like you mentioned. Also, <table>s are hard to style over, like wtf is display: table-cell? Nobody seems to know.
But the number of times I see a colleague or fellow frontend cretin re-creating a tabular interface with a bunch of <div class="row"> etc... or wondering how to dynamically size the nested columns to fit the largest cell, I remind them: just use a table. Please.
You might notice that Hacker News layout uses <table>.
The real issue with using <table> is semanticism, breaking DOM flow (sometimes creates issues for screen readers), and separation of concerns wrt data and style like you mentioned. Also, <table>s are hard to style over, like wtf is display: table-cell? Nobody seems to know.
But the number of times I see a colleague or fellow frontend cretin re-creating a tabular interface with a bunch of <div class="row"> etc... or wondering how to dynamically size the nested columns to fit the largest cell, I remind them: just use a table. Please.
You might notice that Hacker News layout uses <table>.