How To Create Table In Html Using Div Tag

DISABLE ADBLOCK

ADBlock is blocking some content on the site

ADBlock errore

html - css
30-04-2021
( words)

Question

I want to create table only using <div> tag and CSS.

This is my sample table.

                <body>   <form id="form1">       <div class="divTable">              <div class="headRow">                 <div class="divCell" align="center">Customer ID</div>                 <div  class="divCell">Customer Name</div>                 <div  class="divCell">Customer Address</div>              </div>             <div class="divRow">                   <div class="divCell">001</div>                 <div class="divCell">002</div>                 <div class="divCell">003</div>             </div>             <div class="divRow">                 <div class="divCell">xxx</div>                 <div class="divCell">yyy</div>                 <div class="divCell">www</div>            </div>             <div class="divRow">                 <div class="divCell">ttt</div>                 <div class="divCell">uuu</div>                 <div class="divCell">Mkkk</div>            </div>        </div>   </form> </body>

And Style:

                <style type="text/css">     .divTable     {         display:  table;         width:auto;         background-color:#eee;         border:1px solid  #666666;         border-spacing:5px;/*cellspacing:poor IE support for  this*/        /* border-collapse:separate;*/     }      .divRow     {        display:table-row;        width:auto;     }      .divCell     {         float:left;/*fix for  buggy browsers*/         display:table-column;         width:200px;         background-color:#ccc;     } </style>

But this table not work with IE7 and below version.Please give your solution and ideas for me. Thanks.

No correct solution

OTHER TIPS

                .div-table {   display: table;            width: auto;            background-color: #eee;            border: 1px solid #666666;            border-spacing: 5px; /* cellspacing:poor IE support for  this */ } .div-table-row {   display: table-row;   width: auto;   clear: both; } .div-table-col {   float: left; /* fix for  buggy browsers */   display: table-column;            width: 200px;            background-color: #ccc;   }

Runnable snippet:

divs shouldn't be used for tabular data. That is just as wrong as using tables for layout.
Use a <table>. Its easy, semantically correct, and you'll be done in 5 minutes.

This is an old thread, but I thought I should post my solution. I faced the same problem recently and the way I solved it is by following a three-step approach as outlined below which is very simple without any complex CSS.

(NOTE : Of course, for modern browsers, using the values of table or table-row or table-cell for display CSS attribute would solve the problem. But the approach I used will work equally well in modern and older browsers since it does not use these values for display CSS attribute.)

3-STEP SIMPLE APPROACH

For table with divs only so you get cells and rows just like in a table element use the following approach.

Replace table element with a block div (use a .table class)
Replace each tr or th element with a block div (use a .row class)
Replace each td element with an inline block div (use a .cell class)

                  .table {display:block; } .row { display:block;} .cell {display:inline-block;}

                                      <h2>Table below using table element</h2>     <table cellspacing="0" >        <tr>           <td>Mike</td>           <td>36 years</td>           <td>Architect</td>        </tr>        <tr>           <td>Sunil</td>           <td>45 years</td>           <td>Vice President aas</td>        </tr>        <tr>           <td>Jason</td>           <td>27 years</td>           <td>Junior Developer</td>        </tr>     </table>     <h2>Table below is using Divs only</h2>     <div class="table">        <div class="row">           <div class="cell">              Mike           </div>           <div class="cell">              36 years           </div>           <div class="cell">              Architect           </div>        </div>        <div class="row">           <div class="cell">              Sunil           </div>           <div class="cell">              45 years           </div>           <div class="cell">              Vice President           </div>        </div>        <div class="row">           <div class="cell">              Jason           </div>           <div class="cell">              27 years           </div>           <div class="cell">              Junior Developer           </div>        </div>     </div>

UPDATE 1

To get around the effect of same width not being maintained across all cells of a column as mentioned by thatslch in a comment, one could adopt either of the two approaches below.

Specify a width for cell class

cell {display:inline-block; width:340px;}
Use CSS of modern browsers as below.

.table {display:table; } .row { display:table-row;} .cell {display:table-cell;}

If there is anything in <table> you don't like, maybe you could use reset file?

if you need this for layout of the page check out the cssplay layout examples for designing websites without tables.

Use the correct doc type; it will solve the problem. Add the below line to the top of your HTML file:

                <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

A bit OFF-TOPIC, but may help someone for a cleaner HTML... CSS

                .common_table{     display:table;     border-collapse:collapse;     border:1px solid grey;     } .common_table DIV{     display:table-row;     border:1px solid grey;     } .common_table DIV DIV{     display:table-cell;     }

HTML

                <DIV class="common_table">    <DIV><DIV>this is a cell</DIV></DIV>    <DIV><DIV>this is a cell</DIV></DIV> </DIV>

Works on Chrome and Firefox

In building a custom set of layout tags, I found another answer to this problem. Provided here is the custom set of tags and their CSS classes.

HTML

                <layout-table>    <layout-header>         <layout-column> 1 a</layout-column>        <layout-column>  </layout-column>        <layout-column> 3 </layout-column>        <layout-column> 4 </layout-column>    </layout-header>     <layout-row>         <layout-column> a </layout-column>        <layout-column> a 1</layout-column>        <layout-column> a </layout-column>        <layout-column> a </layout-column>    </layout-row>     <layout-footer>         <layout-column> 1 </layout-column>        <layout-column>  </layout-column>        <layout-column> 3 b</layout-column>        <layout-column> 4 </layout-column>    </layout-footer> </layout-table>

CSS

                layout-table {     display : table;     clear : both;     table-layout : fixed;     width : 100%; }  layout-table:unresolved {     color : red;     border: 1px blue solid;     empty-cells : show; }  layout-header, layout-footer, layout-row  {     display : table-row;     clear : both;        empty-cells : show;     width : 100%; }  layout-column  {      display : table-column;     float : left;     width : 25%;     min-width : 25%;     empty-cells : show;     box-sizing: border-box;     /* border: 1px solid white; */     padding : 1px 1px 1px 1px; }  layout-row:nth-child(even) {      background-color : lightblue; }  layout-row:hover  { background-color: #f5f5f5 }

The key to getting empty cells and cells in general to be the right size, is Box-Sizing and Padding. Border will do the same thing as well, but creates a line in the row. Padding doesn't. And, while I haven't tried it, I think Margin will act the same way as Padding, in forcing and empty cell to be rendered properly.