利用display属性写出表格的布局样式

<h1>display构造的table小例子，IE8及以下浏览器不支持本示例</h1>

<div class="table">
<h2 class="table-caption">大神榜：</h2>

<div class="table-column-group">
<div class="table-column"></div>
<div class="table-column"></div>
<div class="table-column"></div>
<div class="table-column"></div>
<div class="table-column"></div>
<div class="table-column"></div>
</div>
<div class="table-header-group">
<ul class="table-row">
<li class="table-cell">序号</li>
<li class="table-cell">姓名</li>
<li class="table-cell">年龄</li>
<li class="table-cell">工作</li>
<li class="table-cell">学校</li>
<li class="table-cell">家庭</li>
</ul>
</div>
<div class="table-footer-group">
<ul class="table-row">
<li class="table-cell">holi</li>
<li class="table-cell">holi</li>
<li class="table-cell">holi</li>
<li class="table-cell">holi</li>
<li class="table-cell">holi</li>
<li class="table-cell">holi</li>
</ul>
</div>
<div class="table-row-group">
<ul class="table-row">
<li class="table-cell">1</li>
<li class="table-cell">云淡然</li>
<li class="table-cell">27</li>
<li class="table-cell">test</li>
<li class="table-cell">test</li>
<li class="table-cell">test</li>
</ul>
<ul class="table-row">
<li class="table-cell">2</li>
<li class="table-cell">刚师傅</li>
<li class="table-cell">27</li>
<li class="table-cell">test</li>
<li class="table-cell">test</li>
<li class="table-cell">test</li>
</ul>
<ul class="table-row">
<li class="table-cell">3</li>
<li class="table-cell">草珊瑚</li>
<li class="table-cell">27</li>
<li class="table-cell">test</li>
<li class="table-cell">test</li>
<li class="table-cell">test</li>
</ul>

<ul class="table-row">
<li class="table-cell">hl</li>
<li class="table-cell">hl</li>
<li class="table-cell">hl</li>
<li class="table-cell">hl</li>
<li class="table-cell">hl</li>
<li class="table-cell">hl</li>
</ul>
<ul class="table-row">
<li class="table-cell">hl</li>
<li class="table-cell">hl</li>
<li class="table-cell">hl</li>
<li class="table-cell">hl</li>
<li class="table-cell">hl</li>
<li class="table-cell">hl</li>
</ul>
<ul class="table-row">
<li class="table-cell">hl</li>
<li class="table-cell">hl</li>
<li class="table-cell">hl</li>
<li class="table-cell">hl</li>
<li class="table-cell">hl</li>
<li class="table-cell">hl</li>
</ul>
<ul class="table-row">
<li class="table-cell">hl</li>
<li class="table-cell">hl</li>
<li class="table-cell">hl</li>
<li class="table-cell">hl</li>
<li class="table-cell">hl</li>
<li class="table-cell">hl</li>
</ul>

</div>
</div>

body {
font: 14px/1.5 georgia, simsun, arial;
}

h1 {
margin: 10px 0;
font-size: 20px;
margin-top: 3em;
}

ul {
margin: 0;
padding: 0;
list-style: none;
}

.table {
display: table;
border-collapse: collapse;
border: 1px solid #ccc; //相当于table标签
}

.table-caption {
display: table-caption;
margin: 0;
padding: 0;
font-size: 16px; //相当于caption标签
}

.table-column-group {
display: table-column-group; //相当于colgroup标签
}

.table-column {
display: table-column;
width: 100px; //制定对象作为表格列，相当于col标签
}

.table-row-group {
display: table-row-group; //指定对象作为表格行组。类同于html标签<tbody>
}

.table-row {
display: table-row; //指定对象作为表格行。类同于html标签<tr>
}

.table-row-group .table-row:hover,
.table-footer-group .table-row:hover {
background: #abcdef;
}

.table-cell {
display: table-cell;
padding: 0 5px;
border: 1px solid #ccc; //指定对象作为表格单元格。类同于html标签<td>
}

.table-header-group {
display: table-header-group;
background: #eee;
font-weight: bold; //指定对象作为表格标题组。类同于html标签<thead>
}

.table-footer-group {
display: table-footer-group; //指定对象作为表格脚注组。类同于html标签<tfoot>
}

.tianzi{
width: 100px;
height: 100px;
background: #abcdef;
}
.haoli{
width: 500px;
height: 500px;
background-color: aqua;
}