How to use the ‘display’ property to represent a table?
The below table gives you the relation between a ‘table‘ tag and the corresponding supported CSS property to represent the same element. So, when creating a table, all you need to do is, instead of the HTML ‘table‘ tag, merely use the ‘div‘ tag and add the corresponding CSS to display a table.
<table> | {display:table} |
<tr> | {display: table-row} |
<thead> | {display: table-header-group} |
<tbody> | {display: table-row-group} |
<tfoot> | {display: table-footer-group} |
<col> | {display: table-column} |
<colgroup> | {display: table-column-group} |
<td>, <th> | {display: table-cell} |
<caption> | {display: table-caption} |
Step 1: Create Master Div for the Table
HTML
CSS
Step 3: Create a Table Caption, Header, Body, Footer
HTML
CSS
Step3: Create Table Rows, cell, head-cell, foot-cell
HTML
CSS
Result
Step 4: add scroll bar to table
HTML
CSS
JS