HTML - Table to DIV

Question

I have this HTML which creates a 4x4 table..

However, I would prefer a DIV table. Can anyone help me converting this?

<div class="datagrid">
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr class="alt">
<td>5</td>
<td></td>
<td></td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td></td>
<td></td>
<td>8</td>
</tr>
<tr class="alt">
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</tbody>
</table>
</div>

-1 duplicate of http://stackoverflow.com/questions/3053205/how-create-table-only-using-div-tag-and-css — robnick, Jan 13 '14 at 08:49
Robnick - I think you will find it isnt a duplicate, totally different question with a different outcome. — user3189441, Jan 13 '14 at 09:42
You already asked that and got an answer: http://stackoverflow.com/questions/21086682/div-table-4x4/21087275#21087275 — Itay Gal, Jan 13 '14 at 10:39

score 0 · Answer 1 · answered Jan 13 '14 at 08:50

0

If you don't have much CSS skills, but want to use CSS for basic structuring of your website. I would recommend looking at the Bootstrap Scaffolding CSS. The grid system will achieve what you are asking.

answered Jan 13 '14 at 08:50

ColinE

68,894
15
164
232

Lukas Warsitz · Answer 2 · 2014-01-13T09:50:07.017

JSFiddle

HTML:

<div class="Table">
<div class="Title">
    <p>This is a Table</p>
</div>
<div class="Row">
    <div class="Cell">
        <p>Row 1 Column 1</p>
    </div>
    <div class="Cell">
        <p>Row 1 Column 2</p>
    </div>
    <div class="Cell">
        <p>Row 1 Column 3</p>
    </div>
    <div class="Cell">
        <p>Row 1 Column 4</p>
    </div>
</div>
<div class="Row">
    <div class="Cell">
        <p>Row 2 Column 1</p>
    </div>
    <div class="Cell">
        <p>Row 2 Column 2</p>
    </div>
    <div class="Cell">
        <p>Row 2 Column 3</p>
    </div>
    <div class="Cell">
        <p>Row 2 Column 4</p>
    </div>
</div>
<div class="Row">
    <div class="Cell">
        <p>Row 3 Column 1</p>
    </div>
    <div class="Cell">
        <p>Row 3 Column 2</p>
    </div>
    <div class="Cell">
        <p>Row 3 Column 3</p>
    </div>
    <div class="Cell">
        <p>Row 3 Column 4</p>
    </div>
</div>
<div class="Row">
    <div class="Cell">
        <p>Row 4 Column 1</p>
    </div>
    <div class="Cell">
        <p>Row 4 Column 2</p>
    </div>
    <div class="Cell">
        <p>Row 4 Column 3</p>
    </div>
   <div class="Cell">
        <p>Row 4 Column 4</p>
    </div>
</div>
</div>

CSS:

<style type="text/css">
.Table
{
    display: table;
}
.Title
{
    display: table-caption;
    text-align: center;
    font-weight: bold;
    font-size: larger;
}
.Row
{
    display: table-row;
}
.Cell
{
    display: table-cell;
    border: solid;
    border-width: thin;
    padding-left: 5px;
    padding-right: 5px;
}
</style>

Check this out for more information about CSS and Tables created using DIVs

For some reason row 2 onwards doesnt work correctly, if you test it in your browser you will see. — user3189441, Jan 13 '14 at 09:43
Okay i found the issue and corrected it. The first row has the ´div class="Heading"´, change it to ´div class="Row"´ — Lukas Warsitz, Jan 13 '14 at 09:44

score 0 · Answer 3 · answered Jan 13 '14 at 08:54

i hope this will help you.

JSFiddle

CSS:

.alt div{
    display:inline-block;
    min-width:20px;
    text-align:center;
}

HTML:

<div class="datagrid">
    <div class="alt">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    <div class="alt">
        <div>5</div>
        <div></div>
        <div></div>
        <div>6</div>
    </div>
    <div class="alt">
        <div>7</div>
        <div></div>
        <div></div>
        <div>8</div>
    </div>
    <div class="alt">
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
    </div>
</div>

HTML - Table to DIV

3 Answers3