10

Yes, another divs vs tables questions...

I read all over the place that "try to use divs instead of tables", but I have an application that displays data that is tabular, basically my entire web application displays tables (with different columns and data) but everything is tabular... Should I use struggle to use divs? If yes, why?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
WebGUY
  • 101
  • 1
  • 3
  • No problem in `DIV`.. use many property which will behave like tables..one of those is 'display:inline-table` ...study more on web. – xkeshav Jul 09 '11 at 21:41
  • div are good for page divisions.In the past people used tables to divide the page. Now you can do that with div. –  Jul 10 '11 at 01:25

6 Answers6

30

Use tables for tabular data. The knock against tables has been when they've been used solely for layout purposes. They have their own purpose, and it's tabular data. Divs have no semantic meaning, and shouldn't be used for tabular data.

kinakuta
  • 9,029
  • 1
  • 39
  • 48
  • 4
    +1. Use tables for tabular data. And be sure to mark up the table headers properly so that they work smoothly with screen readers. – Will Martin Jul 09 '11 at 21:46
  • Except to get things like max width to work you have to wrap each cell in a div anyways – Justin808 Apr 11 '13 at 23:29
  • 1
    And if your website does not care about screenreaders? should we still use tables for tabular data? One might then argue that I can make my code readable (by dev) by adding relevant class names to the corresponding divs holding my tabular data. – Adriano May 15 '14 at 09:55
  • 1
    I guess my response would be, why would you not care about screenreaders? – kinakuta Aug 24 '14 at 00:11
  • 1
    +1 for "why would you not care about screenreaders". Why the heck would you not care about screenreaders? – Marcus Sep 09 '15 at 09:17
6

No! If tables were not to be used at all for your code, they would have been taken out. Tables have a proper use, and that use is for tabular data! This is the time to use them (not for presentation or design). So by all means, use tables!

I would recommend to provide a caption tag within your tables to give people who may be using screen readers (such as blind Web surfers) proper context, too.

Example:

<table>
    <caption>Corporate Information of Current Employees</caption>
    <tr>
        <td class="employeeName">Jim Jones</td> 
...

Don't be afraid of current trends. Tables should be used for tabular data. You're doing it right :)

Dive Into Accessibility offers a lot of helpful tips, as well.

anw
  • 370
  • 1
  • 5
3

There is nothing wrong with tables correctly marked with CSS. For tabular data, tables are natural choice, don't try to emulate them using divs; except in few cases where divs can be cleaner.

Divs and tables are both just tools at your disposal. Learn when to apply right tool for the right job.

Denis Biondic
  • 7,943
  • 5
  • 48
  • 79
2

No, you MUST use tables for tabular data! Tables exist for that purpose, you MUST avoid tables only for layout purposes by using divs instead.

daveoncode
  • 18,900
  • 15
  • 104
  • 159
2

Don't use tables for your "LAYOUT" because of many reason you've already found on web. But for displaying "DATA" you still can use tables.

most of server side scripting languages like ASP.NET generate tables for gridViews so they are not "Absoutely wrong to use".

For layout I recommend you going through different insteresting layouts people have designed for a "Single HTML" in CSS Zen Garden.

Mo Valipour
  • 13,286
  • 12
  • 61
  • 87
-1

I don't think you should struggle to use div's because I personally wouldn't but maybe this will help.

Why not use tables for layout in HTML?

Community
  • 1
  • 1
Saad Imran.
  • 4,480
  • 2
  • 23
  • 33
  • 2
    Note the *for layout* bit. Those answers, as well as about all serious "don't use tables [...]" statements, say absolutely nothing about using tables for, well, *tables*. –  Jul 09 '11 at 21:45