how to design table with div tag

Question

suppose i have table and code is

<table cellspacing="1" class="style1" style="width:40%;" border="1">
        <tr>
            <td>Row 1 - Col 1</td>
        </tr>
        <tr>
            <td>Row 2 - Col 1</td>
        </tr>
        <tr>
            <td>Row 3 - Col 1</td>
        </tr>
        <tr>
            <td>Row 4 - Col 1</td>
        </tr>
        <tr>
            <td>Row 5 - Col 1</td>
        </tr>
    </table>

i want to generate same output with div. please guide me with sample html. thanks

Answer 1

Since you don't actually have a concept of "columns"... it would seem that you can just use div elements in place of each tr element.

<div>Row 1 - Col 1</div>
<div>Row 2 - Col 1</div>
<div>Row 3 - Col 1</div>
...

Does that not work? You may need to apply extra styling to the divs (such as width:40%), but for the most part, I'd think that would do it.

But do see my comment under your question, in the case that you are outputting truly tabular data.

Answer 2

Tabular data should use <table> markup.

http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/H51.html