网站建设中，如果两个或多个边框相邻，它们会相互合并。实际上，并不是完全合并，而是要看其中哪一个在其他边框中占上风。哪些边框会胜出，哪些边框会被合并，对此有一些严格的规则：

如果某个合并边框的border-style为hidden，它会优先于所有其他合并边框。这个位置上的所有边框都隐藏。

如果某个合并边框的border-style为none，它的优先级最低。这个位置上不会画出该边框，除非所有其他合并边框的border-style值都是non%注意，none 是 border-style 的默认值。

如果至少有一个合并边框的border-style值不是none，而且所有合并边框的border-style值都不是hidden，则窄边框不敌更宽的边框。如果多个合并边框有相同的宽度，则会考虑边框样式，并采用以下顺序（从最优先到最不优先）：double、solid、dashed、dotted、ridge、outset、groove、inset，因此，如果两个有相同宽度的边框合并，而其中一个是dashed边框，另一个是outset边框，该位置上的边框将是虚线边框。

如果合并边框的样式和宽度都一样，但是颜色不同，则按下表烦序使用元素的颜色（从最优先到最不优先）： cell、row、row group、column、column group, table。因此，如果一个单元格和一个列的边框合并（除颜色外，所有其他方面都一样），会使用单元格的边框颜色（和样式及宽度）。如果合并边框来自相同类型的元素，如两个有相同样式和宽度但不同颜色的行边框，则颜色取最上最左边框的颜色（在从左向右读的语言中是这样，而在从右向左读的语言中，则取最上最右边框的颜色）。

以下样式和标记有助于说明这4个规则（结果见图11-9所示）：

table{border-collapse: collapse;

border: 3px outset gray;}

td {border: 1px solid gray; padding: 0.5em;}

#r2c1,#r2c2 {border-style: hidden;}

#r1c1,#r1c4 {border-width: Spx;}

#r2c4.{border-style: double; border-width: 3px;}

#r3c4 {border-style: dotted; border-width: 2px;}

#r4c1 {border-bottom-style: hidden;}

#r4c3 {border-top: 13px solid silver;}

<table>

<tr>

<td id="r1c1">1 -1</td><td id="r1c2">1-2</td>

<td id="r1c3">1-3</td><td id="r1c4">1-4</td>

</tr>

<tr>

<td id="r2c1*>2-l</td><td id="r2c2">2-2</td>

<td id=T2c3->2-3</td><td id="r2c4">2-4</td>

<td id="r3cl">3-1</td><td id="r3c2">3-2</td>

<td id="r3c3">3-3</td><td id="r3c4">3-4</td>

</tr>

<tr>

<td id="r4cl">4-1</td><td id="r4c2">4-2</td>

<td id="r4c3">4-3</td><td id=T4c4">4-4</td>

</tr>

</table>

下面依次考虑网页设计人员对各个单元格发生了什么：

对于单元格1-1和1-4, 5像素的边框比其他所有相邻边框都宽，所以5像素的边框不仅会胜出其相邻单元格边框，还会优先于表本身的边框，只有单元格1-1的下边框例外，在此不再显示5像素的边框，

单元格1-1的下边框之所以没有胜出，是因为单元格2-1和2-2显式声明了边框隐藏，这就从这些单元格的边界上去除了所有边框。同样地，表的边框（单元格2-1左边界上的边框）也落败于该单元格的边框。单元格4-1的下边框也隐藏，所以这个单元格下面不会出现任何边框。

单元格2-4的3像素宽double边框顶部被单元格1-4的5像素实线边框所覆盖，不过这个double边框会覆盖该单元格本身与单元格2-3之间的边框，因为这个double 边框不仅更宽而且“更有意思”。单元格2-4的边框还覆盖了它自己与单元格3-4之间的边框，尽管二者宽度相同，但单元格2-4边框的double样式定义为比单元格3-4的dotted边框“更有意思”。

单元格3-3的13像素银色下边框不仅会覆盖单元格4-3的上边框，还会影响这两个单元格以及包含这两个单元格的行中的内容布局。

对于沿着表外边界而且没有指定样式的单元格，其1像素实线边框会被table元素本身的3像素outset边框所覆盖。

听上去很复杂，也确实如此，不过这些行为都很直观，通过动手实践就会更清楚。但是需要指出，对于Netscape 1时代的基本HTML表，其表示仅用很简单的一组规则就可以描述，如下（结果见图11-10所示）。

table{border-collapse: collapse; border: 2px outset gray;}

td {border: 1px inset gray;}