Advanced css tables

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

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)

*{border-width: 1px; border-style: solid; padding: 5px margin: 5px;}
div.caption{display:table-caption; caption-side:right;}
div.c1{width:100px; text-align:right; background:gray}
div.c2 {width:200px; text-align:center} {display:table-header-group; color:red;} {display:table-row-group; font-style:italic;} {display:table-footer-group; color:blue;}
<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 class="tr-group">
<div class="row">
<div class="cell c1">data 3</div>
<div class="cell c2">data 4</div>
<div class="tf-group">
<div class="row">
<div class="cell c1">data 5</div>
<div class="cell c2">data 6</div>
Related Tutorial
Follow Us #