table elements are still the easiest way to make a table, and in a lot of contexts the best. If the demands of the interface are not too complicated, I'd personally default to tables.
I'm not strongly-opinionated though, so want to see if others disagree.
20+ years web dev | Full-stack architect | AI integrator | Passionate about clean code, APIs, and docs | Building innovative SaaS with AI | Open source enthusiast
I am a frontend developer focused in creating application with React, Vue and Svelte. Currently, I am a software engineering student at Kasetsart University.
I use table element to create a table. If it is not a table, I don't use it. If what I am going to display has data on fixed location, header, and can be easily expressed as a table. I use table tag for it. By the way, table is not suitable for small devices. I would change to card based display instead.
If I want to present data with more than one-on-one relations (which could be a definition list), I will use a table. For one-on-one relations, it depends on the use case, so I might or might not choose a table.
How’s it going, I'm a Adam, a Full-Stack Engineer, actively searching for work. I'm all about JavaScript. And Frontend but don't let that fool you - I've also got some serious Backend skills.
Location
City of Bath, UK 🇬🇧
Education
11 plus years* active enterprise development experience and a Fine art degree 🎨
I am Shakil Front-end Developer and programmer. Currently, I am studying in CSE. I am passionate about coding. Currently, I am learning more about full stack development.
Using table is recommended always. But in some case maybe when your table is super complicated or you just want to simulate a table but they don't have any content demand or SEO demand then you can use div like structure to build it.
But using table is the best practice even some cases table is the only one option to build that product, like Email template or email signature who still use lower version of HTML and their client don't understand modern things.
tableelements are still the easiest way to make a table, and in a lot of contexts the best. If the demands of the interface are not too complicated, I'd personally default to tables.I'm not strongly-opinionated though, so want to see if others disagree.
If you want a search engine like Google to understand your tabular data, use a table.
Even fancy layouts like here on our stock instrument table are totally possible with a classic table:
How
Mail templates are 100% table oriented.
I use
tableelement to create a table. If it is not a table, I don't use it. If what I am going to display has data on fixed location, header, and can be easily expressed as a table. I usetabletag for it. By the way, table is not suitable for small devices. I would change to card based display instead.If I want to present data with more than one-on-one relations (which could be a definition list), I will use a table. For one-on-one relations, it depends on the use case, so I might or might not choose a table.
Use the is it a duck theorem, if it looks like a table it should be a table
Don't forget that a table is HTML and modern layouts like grid are CSS. It's not either/or. You can style an HTML table with grid if you want to.
Using table is recommended always. But in some case maybe when your table is super complicated or you just want to simulate a table but they don't have any content demand or SEO demand then you can use div like structure to build it.
But using table is the best practice even some cases table is the only one option to build that product, like Email template or email signature who still use lower version of HTML and their client don't understand modern things.
Which are the modern approaches?
Accessibility and now let me know what your "modern" approaches" are.