关于table和css更具结构性的组合

这个是在网上看了一些介绍。于是做了一段代码来模拟，验证使用这种方式带来的好处
先看个效果。很简单的显示出一个表格：

[img]/upload/attachment/45864/cac771cf-cc6c-3e32-a55e-310bb3ce8317.png[/img]

<style type="text/css">
body{font-size:13px;}
.nice-table{
border-left:1px #eee solid; border-bottom:1px #eee solid;
}
.nice-table caption{ font-size:16px; font-weight:bold;}
.nice-table thead{}
.nice-table thead tr td,.nice-table thead tr th{
border-top:1px #eee solid; border-right:1px #eee solid; padding:3px; background-color:#f2f2f2;
}
.nice-table tbody{}
.nice-table tbody tr td{
border-top:1px #eee solid; border-right:1px #eee solid; padding:3px;
}
.nice-table tfoot{}
.nice-table tfoot tr td{
border-top:1px #eee solid; border-right:1px #eee solid; padding:3px;
}
</style>
<table class="nice-table" cellpadding="0" cellspacing="0">
	<caption>用户列表</caption>
    <thead>
    	<tr>
        	<th width="20">ID</th>
            <th width="100">登录名</th>
            <th width="100">姓名</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>miller</td>
            <td>麦扣</td>
        </tr>
        <tr>
            <td>2</td>
            <td>doudou</td>
            <td>麦兜</td>
        </tr>
    </tbody>
    <tfoot>
    	<tr>
        	<td colspan="3">
            <span style="float:right">[1][2][3]</span>
            </td>
        </tr>
    </tfoot>
</table>

可以看出这样的结构很分明：
表格由head,body,foot组成，如果没有使用这样的方式那么可能需要对每个tr去定义其属于什么类型的。
并且切换表格式样也方便了。只需要更换table的class属性即可。