-
How to Design a Table using Div
over 8 years ago
Tables are the most powerful way to align elements in a proper/tabular way on a webpage. The concepts of table are very clear to designer, so it will be easier to create layout using table.
But tables have many problem like a layout through table is displayed when whole table is loaded, while div display every div element loaded.
The document size of table is larger so it take more loading time.It will be much easier to change the layout of whole page with single CSS which is having div.
Div based layout is having another advantage, It reduces the cost if we are paying per megabyte for hosting, because it use less bandwidth.Below is the example of designing a table using div tag:-
HTML-
<body> <div class="Table"> <div class="headline"> <p>This is a Table</p> </div> <div class="Heading"> <div class="block"> <p>First Name</p> </div> <div class="block"> <p>Last Name</p> </div> <div class="block"> <p>Address</p> </div> </div> <div class="Row"> <div class="block"> <p>Megha</p> </div> <div class="block"> <p>Kohli</p> </div> <div class="block"> <p>Nehrugram</p> </div> </div> <div class="Row"> <div class="block"> <p>Shilpi</p> </div> <div class="block"> <p>Badoni</p> </div> <div class="block"> <p>Amritvihar</p> </div> </div> </div> </body>CSS-
.Table { display: table; } p { color: #800000; } .headline { display: table-caption; text-align: center; font-weight: bold; font-size: larger; } .Heading { display: table-row; font-weight: bold; text-align: center; } .Row { display: table-row; } .block { display: table-cell; border: solid; border-width: thin; padding-left: 5px; padding-right: 5px; }The output of the above code will be like this:-
0 Comment(s)