Modern day replacement for<table>

In the good ol' days our site was built around the <table> as it displayed mainly tabular lists of data. If I wanted to replace those tables with something new and funky (just because), should I look at CSS grids or is there something better suited to the job?
31 Replies
Wonderbear
Wonderbear9mo ago
If you have tabular data, use tables. Otherwise use flexbox and grid for layouting.
13eck
13eck9mo ago
Both Flexbox and Grid are used for content layout of the page. Flexbox is if you need to control only one axis of alignment (horizontal or vertical). Use grid if you need to control both axes of alignment (horizontal and vertical).
mikcatta
mikcatta9mo ago
Can you replace the <table> with either grid or flexbox?
13eck
13eck9mo ago
Yes, that's what we're saying. You honestly should only be using table for tabular data, like a database view, flight times, betting odds, etc. For layout use the layout tools we have: grid and flexbox.
Wonderbear
Wonderbear9mo ago
You cant simply replace the element. The entire website needs to be refactored.
mikcatta
mikcatta9mo ago
I wanted to know if <table> was still relevant in this day & age, as it's never spoken about.
13eck
13eck9mo ago
It hasn't been relavent since ::checks watch:: 2006 or so :p
Wonderbear
Wonderbear9mo ago
Its only relevant when you want to display a table And you only want that for tabular data
13eck
13eck9mo ago
Even before flexbox was a thing in the early teens most layouts were done using float. Table was a stop-gap that allowed for alignment when CSS wasn't a thing and when all monitors were the same dimensions. Also this ☝️
mikcatta
mikcatta9mo ago
I think I am confused again... do website now never display tabular data (so for example a list of users)?
13eck
13eck9mo ago
If the site displays tabular data then use table. That's what its for. Don't use it for layout
Wonderbear
Wonderbear9mo ago
No? You can and should use <table> for tables. Wikipedia for example has a lot of tables
mikcatta
mikcatta9mo ago
I wasn't intending to use it for general layout, such for displaying lists
Wonderbear
Wonderbear9mo ago
A list of users would be a table
13eck
13eck9mo ago
As for "a list of users" that depends on the list. If it's just a list of names you'd use the ul element. If it's name, email address, last login date, then you'd use a table
Wonderbear
Wonderbear9mo ago
Or a list... depends whether its only the usernames or a larger dataset
13eck
13eck9mo ago
You'll find that almost everything in webdev can be answered thus: It Depends™️
mikcatta
mikcatta9mo ago
Yes, there would always be multiple columns (name, dob, department etc)
Wonderbear
Wonderbear9mo ago
Yeah. A list is per definition not really a table. Yes, thats what you use <table> then for Or you can. But its definitely not wrong to use a table for that.
mikcatta
mikcatta9mo ago
Ok, so I will stick to a <table> for the lists of items whever type they be. Thank you
Wonderbear
Wonderbear9mo ago
Explicitly, a list is declared with <ul></ul> or <ol>/ol>.
mikcatta
mikcatta9mo ago
If it had only one column, I might use a ul/ol, but for multiple columns it sounds like table is still they way to go
13eck
13eck9mo ago
Multiple columns isn't a list, at least not when it comes to HTML 😜
Wonderbear
Wonderbear9mo ago
Yes, just wanted to have that clarified
13eck
13eck9mo ago
We're being a bit pedantic but it's for a good cause: trying to teach the difference between a table of multiple data points and a list of single items
mikcatta
mikcatta9mo ago
thats what I am saying, I wouldn't go with a list type (ol/ul) for multiple columns, have I understood that correct?
13eck
13eck9mo ago
Sounds like it, yes this is a perfect use for table ☝️
mikcatta
mikcatta9mo ago
👍
Wonderbear
Wonderbear9mo ago
But, to be clear one last time: You do not wrap your entire website around <table> A header, footer, menu, navi, the content and basically anything else that is not a list of multiple columns, is not a table
mikcatta
mikcatta9mo ago
Yes, I understood, the tables have always only been for tabular data. Just wanted to check that the table element had been deprecated
Wonderbear
Wonderbear9mo ago
Not deprecated^^ btw. mdn docs are a gret resource. If elements are deprecated, mdn docs state that at the very top of the document
Want results from more Discord servers?
Add your server