有如下html代码：
<table border="1px" width="500px" height="300px" align="center" cellpadding="0" cellspacing="1">
<tr align="right">
<td width="100px" height="50px">刘德华</td>
<td align="center">张学友</td>
</tr>
<tr valign="top">
<td>郭富城</td>
<td valign="bottom">黎明</td>
</tr>
</table>显示的效果时这样的：
这对我们来说，是没有什么问题的，cellspacing控制着每个单元格的边框之间的间隙，当把cellspacing设置为0的时候会出现什么情况呢？每一条border就会与它相邻的border重合，重合后的效果时这样的：
感觉黑黑的啊，这里不请小哥来讲嘿嘿嘿，怎么实现边框很细的效果呢，就像下边这样：
这就是所谓的细线表格了，看起来是不是比粗边框的好看了很多，细线表格实现的html代码如下：
<table width="500px" height="300px" align="center" cellpadding="0" cellspacing="1" bgcolor="black">
<tr align="right" bgcolor="white">
<td width="100px" height="50px">刘德华</td>
<td align="center">张学友</td>
</tr>
<tr valign="top" bgcolor="white">
<td>郭富城</td>
<td valign="bottom">黎明</td>
</tr>
</table>看到了吧，我们这里所看到的细线边框其实是cellspacing“漏”出来的表格的背景色black。
注意：bgcolor用来设置table或者tr的背景。
当然了，上边都是通过html标签的属性来完成的，在工作中，我们更多的是使用css来完成，使用css完全可以实现相同的细线表格边框的效果：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
table{
border-collapse:collapse;
border-spacing:0;
border:1px solid;
}
td{
border:1px solid;
}
</style>
</head>
<body>
<table width="500px" height="300px" align="center">
<tr align="right">
<td width="100px" height="50px">刘德华</td>
<td align="center">张学友</td>
</tr>
<tr valign="top">
<td>郭富城</td>
<td valign="bottom">黎明</td>
</tr>
</table>
</body>
</html>重点：border-collapse:collapse;
793
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
