CSS布局实例：一个不错的表格样式_DIV+CSS实例
教程Tag：暂无Tag,欢迎添加,赚取U币!
今天在蓝色看到一个表格的设计图，于是自己动手做了效果，虽然没有达到图中的效果，但也算不错了！
HTML代码：
CSS代码：
代码调试框 [www.mb5u.com]
HTML代码：
示例代码 [www.mb5u.com]
<table width="590" cellspacing="1">
<caption>
text
</caption>
<thead>
<tr>
<th class="line1" scope="col">text</th>
<th scope="col">text</th>
<th scope="col">text</th>
<th class="line4" scope="col">More</th>
</tr>
</thead>
<tbody>
<tr>
<th height="78">text text text text</th>
<td>text text text text</td>
<td>text text text</td>
<td class="line4"> </td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
<caption>
text
</caption>
<thead>
<tr>
<th class="line1" scope="col">text</th>
<th scope="col">text</th>
<th scope="col">text</th>
<th class="line4" scope="col">More</th>
</tr>
</thead>
<tbody>
<tr>
<th height="78">text text text text</th>
<td>text text text text</td>
<td>text text text</td>
<td class="line4"> </td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
CSS代码：
示例代码 [www.mb5u.com]
body{background-color:#D5DFE9;}
table{border-spacing:1px; border:1px solid #A2C0DA;}
td, th{padding:2px 5px;border-collapse:collapse;text-align:left; font-weight:normal;}
thead tr th{background:#B0D1FC;border:1px solid white;}
thead tr th.line1{background:#D3E5FD;}
thead tr th.line4{background:#C6C6C6;}
tbody tr td{height:50px;background:#CBE2FB;border:1px solid white; vertical-align:top;}
tbody tr td.line4{background:#D5D6D8;}
tbody tr th{height:50px;background: #DFEDFF;border:1px solid white; vertical-align:top;}
caption,tfoot{display:none;}
table{border-spacing:1px; border:1px solid #A2C0DA;}
td, th{padding:2px 5px;border-collapse:collapse;text-align:left; font-weight:normal;}
thead tr th{background:#B0D1FC;border:1px solid white;}
thead tr th.line1{background:#D3E5FD;}
thead tr th.line4{background:#C6C6C6;}
tbody tr td{height:50px;background:#CBE2FB;border:1px solid white; vertical-align:top;}
tbody tr td.line4{background:#D5D6D8;}
tbody tr th{height:50px;background: #DFEDFF;border:1px solid white; vertical-align:top;}
caption,tfoot{display:none;}
相关DIV+CSS实例：
- 相关链接：
- 教程说明：
DIV+CSS实例-CSS布局实例：一个不错的表格样式
。