DEV Community

Parker Waiters
Parker Waiters

Posted on

When do you use a table in HTML vs more "modern" approaches?

What's your most up-to-date perspective on best practices here?

Top comments (11)

Collapse
 
sherrydays profile image
Sherry Day

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.

Collapse
 
paratron profile image
Christian Engel • Edited

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:

stock table

Collapse
 
bee_jhay profile image
Odeyemi olabode

How

Collapse
 
eshimischi profile image
eshimischi

Mail templates are 100% table oriented.

Collapse
 
pontakornth profile image
Pontakorn Paesaeng

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.

Collapse
 
lexlohr profile image
Alex Lohr

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.

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀

Use the is it a duck theorem, if it looks like a table it should be a table

Collapse
 
alohci profile image
Nicholas Stimpson

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.

Collapse
 
developerhub profile image
Abdus Shohid Shakil

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.

Collapse
 
raccode profile image
Raccode

Which are the modern approaches?

Collapse
 
supportic profile image
Supportic • Edited

Accessibility and now let me know what your "modern" approaches" are.