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 (10)

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
 
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
 
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
 
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.