網(wǎng)站建設(shè)中，如果兩個(gè)或多個(gè)邊框相鄰，它們會(huì)相互合并。實(shí)際上，并不是完全合并，而是要看其中哪一個(gè)在其他邊框中占上風(fēng)。哪些邊框會(huì)勝出，哪些邊框會(huì)被合并，對此有一些嚴(yán)格的規(guī)則：

如果某個(gè)合并邊框的border-style為hidden，它會(huì)優(yōu)先于所有其他合并邊框。這個(gè)位置上的所有邊框都隱藏。

如果某個(gè)合并邊框的border-style為none，它的優(yōu)先級最低。這個(gè)位置上不會(huì)畫出該邊框，除非所有其他合并邊框的border-style值都是non%注意，none 是 border-style 的默認(rèn)值。

如果至少有一個(gè)合并邊框的border-style值不是none，而且所有合并邊框的border-style值都不是hidden，則窄邊框不敵更寬的邊框。如果多個(gè)合并邊框有相同的寬度，則會(huì)考慮邊框樣式，并采用以下順序（從最優(yōu)先到最不優(yōu)先）：double、solid、dashed、dotted、ridge、outset、groove、inset，因此，如果兩個(gè)有相同寬度的邊框合并，而其中一個(gè)是dashed邊框，另一個(gè)是outset邊框，該位置上的邊框?qū)⑹翘摼€邊框。

如果合并邊框的樣式和寬度都一樣，但是顏色不同，則按下表煩序使用元素的顏色（從最優(yōu)先到最不優(yōu)先）： cell、row、row group、column、column group, table。因此，如果一個(gè)單元格和一個(gè)列的邊框合并（除顏色外，所有其他方面都一樣），會(huì)使用單元格的邊框顏色（和樣式及寬度）。如果合并邊框來自相同類型的元素，如兩個(gè)有相同樣式和寬度但不同顏色的行邊框，則顏色取最上最左邊框的顏色（在從左向右讀的語言中是這樣，而在從右向左讀的語言中，則取最上最右邊框的顏色）。

以下樣式和標(biāo)記有助于說明這4個(gè)規(guī)則（結(jié)果見圖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>

下面依次考慮網(wǎng)頁設(shè)計(jì)人員對各個(gè)單元格發(fā)生了什么：

對于單元格1-1和1-4, 5像素的邊框比其他所有相鄰邊框都寬，所以5像素的邊框不僅會(huì)勝出其相鄰單元格邊框，還會(huì)優(yōu)先于表本身的邊框，只有單元格1-1的下邊框例外，在此不再顯示5像素的邊框，

單元格1-1的下邊框之所以沒有勝出，是因?yàn)閱卧?-1和2-2顯式聲明了邊框隱藏，這就從這些單元格的邊界上去除了所有邊框。同樣地，表的邊框（單元格2-1左邊界上的邊框）也落敗于該單元格的邊框。單元格4-1的下邊框也隱藏，所以這個(gè)單元格下面不會(huì)出現(xiàn)任何邊框。

單元格2-4的3像素寬double邊框頂部被單元格1-4的5像素實(shí)線邊框所覆蓋，不過這個(gè)double邊框會(huì)覆蓋該單元格本身與單元格2-3之間的邊框，因?yàn)檫@個(gè)double 邊框不僅更寬而且“更有意思”。單元格2-4的邊框還覆蓋了它自己與單元格3-4之間的邊框，盡管二者寬度相同，但單元格2-4邊框的double樣式定義為比單元格3-4的dotted邊框“更有意思”。

單元格3-3的13像素銀色下邊框不僅會(huì)覆蓋單元格4-3的上邊框，還會(huì)影響這兩個(gè)單元格以及包含這兩個(gè)單元格的行中的內(nèi)容布局。

對于沿著表外邊界而且沒有指定樣式的單元格，其1像素實(shí)線邊框會(huì)被table元素本身的3像素outset邊框所覆蓋。

聽上去很復(fù)雜，也確實(shí)如此，不過這些行為都很直觀，通過動(dòng)手實(shí)踐就會(huì)更清楚。但是需要指出，對于Netscape 1時(shí)代的基本HTML表，其表示僅用很簡單的一組規(guī)則就可以描述，如下（結(jié)果見圖11-10所示）。

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

td {border: 1px inset gray;}