Table layout using DIV tags

by Bhumi // Jan 18,2013 // 4 comments

Here is one quick article about how to use table layout using DIV tags in HTML.now a days, div base html structure is working for all kind of site and sometimes we need table format display for contents.

so today I am going to share how you can set table layout using DIV tags in HTML.It’s pretty simple.

Let’s see step by step.

Step 1:

First of all, Let’s create or write HTML code which create format like table.


<div class="container">
    <div class="heading">
         <div class="col">category ID</div>
		 <div class="col">category </div>
    </div>
	<div class="table-row">
         <div class="col">1</div>
	     <div class="col">PHP</div>
    </div>
	<div class="table-row">
         <div class="col">2</div>
	     <div class="col">WordPress</div>
    </div>
</div>

<div class="col">category ID</div>

<div class="col">category </div>

</div>

</div>

<div class="col">WordPress</div>

</div>

In above code, I will be used main “container” div as table ,“heading” as table header, “table-row” as table row and “col” as the table column.

Step 2:

Next is we need to write css which define divs as tables.Let’s see following code to understand it.


.container{
    display:table;
    width:90%;
    border-collapse: collapse;
    }
 .heading{
     font-weight: bold;
     display:table-row;
     background-color:#C91622;
     text-align: center;
     line-height: 25px;
     font-size: 14px;
     font-family:georgia;
     color:#fff;
     
 }
 .table-row{  
     display:table-row;
     text-align: center;
 }
 .col{ 
	display:table-cell;
 	border: 1px solid #CCC;
 }

.container{

display:table;

width:90%;

border-collapse: collapse;

}

.heading{

font-weight: bold;

display:table-row;

background-color:#C91622;

text-align: center;

line-height: 25px;

font-size: 14px;

font-family:georgia;

color:#fff;

}

.table-row{

display:table-row;

text-align: center;

}

.col{

display:table-cell;

border: 1px solid #CCC;

}

That’s it.You are done.!!

DEMO

View Demo

As always a big thank you for reading and I hope this post was useful .Thanks for reading and feel free to share your thoughts! Don’t Forget to Follow us on Twitter or Subscribe us to Get the Latest Updates.

safrinanoor January 19, 2013 at 6:12 am

Still I was using table, tr and td tag for craeting table. But from now I will use div tag I think from div I will get more attractive view.

Reply ↓
Ms January 20, 2013 at 5:09 pm

Use tables for tabular data. You can format it just as well. This workaround makes no sense.

Reply ↓
- Bhumi January 22, 2013 at 4:58 pm
  
  This is for an option like now a days “DIV” is used rather than “TABLE” because its render faster in browser than “TABLE” tag.
  
  Reply ↓
Craig Francis January 21, 2013 at 10:55 am

Use a “table” for tabular data, thats what they are there for.

Use div’s (and the new HTML5 elements such as “nav”) for the page layout.

At its basic level, tabular data for a screen reader can be allot easier to navigate when you use the proper table based tags, than without (noting that a “div” has no semantic meaning).

Likewise the default table styles work well when the style sheets fail to load, or your looking at the content in a very old browser (which does not support CSS)… also, it means computers can more easily extract the information, for example, if the page is being used a third party (kind of like an API, where techniques like xpath are being used).

Reply ↓