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
If you have tabular data, use tables. Otherwise use flexbox and grid for layouting.
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).
Can you replace the <table> with either grid or flexbox?
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.You cant simply replace the element. The entire website needs to be refactored.
I wanted to know if <table> was still relevant in this day & age, as it's never spoken about.
It hasn't been relavent since ::checks watch:: 2006 or so :p
Its only relevant when you want to display a table
And you only want that for tabular data
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 ☝️I think I am confused again... do website now never display tabular data (so for example a list of users)?
If the site displays tabular data then use
table. That's what its for. Don't use it for layoutNo? You can and should use <table> for tables. Wikipedia for example has a lot of tables
I wasn't intending to use it for general layout, such for displaying lists
A list of users would be a table
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 tableOr a list... depends whether its only the usernames or a larger dataset
You'll find that almost everything in webdev can be answered thus: It Depends™️
Yes, there would always be multiple columns (name, dob, department etc)
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.
Ok, so I will stick to a <table> for the lists of items whever type they be. Thank you
Explicitly, a list is declared with
<ul></ul> or <ol>/ol>.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
Multiple columns isn't a list, at least not when it comes to HTML 😜
Yes, just wanted to have that clarified
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
thats what I am saying, I wouldn't go with a list type (ol/ul) for multiple columns, have I understood that correct?
Sounds like it, yes
this is a perfect use for
table ☝️👍
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 tableYes, I understood, the tables have always only been for tabular data. Just wanted to check that the table element had been deprecated
Not deprecated^^
btw. mdn docs are a gret resource. If elements are deprecated, mdn docs state that at the very top of the document