Back to Top

Table layout using DIV tags

table layout using DIV tags

Here is one quick article about how to use table layout using DIV tags in HTML. Nowadays, div base HTML structure is working for all kind of sites 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.
[sociallocker]
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.!! 🙂

Here are few other articles you like to read:

The DocType In HTML
Clean HTML content in PHP
Convert RGB to Hex HTML code in PHP

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.[/sociallocker]

Comments (28)

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

    1. Yeah..It is require less code and faster loading times.

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

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

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

  4. How to use colspan or rowspan in such structure

  5. remark to the above solution: How to handle if I use 4 columns with heading and 3 rows??

    How can I create a table instead of DIVS in HTML5 structure
    Thanks , Jos

    1. You can use same structure to use 4 columns with heading and 3 rows.

      What do you mean by table insted of DIVS?

  6. nice article! divs are necessary for WCAG compliant websites.

  7. Michael Hanon says:

    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…

  8. Suryakant Patil says:

    Can we make colspan N rowspan with this div.. ??plz help me out..

  9. Display DIV as table has no such feature for colspan and rowspan.

  10. there comes one problem by using above code only rows are displayed not columns

    1. Have you checked demo?

  11. Hi,
    It is not working in IE8 browser..

    1. Any specific issue in IE8?

  12. there is just one problem
    add a foto and add a text the foto is aligned on top and the text is aligned at the bottem

    for me i want to use tables for rentals firts is a picture second is the time 3rd is the price

    anyway nice work i will search further to see if i can find a code that does the trick for me

  13. You’r way of using DIV may be good for a table with few rows With experience ngGrid uses DIV to populate tabular data. But when the row count is just above 200 the performace is liks a snail. Use Table for tabular data, its fast and easy, just think of how many object the DOM will create for each DIV and for a TD

  14. Just need this trick, I want to create some cool stuff. Thank you 😀

  15. cool stuff. Thank you.

  16. hey. i found your trick is pretty cool. i will try it to my blog also. cool stuff anyway

  17. Interesting read, it’s pretty cool trick.

  18. I never see before, but I’ll try it.. Thank you

  19. amazing, great trik, i must try at home thanks

  20. does it responsive on smartphones?

  21. the information you provide is very helpful. Thank you for sharing this informative article.

  22. Just need this trick, I want to create some cool stuff. Thank you

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Most Popular Posts

How to get Current URL in WordPress?

Posted on 10 years ago

Bhumi