1

This question at face value is a duplicate of: Divs vs tables for tabular data BUT I don't think there is a good explanation of WHY someone will ignore what we agree on as standard practice.

It is 2017, tables were inappropriately used for layouting so people say don't use tables, but the exception we know is for visualizing tabular data!

Why is react-table made with divs instead of table/tr/td/th ? https://github.com/react-tools/react-table Certainly some, if not all, 43 contributors know that it shouldn't be divs.

Finally, isn't there an accessibility argument to be made in favor of using the right definition for the job? Wouldn't a screen reader understand that something is a table b/c it uses the term?

Falieson
  • 2,198
  • 3
  • 24
  • 35
  • 5
    the most important reason of why div are used is for responsive view ! – M0ns1f Oct 24 '17 at 17:58
  • 2
    Tables still have a lot of restrictions that you can avoid by not using tables. Scrolling (fixed headers/columns), responsiveness, etc – epascarello Oct 24 '17 at 17:58
  • 2
    Mobile. Often times on mobile, data tables will be stacked vertically to better fit small screens. This is very difficult to style in CSS with normal tables, since the elements can't be moved outside of their respective to be stacked on top of a different row. – tomysshadow Oct 24 '17 at 18:02
  • It is not div vs tables as much as it is semantics vs tables – Ankit Pandey Oct 24 '17 at 18:04
  • 1
    The problem is, even though, from a purely semantically standpoint people would be right to say tables are the correct choice for tabular data, in many modern scenarios, they aren't good enough of a tool to solve current design or development requirements. When the "book right" solution is a pain, but the "book wrong" solution works perfectly, is either time to adjust the book or the solutions. – Ernesto Oct 24 '17 at 18:17

1 Answers1

2

Nowadays, tabular data can be formatted nicely with divs and flex box css model. Not 100% as with table, but very close. Additionally, table elements (especially tr) can be styled with css to achieve responsive behavior for mobiles and tablets. At least in most modern web browsers.

So I'd use tables when you need to keep 'rubber' columns (proportionally stretching table heading and table body columns) and use divs when you can make columns with already known width and when semantics is not that important.

Sergey Sklyar
  • 1,902
  • 1
  • 15
  • 27