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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | .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.!! 🙂
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
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 (29)