網(wǎng)站建設(shè)中采用這種模型，表中的每個(gè)單元格都與其他單元格分開一定距離，而且單元格的邊框彼此不會(huì)合并。因此，給定以下樣式和標(biāo)記，可以看到如圖11-6所示的結(jié)果：

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>

注意，單元格邊框相互挨著，但彼此保持區(qū)別，單元格之間的三條線實(shí)際上是相鄰放置的兩個(gè)double邊框。

前例中加人了HTML屬性cellspacing來確保單元格之間沒有間隔，伹是用這個(gè)屬性好像有些麻煩。畢竟，如果能定義分隔邊框，就應(yīng)該有辦法使用網(wǎng)站建設(shè)改變單元格之間的間隔。幸運(yùn)的是，確實(shí)有這樣的辦法。

邊框間隔

可能有這樣一種情況，你希望表單元格邊框分隔一段距離。利用屬性border-spacing 很容易做到，它提供了強(qiáng)大的功能，完全可以替換HTML屬性cellspacing.

border-spacing

值：<length><length>?| inherit

初始值：0

應(yīng)用于：display 值為table 或 inline-table 的元素

繼承性：有

計(jì)算值：兩個(gè)絕對(duì)長(zhǎng)度

說明：除非border-col lapse值為separate，否則會(huì)忽略該屬性

可以為這個(gè)屬性指定一個(gè)或兩個(gè)長(zhǎng)度值。如果希望所有單元格都分隔1個(gè)像素的距離，聲明border-spacing: 1px;就足夠了。另一方面，如果網(wǎng)頁設(shè)計(jì)人員希望單元格水平間隔1個(gè)像素，而垂直間隔5個(gè)像素，就要寫作border-spacing: 1px 5px;。如果提供兩個(gè)長(zhǎng)度值，則要求第一個(gè)值始終是水平間隔，第二個(gè)值始終是垂直間隔。

表外圍的單元格邊框與表元素本身的內(nèi)邊距之間也可以指定間隔值。給定以下樣式，可以得到如圖11-7所示的結(jié)果：

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中，兩個(gè)水平相鄰單元格的邊框之間有3像素的空間，最右單元格的邊框與table元素右邊框之間以及最左單元格的邊框與table元素左邊框之間都有13像素的空間。類似地，垂直相鄰單元格的邊框相距5像素，最上面一行中單元格的邊框與表的上邊框之間以及最下面一行中單元格的邊框與表的下邊框之間都分別有15像素的空間。不論單元格本身的邊框?qū)挾仁嵌嗌?，單元格邊框之間的間隔在整個(gè)表中是固定不變的。

還要注意，如果要聲明一個(gè)border-spacing值，這會(huì)應(yīng)用于表本身，而不是單個(gè)的單元格。如果為上例中的td元素聲明border-spacing，則會(huì)被忽略。

在分隔邊框模型中，不能為行、行組。列和列組設(shè)置邊框。如果為這些元素聲明了邊框?qū)傩?，都?huì)被網(wǎng)站建設(shè)兼容的用戶代理所忽略。