2

I need to build a simple table of data. So usually I would just say let's use tables, that's what they are for.

However there is and extra little trick here which is if you click "show" there is an ajax call to show extra data below. Which makes me wonder, should I switch to DIVs?

I know both are possible - but I'm trying to see what is cleaner and easier...

data is fake (data here is fake)

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Nathan H
  • 48,033
  • 60
  • 165
  • 247
  • 4
    this is tabular data so a table would be better – Pete May 10 '13 at 12:19
  • Nothing prevents you to do this easily with using tables, simply hide & show two rows under the line you clicked with a `colspan=3` column and a `colspan=2` one with a blue background. – RelevantUsername May 10 '13 at 12:20

3 Answers3

14

You answer your own question - the data is tabular, with horizontal and vertical relationships, so the semantically correct markup is most definitely a table. The intended user interface should never factor in semantics choices.

You can easily, and correctly, implement the show button by inserting a new tr element underneath the clicked one with the correct data.

Considering the original markup is as follows:

<tr>
    <td>1</td>
    <td>Orlando</td>
    <td>Gee</td>
    <td>phone number</td>
    <td><button>show</button></td>
</tr>

You can then, in JS, append the required new rows, one per attribute:

<tr class="otherbg-and-bold">
    <td></td>
    <td colspan="2">email address</td>
    <td colspan="2">sample@company.tld</td>
</tr>
Niels Keurentjes
  • 41,402
  • 9
  • 98
  • 136
  • Another +1 from me if you also explain how to use `colspan` to achieve the same layout as in the example picture. – JJJ May 10 '13 at 12:25
  • But can I add those rows dynamically to the table? I can't just hide them, the data comes from an ajax call... – Nathan H May 10 '13 at 12:31
  • If you can do an Ajax call, you can create a new `` element at runtime and fill it with the results of the Ajax call. – Niels Keurentjes May 10 '13 at 12:38
  • There's a million ways to implement this, depending on your server and your JS library of choice. I myself would simply do a JSON call requesting an array of attribute/value pairs, and generate all the HTML in Mootools. But just fetching the entire HTML for both rows will also work fine. – Niels Keurentjes May 10 '13 at 12:43
  • @nute the `tbody` approach [is generally considered acceptable](http://stackoverflow.com/questions/3076708/can-we-have-multiple-tbody-in-same-table). Just make sure not to nest them. – Niels Keurentjes May 10 '13 at 12:56
3

<table> tags are for tabular data. And tabular data is what you have there. So go ahead, using tables should be just fine.

Dennis Traub
  • 50,557
  • 7
  • 93
  • 108
1

Use tables to display tabular data. Use div's for structure. This is tabular data so go with a table.

George Reith
  • 13,132
  • 18
  • 79
  • 148
  • 1
    Since HTML5 you don't even need to use `div` for structure, there's wonderful tags like `nav`, `header`, `footer` and most of all `section` for doing that. `div` is just a generic base element for 'not further specified content'. – Niels Keurentjes May 10 '13 at 12:23
  • 1
    @Niels I know but I don't think this question requires us to teach HTML5, he was asking tables or div. Don't want to give too much information. – George Reith May 10 '13 at 12:29