Should I use DIV or TABLE?

Question

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 here is fake)

Answer 1

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>