How create table only using <div> tag and Css

Asked 16/6, 2010 at 12:30 Answered 11/10, 2021 at 14:40

214

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.

Royce answered 16/6, 2010 at 12:30 Comment(6)

why do you want to use div to create a table? – Mikael 16/6, 2010 at 12:34

One thing you might want to notice is your class="headRow" is defined as .divRow in your CSS. Just thought I'd point that out. – Dissemblance 9/5, 2012 at 20:56

I think the reason anybody want to use a div based table instead of a normal table is that....rendering/animations/reflows on a div based table is actually faster ( esp. for large DOM size) than rendering a normal table......see this....stubbornella.org/content/2009/03/27/… this....developer.nokia.com/community/wiki/… above that all the data intensive javascript plugins like slickgrid etc use divBasedtable – Pentad 19/9, 2014 at 12:48

Just a small correction: display:table-column should be used to mimic the <col> tag, to mimic <td> use display: table-cell – Jazzy 2/5, 2015 at 13:18

Another correction: if your table does not fit on the screen, then your cells will wrap. Reason: the float: left is to blame. See also: #30002348 – Jazzy 2/5, 2015 at 13:26

The dispute about HTML TABLE vs CSS-DIV approaches starts usually from wrong starting point. The crucial question shall be asked first! Are you planning to show TABULAR DATA or do you need to create a LAYOUT for some features/functionality. If you are presenting pure TABULAR data, stick on HTML tables. If you need fancy presentation - use appropriate semantic HTML tags combined with css. Do not use DIV’s if you can use semantic tags. Sementic tags will help to structure content wisely and even more foolproof way. For example ARTICLE, SECTION, etc. – Kilimanjaro 13/9, 2021 at 0:22

300

.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:

.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;  
}

<body>
  <form id="form1">
      <div class="div-table">
             <div class="div-table-row">
                <div class="div-table-col" align="center">Customer ID</div>
                <div  class="div-table-col">Customer Name</div>
                <div  class="div-table-col">Customer Address</div>
             </div>
            <div class="div-table-row">
                  <div class="div-table-col">001</div>
                <div class="div-table-col">002</div>
                <div class="div-table-col">003</div>
            </div>
            <div class="div-table-row">
                <div class="div-table-col">xxx</div>
                <div class="div-table-col">yyy</div>
                <div class="div-table-col">www</div>
           </div>
            <div class="div-table-row">
                <div class="div-table-col">ttt</div>
                <div class="div-table-col">uuu</div>
                <div class="div-table-col">Mkkk</div>
           </div>

      </div>
  </form>
</body>

Felonious answered 12/7, 2011 at 11:36 Comment(4)

The rows exceed the rectangle on IE. Do you know how to fit that? – Galicia 2/7, 2014 at 19:39

Just a small correction: display:table-column should be used to mimic the <col> tag, to mimic <td> use display: table-cell – Jazzy 2/5, 2015 at 13:14

How can this have over 200 upvotes, when it is plainly wrong??? It should have table-cell and not table-column as said above. – Vocalize 9/9, 2022 at 7:8

padding doesn't seem to be working with this solution. Any ideas? – Ithunn 15/3, 2023 at 17:23

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.

Euthenics answered 16/6, 2010 at 12:32 Comment(8)

hey, I'm still learning CSS/HTML styling and want to know the best practices. I found this because I was trying to create a data container that would show elements in rows of a table in "Desktop" mode but would print out elements vertically (multiple lines per element) when in "Mobile" mode. This would be accomplished using the @media tag overriding the styles based on screen size. What would be the best practice for accomplishing this if not using divs that act like a table in Desktop mode, but not in Mobile mode? – Unaccountedfor 28/1, 2013 at 15:25

@simplyletgo: Semantically, it'd be more appropriate to style the table cells as blocks than to try to make divs act like a table. – Bivouac 27/2, 2013 at 15:58

why not? if you use tables you can't add a scrollbar around certain cells so that your table has a excel-like locked headers, for example. Tables have a lot of limitations, why can this not be done with divs? – Bozarth 24/10, 2013 at 18:31

@pilavdzice: It can, if you have a very good reason for abandoning best practices...but it should be a last resort. Divs have zero semantic value, and should only exist when you need a block-level element but don't have a semantic equivalent. If the data actually is a table, then it should be marked up as one til you have a damn good reason to do otherwise. – Bivouac 22/1, 2014 at 15:20

@pilavdzice: As for limitations, tables don't actually have that many when used correctly (for naturally tabular data). – Bivouac 22/1, 2014 at 15:29

