Should I use tables for this information?

General Web Dev
1

Hi,

I am building a responsive site using Foundation framework. I have some products which I wish to display in a “tabular” format, but I’m unsure if I should use tables or create the tables based on divs.

The data I want to include is:

  • Product logo
  • Product name
  • Certification logo
  • 2 icons, one with “yes/no” text and one with a distance figure
  • From price
  • Customer review count
  • Book now button

What would be the best way to display this data?

Thanks!

2

You only need to ask yourself whether the data is tabular or not. If it is tabular data then use html tables. If it is not tabular then don’t use the html table element.

Generally if you have a row of headings across the top and columns of information relevant to that heading (or row) heading then that is most likely tabular data suitable for an html table element.

If the layout just appears to look tabular but data has no correlation across rows or columns then use css (using the display:table approach if you need that appearance).

It sounds like your data is tabular from what you are saying and so an html table would seem correct.

2 Likes
3

I think the simple test for that is - would the data still look reasonable if all the table cells displayed borders. If the data makes sense with the cell borders visible then it is most likely tabular. If you need to hide the borders so that it makes sense then it definitely isn’t tabular data.

4

Another thing to consider, since you want a responsive site, is whether the data will “fit” in a table on a small screen. Often there isn’t enough room for all the columns.

5

Yes that makes sense :smile:

I use this approach using data attributes to supply headings for a one column view.

I find most other methods awkward or just don’t work too well.

1 Like
6

Nice one Paul

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.