Assume in your HTML page you are going to display 5000 records using a Table. In this case HTML table tag creates problem during loading. Until 5000 records fetched from the database, table will not render. This delay creates performance issue in web development. To avoid this scenario div is introduced. Div loads faster then a table. Partial loading feature supported by div. While all the row & columns of a table comes with in the single control div presents each row & column independently. Let us share the example how to create div based CSS table.
Look at the example below here I did created similar to table structure using Div & CSS. To make this simple I used only 3 CSS classes tableHeader, row & column. In HTML followed by the basic principle creating the row & inside row creating columns. To separate tableHeader in place of row class I used tableHeader.
div based CSS Table Example
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>How to Create div based CSS3 Table?</title> <style type="text/css"> .tableHeader { background: #000; color: #fff; display: table-row; font-weight: bold; } /* CSS styles of table Rows */ .row { display: table-row; } /* CSS styles of table Columns */ .column { display: table-cell; border: thin solid #000; padding: 6px 6px 6px 6px; } </style> </head> <body> <div class="tableHeader"> <div class="column">Employee Name</div> <div class="column">Designation</div> <div class="column">Salary</div> </div> <div class="row"> <div class="column">Biswabhusan Panda</div> <div class="column">Sr. Team Lead</div> <div class="column">80000 INR</div> </div> <div class="row"> <div class="column">Supriti Kabi</div> <div class="column">Software Engineer</div> <div class="column">60000 INR</div> </div> <div class="row"> <div class="column">Nibedita Panda</div> <div class="column">Jr. Software Engineer</div> <div class="column">45000 INR</div> </div> <div class="row"> <div class="column">Ragini Sahoo</div> <div class="column">Mechanical Engineer</div> <div class="column">25000 USD</div> </div> <div class="row"> <div class="column">Sonam Panda</div> <div class="column">Jr. Software Engineer</div> <div class="column">1500 USD</div> </div> <div class="row"> <div class="column">Subha Roy</div> <div class="column">Software Engineer</div> <div class="column">17000 INR</div> </div> <div class="row"> <div class="column">Mohini Srivastab</div> <div class="column">Mechanical Engineer</div> <div class="column">25000 INR</div> </div> <div class="row"> <div class="column">Manjulata Panda</div> <div class="column">Business Head</div> <div class="column">5000 USD</div> </div> </body> </html>
Another way to Create div based CSS3 Table
You must aware of 2 most wanted CSS3 properties float: left and float: right. Generally we use these syntax to place 2 or more div’s side-by-side. Using these properties you can create HTML Table like structue using div. Additionally, in this method you have to take care of clearfix. clearfix is a CSS class which comes with “clear: both;”.