What do you think about designing an HTML table by using div?

Question

I have seen many HTML table related questions in SO. Many questions about browser specific bugs like CSS and JavaScript by involving HTML table is usually asked. An earlier version of DataTable YUI markup looks like as follows:

// dynamically generated
<table>
    <tr>
        <td>Some content</td>
        <td>Other content</td>
    </tr>
</table>

Current version now looks like

// dynamically generated
<table>
    <tr>
        <td><div>Some content</div></td>
        <td><div>Other content</div></td>
    </tr>
</table>

Notice a div inserted inside a column.

<div> advantages includes

• stable behavior and event support across browser
• JavaScript framework support
• display block by default
• easy to create and insert inside a HTML page

You can think a HTML table element as follows

<div class="collection">
    <div class="row">
        <div>Some content</div>
        <div>Other content</div>
    </div>
</div>

I need it because I have designed a custom "like a table" component by using div. My custom "like a table" component purpose is to show tabular data. Stable behavior and event support (single and double-click in a row and a column) across many browsers is one feature that i have considered. Notice, for instance, ExtJS uses a custom "like a select" component by using div, and you know many bugs related to HTML select.

So what you think about design a HTML table by using div?

Answer 1

I think it really depends on why you need the divs instead of a table.

If you just want to show tabular data, such as an excel spreadsheet, then you can make it interactive and still use a table.

But, if you are doing something where the appearance may change, or the table may be around another object, then be creative and do your html table.

It sounds like you are not boxed in by how things have been done, but are willing to go outside that box and write a solution that solves your problem best.

But, once you go this route you will want to do extensive testing on whatever browsers you support to ensure that the table appears as you expect, as tables are table, we know what to expect, css and javascript just need more testing.

Answer 2

Divs are always considered if semantics is taken into account.

Tables are easy to design and can be managed quickly without much CSS.

Answer 3

If all you're doing is re-creating it, I think it's quite ridiculous. Though there are legitimate uses for it. Tables have uses, divs have uses, boring arguments about it are just a waste of time.

-- Edit:

See also Why not use tables for layout in HTML?