下面这个CSS样式的表格,个人感觉颜色起到了很大的作用。如果不是两种颜色的对比效果好,可能也就是一般的表格:
先来看HTML:
<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>
上面的表格没有什么要解释的,建议大家用thead,tbody,tfoot这些具有语义的标签。
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;
}
#btn{
text-align:center;
}
.txt{
width:200px;
height:20px;
}
上面的样式没有特别的地方。欢迎大家留言。