Advanced css tables

To define a table structure having sections, the following possible values of display property


PropertiesDescription
table-row-groupcorresponds to <tbody> elements
table-header-groupcorresponds to <thead> elements
table-footer-groupcorresponds to <tfoot> elements
table-column-groupcorresponds to <colgroup> elements
table-columncorresponds to <col> elements
table-captioncorresponds to <caption> elements


The <caption> element , the 'caption-side' property allows to define where the table caption will be rendered. The possible values are.

bottom | left | right | top (the default value)

snippet
<html>
<head>
<style>
*{border-width: 1px; border-style: solid; padding: 5px margin: 5px;}
div.table{display:table;}
div.row{display:table-row;}
div.cell{display:table-cell;}
div.caption{display:table-caption; caption-side:right;}
div.c1{width:100px; text-align:right; background:gray}
div.c2 {width:200px; text-align:center}
div.th-group {display:table-header-group; color:red;}
div.tr-group {display:table-row-group; font-style:italic;}
div.tf-group {display:table-footer-group; color:blue;}
</style>
</head>
<body>
<div class="table">
<div class="th-group">
<div class="row">
<div class="cell c1">data 1</div>
<div class="cell c2">data 2</div>
</div>
</div>
<div class="tr-group">
<div class="row">
<div class="cell c1">data 3</div>
<div class="cell c2">data 4</div>
</div>
</div>
<div class="tf-group">
<div class="row">
<div class="cell c1">data 5</div>
<div class="cell c2">data 6</div>
</div>
</div>
</div>
</body>
</html>
Related Tutorial