Display : Table

Student Information

Col 1
Col 2
Col 3
Roll No.
Student Name
Age
1
Yahoo Baba
25
2
Salman Khan
24
3
Shahid Kapoor
23
Exported from Notepad++
<!DOCTYPE html> <html> <head> <title>Display : Table</title> <style> body{ font-family: arial; font-size: 20px; line-height: 24px; } h1{ text-align: center; margin-bottom: 20px; } #table{ display: table; width: 600px; border: 1px solid #000; margin: 0 auto; } .row{ display: table-row; } .col{ border: 1px solid #000; padding: 10px; display: table-cell; } #table-header{ display: table-header-group; background: lightblue; text-align: center; font-weight: bold; } #table-footer{ display: table-footer-group; background: lightgreen; } #row-group{ /*background: pink;*/ display: table-row-group; } #table-colgroup{ display: table-column-group; } .table-col{ display: table-column; } .col-2{ background: pink; width: 400px; } .col-1{ background: yellowgreen; } .caption{ display: table-caption; text-align: center; text-transform: uppercase; color: red; } </style> </head> <body> <h1>Display : Table</h1> <div id="table"> <div class="caption"> <h3>Student Information</h3> </div> <div id="table-colgroup"> <div class="table-col col-1">Col 1</div> <div class="table-col col-2">Col 2</div> <div class="table-col col-3">Col 3</div> </div> <div id="table-header"> <div class="col">Roll No.</div> <div class="col">Student Name</div> <div class="col">Age</div> </div> <div id="row-group"> <div class="row"> <div class="col">1</div> <div class="col">Yahoo Baba</div> <div class="col">25</div> </div> <div class="row"> <div class="col">2</div> <div class="col">Salman Khan</div> <div class="col">24</div> </div> <div class="row"> <div class="col">3</div> <div class="col">Shahid Kapoor</div> <div class="col">23</div> </div> </div> <div id="table-footer"> <div class="col"></div> <div class="col">Total Records :</div> <div class="col">3</div> </div> </div> </body> </html>