I have seen several disputes about table vs div’s. On most of cases div-css advocates are missing the important factor. The crucial question is, what are you planning to show? If your content is TABULAR DATA, then why to use div-css approach? Content shall be easy to parse. Tabular data baked into div-css is hard or even impossible to parse. Another scenario is creation of LAYOUTS. On such cases tables are bad choice as they aren’t meant for that. Have you ever written any tabular data parser? Try to make one and you will understand immediately the benefit of HTML tables. Be smart. – Kilimanjaro 13/9, 2021 at 0:2

This response nowadays make no sense, since even time to render tables is higher than div's. Not mention is way easier to use div as table, as tables have more limitations. – Pelias 7/12, 2022 at 8:48

While I agree tables should be used for tabular data, and while you have not encountered a reason to avoid tables, there are practical reasons for using divs. The biggest problem for using tables instead of divs is that if you use a framework like turbo, you can't dynamically change td or rows because the structure of a table is very strict and things like form elements outside of a td will get moved out of the table by the browser. Also responsive layouts. – Radicalism 22/9, 2023 at 14:46

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;}

Officious answered 3/6, 2016 at 17:43 Comment(3)

This won't do it since the columns are not the same size. – Rocca 25/1, 2017 at 16:10

You are right about the width not behaving like it does in a table element. However, if you specify a width for .cell class in it's CSS like .cell { width: 300px;} then you could achieve a similar effect. But, the limitation that you mentioned will always be there when using div unless you define a width for cell CSS class. ANOTHER way of getting the same effect would be to use the following classes: <style> .table {display:table; } .row { display:table-row;} .cell {display:table-cell;} </style> instead of using the classes mentioned in above answer. – Officious 26/1, 2017 at 16:9

@thatsIch, I have added UPDATE 1 in my answer that explains the workaround for width issue which you mentioned – Officious 26/1, 2017 at 16:22

It works for me, and it's help's to create responsive tables, For more information visit this website: https://wisdmlabs.com/blog/responsive-tables-using-css-div-tag/

#resp-table {
        width: 100%;
        display: table;
    }
    #resp-table-body{
        display: table-row-group;
    }
    .resp-table-row{
        display: table-row;
    }
    .table-body-cell{
        display: table-cell;
        border: 1px solid #dddddd;
        padding: 8px;
        line-height: 1.42857143;
        vertical-align: top;
    }

<div id="resp-table">
    <div id="resp-table-body">
        <div class="resp-table-row"> 
            <div class="table-body-cell">
                col 1 
            </div>
            <div class="table-body-cell">
                col 2 
            </div>
            <div class="table-body-cell">
                col 3 
            </div>
            <div class="table-body-cell">
                col 4 
            </div>
        </div>
        <div class="resp-table-row"> 
            <div class="table-body-cell">
                second row col 1 
            </div>
            <div class="table-body-cell">
                second row col 2 
            </div>
            <div class="table-body-cell">
                second row col 3 
            </div>
            <div class="table-body-cell">
                second row col 4 
            </div>
        </div>
    </div>
</div>

Kapor answered 11/10, 2021 at 14:40 Comment(1)

How could you do a rowspan or colspam with this kind of tables? – Convexity 5/6, 2023 at 12:59

I don't see any answer considering Grid-Css. I think it is a very elegant approach: grid-css even supports row span and and column spans. Here you can find a very good article:

https://medium.com/@js_tut/css-grid-tutorial-filling-in-the-gaps-c596c9534611

Hyperbola answered 17/10, 2018 at 4:50 Comment(0)

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.

Mutualism answered 16/6, 2010 at 12:39 Comment(0)

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">

Kalamazoo answered 14/3, 2012 at 6:14 Comment(0)

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

Nero answered 8/1, 2016 at 7:44 Comment(1)

And if your table cells have <div> elements in them? You probably want .common_table div > div – Cribbs 19/3, 2016 at 15:27

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.

Sulfonal answered 27/7, 2016 at 18:32 Comment(0)

You can create "new tags" based on classic table, a "div table":

<STYLE>
dtable {
 display:table;
 width:100%;
 border:1px solid #000;
 border-spacing:5px;
}
dtable dtr {
 display:table-row;
 clear: both;
}
dtable dtd {
 display:table-column;
 padding:5px;
}
</STYLE>

<DTABLE>
 <DTR>
  <DTD>row 1 col 1</DTD>
  <DTD>row 1 col 2</DTD>
 </DTR>
 <DTR>
  <DTD>row 2 col 1</DTD>
  <DTD>row 2 col 2</DTD>
 </DTR>
</DTABLE>

You can use specific CSS selectors for each "dtd", like:

dtable dtd:nth-child(1) {
 width:300px;
 font-weight:bold;
}

dtable dtd:nth-child(2) {
 width:400px;
}

and "zebras" like:

dtable dtr:nth-child(odd) {
 background-color:#ddd;
}

and more, see: https://css-tricks.com/useful-nth-child-recipies/

Katanga answered 4/10, 2021 at 20:37 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags