合并單元格模型基本上描述了沒有單元格間隔時(shí)HTML表通常如何布局,不過,這比分隔邊框模型要更復(fù)雜一些。以下規(guī)則使合并單元格邊框與分隔單元格邊框有所區(qū)別:
display值為table或inline-table的元素不能有任何內(nèi)邊距,不過它們可以有外邊距。因此,表的外圍邊框與其最外單元格的邊界之間不會有任何間隔。
邊框可以應(yīng)用到單元格。行、行組、列和列組。表元素本身通常都有一個邊框。
單元格邊框之間絕對不會有任何間隔。實(shí)際上,如果邊框相鄰,就會相互合并,使得實(shí)際上只畫其中一個合并邊框。這有些類似于外邊距合并,即最大的一個外邊距“勝出”。單元格邊框合并時(shí),“最有意思的”邊框會勝出。
一旦合并,單元格之間的邊框會在單元格間的假想表格線上居中。
下面兩節(jié)將更詳細(xì)地討論后兩點(diǎn)。
為了更好地理解合并邊框模型如何工作,下面來看一個表行的布局,如圖11-8所示。
不出所料,每個單元格的內(nèi)邊距和內(nèi)容寬度都在邊框以內(nèi),對于單元格之間的邊框,-半邊框放在兩個單元格之間表格線的一邊,另一半放在另一邊,不論哪一種情況,沿著各單元格邊界只會畫一個邊框。你可能認(rèn)為總是在表格線兩邊分別畫各單元格的一半邊框(譯注2)[2],但實(shí)際上并不是這樣。
例如,假設(shè)中間單元格的實(shí)線邊框是綠色,外面兩個單元格的實(shí)線邊框是紅色。中間單元格左右兩邊的邊框(與外面兩個單元格的相鄰邊框合并)都將是綠色,或都是紅色,這取決于哪個邊框勝出。下一節(jié)我們將討論如何區(qū)分哪個邊框會取勝。
網(wǎng)頁設(shè)計(jì)人員可能已經(jīng)注意到,外邊框超出了表的寬度。這是因?yàn)椋谶@個模型中,寬度只包含表邊框的一半。另一半在此距離之外,落在外邊距中。看上去可能有些怪異,不過模型就是這樣定義的。
規(guī)范提供了一個布局公式,為了方便大家學(xué)習(xí),以下列出這個公式:
row width ={0.5 * border-widthO}+ padding-left1 + width1 + padding-right1 + border-width1 + padding-left2 +...+ padding-rightn +(0.5 * border-widthn)
各border-width是指單元格與下一個單元格之間的邊框,因此,border-width3
是指第3個和第4個單元格之間的邊框。值n代表該行中的單元格總數(shù)。這個機(jī)制有一個小小的例外。在開始建立一個合并邊框表的布局時(shí),網(wǎng)頁設(shè)計(jì)人員會為表本身計(jì)算一個初始的左右邊框。這是這樣完成的:首先檢査表中第一行第一個單元格的左邊框,并取該邊框?qū)挾鹊囊话胱鳛楸淼某跏甲筮吙驅(qū)挾?。用戶代理再檢査第一行中最后一個單元格的右邊框,取其寬度的一半來設(shè)置表的初始右邊框?qū)挾取τ诘谝恍兄蟮钠渌?,如果其左或右邊框比初始邊框?qū)挾雀鼘?,則會延伸到表的外邊距區(qū)中。
如果邊框的寬度是一個奇數(shù)(即奇數(shù)個昆示元素,如像素、打印點(diǎn)等),網(wǎng)站建設(shè)人員必須決定如何將邊框在表格線上居中。它可能會移動該邊框,使之稍稍偏離中心,或者將寬度向上或向下調(diào)整為一個偶數(shù)(偶數(shù)個顯示元素),或者采用其他看上去合理的做法。
當(dāng)前文章標(biāo)題:網(wǎng)頁設(shè)計(jì)中的合并邊框布局
當(dāng)前URL:http://www.gtalker.cn/news/wzzz/border-layout.html
上一篇:處理空單元格