合并單元格邊框

合并單元格模型基本上描述了沒(méi)有單元格間隔時(shí)HTML表通常如何布局，不過(guò)，這比分隔邊框模型要更復雜一些。以下規則使合并單元格邊框與分隔單元格邊框有所區別：

display值為table或inline-table的元素不能有任何內邊距，不過(guò)它們可以有外邊距。因此，表的外圍邊框與其最外單元格的邊界之間不會(huì )有任何間隔。

邊框可以應用到單元格。行、行組、列和列組。表元素本身通常都有一個(gè)邊框。

單元格邊框之間絕對不會(huì )有任何間隔。實(shí)際上，如果邊框相鄰，就會(huì )相互合并，使得實(shí)際上只畫(huà)其中一個(gè)合并邊框。這有些類(lèi)似于外邊距合并，即最大的一個(gè)外邊距“勝出”。單元格邊框合并時(shí)，“最有意思的”邊框會(huì )勝出。

一旦合并，單元格之間的邊框會(huì )在單元格間的假想表格線(xiàn)上居中。

下面兩節將更詳細地討論后兩點(diǎn)。

合并邊框布局

為了更好地理解合并邊框模型如何工作，下面來(lái)看一個(gè)表行的布局，如圖11-8所示。

不出所料，每個(gè)單元格的內邊距和內容寬度都在邊框以?xún)?，對于單元格之間的邊框，-半邊框放在兩個(gè)單元格之間表格線(xiàn)的一邊，另一半放在另一邊，不論哪一種情況，沿著(zhù)各單元格邊界只會(huì )畫(huà)一個(gè)邊框。你可能認為總是在表格線(xiàn)兩邊分別畫(huà)各單元格的一半邊框（譯注2）[2]，但實(shí)際上并不是這樣。

例如，假設中間單元格的實(shí)線(xiàn)邊框是綠色，外面兩個(gè)單元格的實(shí)線(xiàn)邊框是紅色。中間單元格左右兩邊的邊框（與外面兩個(gè)單元格的相鄰邊框合并）都將是綠色，或都是紅色，這取決于哪個(gè)邊框勝出。下一節我們將討論如何區分哪個(gè)邊框會(huì )取勝。

網(wǎng)頁(yè)設計人員可能已經(jīng)注意到，外邊框超出了表的寬度。這是因為，在這個(gè)模型中，寬度只包含表邊框的一半。另一半在此距離之外，落在外邊距中?？瓷先タ赡苡行┕之?，不過(guò)模型就是這樣定義的。

規范提供了一個(gè)布局公式，為了方便大家學(xué)習，以下列出這個(gè)公式：

row width ={0.5 * border-widthO}+ padding-left1 + width1 + padding-right1 + border-width1 + padding-left2 +...+ padding-rightn +(0.5 * border-widthn)

各border-width是指單元格與下一個(gè)單元格之間的邊框，因此，border-width3

是指第3個(gè)和第4個(gè)單元格之間的邊框。值n代表該行中的單元格總數。這個(gè)機制有一個(gè)小小的例外。在開(kāi)始建立一個(gè)合并邊框表的布局時(shí)，網(wǎng)頁(yè)設計人員會(huì )為表本身計算一個(gè)初始的左右邊框。這是這樣完成的：首先檢査表中第一行第一個(gè)單元格的左邊框，并取該邊框寬度的一半作為表的初始左邊框寬度。用戶(hù)代理再檢査第一行中最后一個(gè)單元格的右邊框，取其寬度的一半來(lái)設置表的初始右邊框寬度。對于第一行之后的其他行，如果其左或右邊框比初始邊框寬度更寬，則會(huì )延伸到表的外邊距區中。

如果邊框的寬度是一個(gè)奇數（即奇數個(gè)昆示元素，如像素、打印點(diǎn)等），網(wǎng)站建設人員必須決定如何將邊框在表格線(xiàn)上居中。它可能會(huì )移動(dòng)該邊框，使之稍稍偏離中心，或者將寬度向上或向下調整為一個(gè)偶數（偶數個(gè)顯示元素），或者采用其他看上去合理的做法。