DEV Community

How to make a table without using the HTML table elements

Milecia on October 16, 2018

One day you'll be working on a project that needs a table. You have the option of making a table a few different ways: using HTML, using CSS, or us...
Collapse
 
thesdev profile image
Samir Saeedi

Semantics? Accessibility?

Collapse
 
thesdev profile image
Samir Saeedi

If you don't like the way browsers render tables by default, you can always change their display css property, so you can retain the semantics.

Collapse
 
kungtotte profile image
Thomas Landin

Seconded! If you're putting a table on your page, use <table> tags. Going out of your way to avoid tables is just as bad as using tables for layout. Something we stopped doing 20 years ago...

Collapse
 
ghost profile image
Ghost • Edited

Thirded! HTML5 has semantic meanings. This is just a hair better than styling a DIV, giving it a click-handler and turning it into a button instead of actually using a <button>

Collapse
 
lucretius profile image
Robert Lippens

I recently had to implement a table for a side project I am working on, and went ahead with a CSS Grid (browser support is good enough) table made of divs. It works great and you also avoid the restrictions that standard HTML tables can place on your design.

Collapse
 
vitalcog profile image
Chad Windham

Um... Not trying to be a jerk. But instead of display: flex; Why not display: grid; ?

Collapse
 
flippedcoding profile image
Milecia

No worries about being a jerk! There's no reason you can't use grid instead of flex. This was just one of the many ways you can make a table.