table 的 cellpadding="0" cellspacing="0" 属性如何在CSS中定义
一般用户会希望生成一个像素边框的表格,早期的办法是这样的:
<style>
.tableNormal{
background-color:#666666;
}
.tableNormal td{
background-color:#FFFFFF;
}
</style>
<table width="300" border="0" cellspacing="1" cellpadding="0" >
<tr>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
这样有两个不太好的地方:
一、是打印的时候将看不到表格线。
二、这样定义不太标准,没有完全将格式信息提出到CSS中。
另一种比较好的办法如下,比如下面这样的表格:其中关键是border-collapse: collapse;这一句将边框间距取消了。
<style type="text/css">
.tableNormal {
width: 300px;
border-collapse: collapse;
border-width: 1px 0px 0px 1px;
border-color: #000000;
border-style: solid;
}
.tableNormal th {
background-color:#EEFFCC;
border-width: 0px 1px 1px 0px;
border-color: #000000;
border-style: solid;
}
.tableNormal td {
background-color:#FFFFFF;
border-width: 0px 1px 1px 0px;
border-color: #000000;
border-style: solid;
}
</style>
<table >
<tr>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
另外,“border-collapse:separate; ” 就是将表格边框分离开的意思,相当于cellspacing 属性,而cellpadding属性当然用padding代替了。而“border-collapse:separate; ”在IE6上不支持,FireFox上表现很好,看来在CSS支持方面还是Firefox比较标准啊!