三种细边框表格的实现方法比较（转）

最新推荐文章于 2021-06-07 16:16:57 发布

a15116818991

最新推荐文章于 2021-06-07 16:16:57 发布

阅读量211

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/JusticFu/archive/2006/07/21/456200.html

本文详细介绍了三种创建细边框HTML表格的方法：背景设置式、边框设置式及CSS层叠式。每种方法均有代码示例及显示效果对比，帮助读者理解不同设置方式的特点与适用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景设置式－细边框表格

代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <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>

网页显示效果：

背景设置式－细边框表格
text...	text...
text...	text...

打印预览效果：

边框设置式－细边框表格

代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <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>

网页显示效果：

边框设置式－细边框表格
text...	text...
text...	text...

打印预览效果：

CSS 层叠式－细边框表格

代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>CSS 层叠式－细边框表格</title> <style type="text/css">  </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>

网页显示效果：

CSS 层叠式－细边框表格
text...	text...
text...	text...

打印预览效果：

比较如下：

	大小(字节)	打印兼容	灵活性	重用性	复杂性	点评	适合场合
背景设置式	609	×	☆	☆	★	此设置方式可能是因为动网论坛才会得到广泛使用的。这种方式在打印时是完全看不到表格线的，要对每个<td>设置背景颜色才可以修改颜色。	不需打印；要实现相间背景色的单元格的场合
边框设置式	572	☆	★	★	☆	此设置方式只须修改一行的<table>的属性就可以实现。在打印时只有底边和右边的表格线是细线，而其他的均出现粗线。另外，部分非IE内核浏览器可能不支持，如FireFox。	对打印需求不高；因为只须修改一行，所以容易复制使用，适合使用率高而颜色变化不大的场合
CSS 层叠式	749	★	★★	★	★☆	此设置方式是MSOffice的另存为所采用的方式。对边框打印完全显示。如果设定好CSS，那么只须设置每个<table>的Class属性即可修改。由于CSS的继承性，所以会影响到其嵌套表格的样式，除非设置另外的Class属性。	对打印需求高；适合大网站的换肤设计；但要求会运用CSS样式表