Table layout using DIV tags

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

table layout using DIV tags

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.

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.

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.

Feedback 6

    • This is for an option like now a days “DIV” is used rather than “TABLE” because its render faster in browser than “TABLE” tag.

  1. 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).

  2. People need to stop saying use tables. I am making a responsive site with huge data. These div tables give you the ability to change layout I can change the table depending on screen-size…

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">