Advanced css tables

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

Properties	Description
table-row-group	corresponds to `<tbody>` elements
table-header-group	corresponds to `<thead`> elements
table-footer-group	corresponds to `<tfoot>` elements
table-column-group	corresponds to `<colgroup>` elements
table-column	corresponds to `<col>` elements
table-caption	corresponds 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>