三种细边框表格的实现方法比较
1.背景设置式－细边框表格
<html>
<head>
<title>背景设置式－细边框表格</title>
</head>
<body>
<table width="200" border="0" cellpadding="2" cellspacing="1" bgcolor="#000000">
<tr>
<th bgcolor="#FFFFEE" colspan="2">背景设置式－细边框表格</th>
</tr>
<tr>
<td bgcolor="#FFFFEE">text
</td>
<td bgcolor="#FFFFEE">text</td>
</tr>
<tr>
<td bgcolor="#FFFFEE">text</td>
<td bgcolor="#FFFFEE">text</td>
</tr>
</table>
</body>
</html>
2.边框设置式－细边框表格
<html>
<head>
<title>边框设置式－细边框表格</title>
</head>
<body>
<table width="200" border="1" cellpadding="2" cellspacing="0" bordercolorlight="#000000" bordercolordark="#FFFFFF" bgcolor="#FFFFEE">
<tr>
<th colspan="2">边框设置式－细边框表格</th>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
</table>
</body>
</html>
3.CSS 层叠式－细边框表格
<html>
<head>
<title>CSS 层叠式－细边框表格</title>
<style type="text/css">
<!--
.T_Sample {
border-collapse: collapse;
border: none;
background: #FFFFEE;
}
.T_Sample th {
border: solid 1px #000000;
}
.T_Sample td {
border: solid 1px #000000;
}
-->
</style>
</head>
<body>
<table width="200" border="1" cellpadding="2" cellspacing="0" class="T_Sample">
<tr>
<th colspan="2">CSS 层叠式－细边框表格</th>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
</table>
</body>
</html>
<html><head> <title>背景设置式－细边框表格</title></head><body> <table width="200" border="0" cellpadding="2" cellspacing="1" bgcolor="#000000"> <tr> <th bgcolor="#FFFFEE" colspan="2">背景设置式－细边框表格</th> </tr> <tr> <td bgcolor="#FFFFEE">text</td> <td bgcolor="#FFFFEE">text</td> </tr> <tr> <td bgcolor="#FFFFEE">text</td> <td bgcolor="#FFFFEE">text</td> </tr> </table></body></html><html><head> <title>边框设置式－细边框表格</title></head><body> <table width="200" border="1" cellpadding="2" cellspacing="0" bordercolorlight="#000000" bordercolordark="#FFFFFF" bgcolor="#FFFFEE"> <tr> <th colspan="2">边框设置式－细边框表格</th> </tr> <tr> <td>text</td> <td>text</td> </tr> <tr> <td>text</td> <td>text</td> </tr> </table></body></html><html><head> <title>CSS 层叠式－细边框表格</title><style type="text/css">
<!--.T_Sample {
.T_Sample border-collapse: collapse; border: none; background: #FFFFEE;}.T_Sample th { border: solid 1px #000000;}.T_Sample td { border: solid 1px #000000;}--></style></head><body> <table width="200" border="1" cellpadding="2" cellspacing="0" class="T_Sample"> <tr> <th colspan="2">CSS 层叠式－细边框表格</th> </tr> <tr> <td>text</td> <td>text</td> </tr> <tr> <td>text</td> <td>text</td> </tr> </table></body></html>| 大小(字节) | 打印兼容 | 灵活性 | 点评 | 适合场合 | |
| 背景设置式 | 609 | × | ☆ | 此设置方式可能是因为动网论坛才会得到广泛使用的。这种方式在打印时是完全看不到表格线的，要对每个<td>设置背景颜色才可以修改颜色。 | 不需打印；要实现相间背景色的单元格的场合 |
| 边框设置式 | 572 | ☆ | ★ | 此设置方式只须修改一行的<table>的属性就可以实现。在打印时只有底边和右边的表格线是细线，而其他的均出现粗线。另外，部分非IE内核浏览器可能不支持，如FireFox。 | 对打印需求不高；因为只须修改一行，所以容易复制使用，适合使用率高而颜色变化不大的场合 |
| CSS 层叠式 | 749 | ★ | ★★ | 此设置方式是MSOffice的另存为所采用的方式。对边框打印完全显示。如果设定好CSS，那么只须设置每个<table>的Class属性即可修改。由于CSS的继承性，所以会影响到其嵌套表格的样式，除非设置另外的Class属性。 | 对打印需求高；适合大网站的换肤设计；但要求会运用CSS样式表 |
