今天在蓝色看到一个表格的设计图,于是自己动手做了效果,虽然没有达到图中的效果,但也算不错了!
Source Code to Run
[www.21shipin.com]HTML代码:
Example Source Code
[www.21shipin.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>
CSS代码:
Example Source Code
[www.21shipin.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;}