网站建设中采用这种模型，表中的每个单元格都与其他单元格分开一定距离，而且单元格的边框彼此不会合并。因此，给定以下样式和标记，可以看到如图11-6所示的结果：
table{border-collapse: separate;}
td {border: 3px double black.; padding: 3px;}
<table cellspacing="0">
<tr>
<td>cell one</td>
<td>cell two</Cd>
</tr>
<tr>
<td>cell three</tt3>
<td>cell four</t<3>
</tr>
</table>
注意，单元格边框相互挨着，但彼此保持区别，单元格之间的三条线实际上是相邻放置的两个double边框。
前例中加人了HTML属性cellspacing来确保单元格之间没有间隔，伹是用这个属性好像有些麻烦。毕竟，如果能定义分隔边框，就应该有办法使用网站建设改变单元格之间的间隔。幸运的是，确实有这样的办法。
可能有这样一种情况，你希望表单元格边框分隔一段距离。利用属性border-spacing 很容易做到，它提供了强大的功能，完全可以替换HTML属性cellspacing.
border-spacing
值：<length><length>?| inherit
初始值：0
应用于：display 值为table 或 inline-table 的元素
继承性：有
计算值：两个绝对长度
说明：除非border-col lapse值为separate，否则会忽略该属性
可以为这个属性指定一个或两个长度值。如果希望所有单元格都分隔1个像素的距离，声明border-spacing: 1px;就足够了。另一方面，如果网页设计人员希望单元格水平间隔1个像素，而垂直间隔5个像素，就要写作border-spacing: 1px 5px;。如果提供两个长度值，则要求第一个值始终是水平间隔，第二个值始终是垂直间隔。
表外围的单元格边框与表元素本身的内边距之间也可以指定间隔值。给定以下样式，可以得到如图11-7所示的结果：
table{border-collapse: separate; border-spacing: 3px 5px; padding: 10px; border: 2px solid black;}
td { border: 1px solid gray;}
td#squeeze {border-width: 5px;}
在图11-7中，两个水平相邻单元格的边框之间有3像素的空间，最右单元格的边框与table元素右边框之间以及最左单元格的边框与table元素左边框之间都有13像素的空间。类似地，垂直相邻单元格的边框相距5像素，最上面一行中单元格的边框与表的上边框之间以及最下面一行中单元格的边框与表的下边框之间都分别有15像素的空间。不论单元格本身的边框宽度是多少，单元格边框之间的间隔在整个表中是固定不变的。
还要注意，如果要声明一个border-spacing值，这会应用于表本身，而不是单个的单元格。如果为上例中的td元素声明border-spacing，则会被忽略。
在分隔边框模型中，不能为行、行组。列和列组设置边框。如果为这些元素声明了边框属性，都会被网站建设兼容的用户代理所忽略。