Why use divs instead of tables for tabular data?

Question

I took this from a price comparison website:

Would you expect the data in the above image to be structured in a table? I.e. with two rows and six columns. It appears to be structured as divs.

I have had a look at the HTML generated and I see that it uses Divs rather than tables. Why is this? I realise that divs are preferred to tables for layouts, however this is not a layout; it is displaying data.

I have spent a few hours researching this and a lot of sites talk about divs and tables for layouts, however none seem to talk about divs displaying data. Hence the question.

What are you thinking the six columns are? Two rows, sure. But I fail to see where we could draw column lines in your picture. — Silvio Mayolo, Apr 26 '19 at 17:05
I definitely see this as something to build with `divs` and flexbox or grid... While it may seem to be well structured to fit a table, I don't think it displays *tabular data* in the sense the `table` element is intended for — IvanS95, Apr 26 '19 at 17:12
Possible duplicate of [Why not use tables for layout in HTML?](https://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html) — Vikram Deshmukh, Apr 26 '19 at 17:25
@Silvio Mayolo, the content is not generated by a table element. That is my point. — w0051977, Apr 26 '19 at 17:52
I mean things [like these](https://camo.githubusercontent.com/4e99b3bc00dd76ff5cf2e60371a3bcc527f00cf5/68747470733a2f2f692e696d67736166652e6f72672f643436653565312e676966) or really just [this](https://i.stack.imgur.com/SVcNO.png)... Data that you can actually sort, filter, paginate, etc — IvanS95, Apr 26 '19 at 17:52

score 2 · Answer 1 · answered Apr 26 '19 at 17:04

At one point in history, rendering tables was slower than using DIVs I believe. This may now be a relic of the past, but since a large ecosystem was then build around CSS mechanisms it probably just stuck. I am not sure that is necessarily true anymore with modern browsers. They are doing far more complex things these days other than rending a table.

Also, tables were created for tabular data display, not necessarily page formatting. If you have to render a page with a composition that cannot really be tabulated, then you have restrictions on what you can do. DIVs seem to give far more granularity for page layout.

Vikram Deshmukh · Answer 2 · 2019-04-26T17:18:28.200

2

Two words: Responsive Design!

Making your DOM responsive while using a <table> with many columns can be a major hassle. HTML divs are extremely powerful DOM elements that can be configured to behave like a table on a wider viewports while being capable of adapting to smaller viewports (using media queries and other fancier display options like flexbox). For example, observe the snippet below on a wide-screen monitor and then reduce the width of the viewport. It is pretty straightforward to make the DOM responsive using media queries. Imagine the same using an HTML table. Since a table row cannot be forced to render as a column, making it responsive would be a nightmare, if not impossible!

#container {
  display: flex;
  flex-direction: row;
}

@media (max-width: 1250px) {
  #container {
    flex-direction: column;
  }
}

<div id="container">
  <div>
    <img src='https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500' />
  </div>
  <div>
    <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWNjJlrLa7zz1sxYt9pabVcLkdO3rBucsFDACJRqifXknjU1xV' />
  </div>
  <div>
    <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQx2AX6jE_BuRr1_Bce2isaDKwv7ZtBiG9Rlwo4VuMZNqRMkV_L' />
  </div>
  <div>
    <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTg4Il-0K1k0wgK_47FURvRl9-K7sjPvK8_DefbmrOVMdxcPOcE' />
  </div>
</div>

edited Apr 26 '19 at 17:18

answered Apr 26 '19 at 17:08

Vikram Deshmukh

12,304
4
36
38

Could you explain why it is a major hassle? Thanks. +1 for responsive design reference. – w0051977 Apr 26 '19 at 17:14
Would you always use divs as an alternative to tables? – w0051977 Apr 26 '19 at 17:20
Yes! Unless of course you're only going to display the tabular data on a desktop/laptop browser and not on smartphones and tablets. In that case, you might lean towards using a table. – Vikram Deshmukh Apr 26 '19 at 17:24
I'd say `table` can still be used on mobile, its fine, but of course, `table` should be use to display strictly *tabular* data, literally *records* of values, not elements arranged like a table that are just arranged like that for presentation purposes.. In fact, the only part of the picture above I would *maybe* consider a `table` element is just the middle section with the percentages for balance transfers and all that – IvanS95 Apr 26 '19 at 17:31
@IvanS95, say I have an image in a cell (an image only), then should I be using a div? – w0051977 Apr 26 '19 at 19:08
@w0051977 that's the thing, why would you use a table element if you are dealing with images like that? You should build the structure using divs instead and style them to look similar to a table, you are still using tables just for presentation, which you shouldn't do... you just want something that *looks* like a table – IvanS95 Apr 26 '19 at 19:14
Before I accept - would you say that tables should never be used and divs should always be used. I know about Divititis. – w0051977 May 03 '19 at 10:04
Well, you can live without using tables, that I can say for sure! Also, say you want to create a desktop app using Electron and want to should tabulated (non-paginated) information without worrying about making your app responsive. In that case, you may use an HTML table. – Vikram Deshmukh May 03 '19 at 17:41

Why use divs instead of tables for tabular data?

2 Answers2