Из любого элемента можно сделать таблицу, а из вложенных - ряды, ячейки, хэдер таблицы, футер таблицы .sample-table станет равнозначным тегу <table>
<article class="some-table">
<span class="table-caption">Table on CSS3</span>
<div class="col col1"></div>
<div class="col col2"></div>
<div class="row row1">
<div class="cell">cell1-1</div>
<div class="cell">cell1-2</div>
<div class="cell">cell1-3</div>
<div class="cell">cell1-4</div>
<div class="cell">cell1-5</div>
</div>
<div class="row row2-1">
<div class="cell">cell2-1-1</div>
<div class="cell">cell2-1-2</div>
<div class="cell">cell2-1-3</div>
<div class="cell">cell2-1-4</div>
<div class="cell">cell2-1-5</div>
</div>
<div class="row row2-2">
<div class="cell">cell2-2-1</div>
<div class="cell">cell2-2-2</div>
<div class="cell">cell2-2-3</div>
<div class="cell">cell2-2-4</div>
<div class="cell">cell2-2-5</div>
</div>
<div class="row row2-3">
<div class="cell">cell2-3-1</div>
<div class="cell">cell2-3-2</div>
<div class="cell">cell2-3-3</div>
<div class="cell">cell2-3-4</div>
<div class="cell">cell2-3-5</div>
</div>
<div class="row row3">
<div class="cell">cell3-1</div>
<div class="cell">cell3-2</div>
<div class="cell">cell3-3</div>
<div class="cell">cell3-4</div>
<div class="cell">cell3-5</div>
</div>
</article>
/*Аналог тега <table>*/
.some-table {
display: table;
border-collapse: collapse;
}
/*Строка, аналог тега <tr>*/
.row {
display: table-row;
}
/*Ячейка, аналог тега <td>*/
.cell {
display: table-cell;
height: 50px;
width: 100px;
border: 1px solid black;
}
/*Заголовок, аналог тега <caption>*/
.table-caption {
display: table-caption;
caption-side: bottom;
}
/*Можно менять порядок строк,
у 3-ей строки позиция хэдера,
хотя она ниже в коде*/
/*Аналог тега <tfoot>*/
.row1 {display: table-footer-group;}
/*Аналог тега <thead>*/
.row3 {
display: table-header-group;
font-weight: bold;
}
/*Группировка строк контента,
аналог тега <tbody>*/
.row2-1,
.row2-2,
.row2-3 {
display: table-row-group;
color: cornflowerblue;
}
/*Аналог тега <col>,
НУЖНО СОЗДАТЬ ПУСТЫЕ
ТЕГИ ВНАЧАЛЕ ТАБЛИЦЫ*/
.col1, col2 {display: table-column;}
.col1 {background: cyan; width: 200px;}
.col2 {background: pink;}
/*Также колонки можно группировать,
используя свойство:*/
display: table-column-group;
/*Аналог тега <colgroup>*/