网页设计中的合并边框布局

  • 2019-05-22 16:26:05
  • 阅读次数:
  • 作者:盈岚科技小编
  • 来源:http://www.lyjtt.cn

合并单元格边框

合并单元格模型基本上描述了没有单元格间隔时HTML表通常如何布局,不过,这比分隔边框模型要更复杂一些。以下规则使合并单元格边框与分隔单元格边框有所区别:

display值为table或inline-table的元素不能有任何内边距,不过它们可以有外边距。因此,表的外围边框与其最外单元格的边界之间不会有任何间隔。

边框可以应用到单元格。行、行组、列和列组。表元素本身通常都有一个边框。

单元格边框之间绝对不会有任何间隔。实际上,如果边框相邻,就会相互合并,使得实际上只画其中一个合并边框。这有些类似于外边距合并,即最大的一个外边距“胜出”。单元格边框合并时,“最有意思的”边框会胜出。

一旦合并,单元格之间的边框会在单元格间的假想表格线上居中。

下面两节将更详细地讨论后两点。

合并边框布局

为了更好地理解合并边框模型如何工作,下面来看一个表行的布局,如图11-8所示。

不出所料,每个单元格的内边距和内容宽度都在边框以内,对于单元格之间的边框,-半边框放在两个单元格之间表格线的一边,另一半放在另一边,不论哪一种情况,沿着各单元格边界只会画一个边框。你可能认为总是在表格线两边分别画各单元格的一半边框(译注2)[2],但实际上并不是这样。

例如,假设中间单元格的实线边框是绿色,外面两个单元格的实线边框是红色。中间单元格左右两边的边框(与外面两个单元格的相邻边框合并)都将是绿色,或都是红色,这取决于哪个边框胜出。下一节我们将讨论如何区分哪个边框会取胜。

网页设计人员可能已经注意到,外边框超出了表的宽度。这是因为,在这个模型中,宽度只包含表边框的一半。另一半在此距离之外,落在外边距中。看上去可能有些怪异,不过模型就是这样定义的。

规范提供了一个布局公式,为了方便大家学习,以下列出这个公式:

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代表该行中的单元格总数。这个机制有一个小小的例外。在开始建立一个合并边框表的布局时,网页设计人员会为表本身计算一个初始的左右边框。这是这样完成的:首先检査表中第一行第一个单元格的左边框,并取该边框宽度的一半作为表的初始左边框宽度。用户代理再检査第一行中最后一个单元格的右边框,取其宽度的一半来设置表的初始右边框宽度。对于第一行之后的其他行,如果其左或右边框比初始边框宽度更宽,则会延伸到表的外边距区中。

如果边框的宽度是一个奇数(即奇数个昆示元素,如像素、打印点等),网站建设人员必须决定如何将边框在表格线上居中。它可能会移动该边框,使之稍稍偏离中心,或者将宽度向上或向下调整为一个偶数(偶数个显示元素),或者采用其他看上去合理的做法。

当前文章标题:网页设计中的合并边框布局

当前URL:http://www.lyjtt.cn/news/wzzz/border-layout.html

上一篇:处理空单元格

下一篇:网页设计中的边框合并

网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)