表格的CSS定义，不让表格之间出现间距
编辑：祝先生最近在研究表格的时候，一直有个问题困惑很长时间：表格在table标签上定义非常简单容易，如果利用CSS定义却和意想的不一样，永远在表格与表格之间存在一定间距，这不是我们想要的样式，那么要怎样来通过CSS定义，才不会出现表格之间的间距呢，请继续往下看。
1.表格在table标签上定义的效果
在table标签上是这样的：
<table width="200" border="1" cellspacing="0" cellpadding="0">
其中：
width="200"：代表宽为200像素；
border="1"：代表边框粗细为1像素；
cellspacing="0"：代表单元格间距为O像素，即单元格与单元格之间的距离，也可以叫做单元格外的距离；
cellpadding="0"：代表单元格边距为O像素，即单元格内填充的距离；
如果需要改变边框线的颜色为红色，只需要在这个表中的每个td标签上加上css定义style="border: 1px solid #F00;"样式如下：
细心的你也许会发现，中间的线变成红色，但外边线却还有点红加黑的感觉，此时我们还需要在table标签上加上CSS定义style="border: 1px solid #F00;"样式如下：
是不是就完美了呢？我把完整代码贴在下面，方便你也试试。
2.表格在CSS上定义的效果
如果去掉table与td标签上的定义，利用外置css来定义会是什么样的效果呢？首先说明一下，虽然在table标签上定义非常方便，但不利于移动终端上的体验，利用外置css来定义更容易实现网页在不同终端上的自适应。
我们使用：
table,td {
border: 1px solid #F00;
}
td {
height: 20px;
width: 70px;
}
来定义，效果如下：
显然不是我们想要的结果。
每个单元格之间都会有一定距离，这要怎么处理呢？有人说可以使用border-spacing属性定义表格单元格之间边框的距离。
说干就干，给table加个：
border-spacing:0 px;
定义，效果如下：
显然也是一样没有效果！
实际上，哪怕你使用：
margin: 0px;
padding: 0px;
这些CSS定义是一样没有效果的。
相较于table,tr,td这样的表格标签，使用像ul,ut,li和dl,dt,dd这样的列表标签更容易定义，下面就来一组列表标签：
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
看看是如何通过css把它们定义成表格的。只需要来一组如下CSS：
ul {
display: table-row;
}
li {
height: 20px;
width: 70px;
border: 1px solid #F00;
list-style-image: none;
list-style-type: none;
display: table-cell;
}
就可以定义出如下效果：
说明：把ul定义为display: table-row即表格的行；li定义为display: table-cell，即表格的单元格，去掉li的项目符号与列表图像，用到list-style-image: none;list-style-type: none;其他的都好理解。
是不是还没有用table,tr,td这样的表格标签伤脑筋？
如果不想改动table,tr,td这样的表格标签，非常得要用CSS去实现，也不是没有办法，只需要给table标签加上border-collapse:collapse;这样的CSS定义即可，如：
table,td {
border: 1px solid #F00;
}
td {
height: 20px;
width: 70px;
}
table {
border-collapse:collapse;
}
就可以实现以下效果：
也就是说，通过border-collapse:collapse的CSS定义对表table中的tl或td实现了重叠，就达到了我们想要的效果。语法如下：
border-collapse : separate / collapse
值：
separate : 默认。单元格边框独立（标准HTML）
collapse : 单元格相邻边重叠合并
下面我把完整代码贴出来，可以自己操作下看看。
