理解表格一：图解 frame 和 rules 属性

最新推荐文章于 2022-02-03 16:03:41 发布

cuboo

最新推荐文章于 2022-02-03 16:03:41 发布

阅读量1.4k

点赞数

分类专栏： Web开发文章标签： table safari ie xhtml 浏览器 border

Web开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Web 标准化也不是要“横扫一切牛鬼蛇神”，其要义是以语义化的原则使用标记，回归 HTML/XHTML 作为结构化语言的本来面目。

虽然不再提倡用 table 元素来进行页面布局，但用它来组织表格化的数据仍然还是最合适的选择。由于 table 元素的天生特性，使得用它来显示格式化的数据非常便利。但我们大多数人对于 table 元素的认识大概还只停留在 bgcolor、cellspacing、cellspadding、align 等属性和 <tr>、<td> 等标签上面，对于 table 元素的其他有用属性及其相关标签了解甚少。今天，先来学习一下 table 元素的两个不常用但却非常有用的属性－－frame 和 rules。回头再学习与 table 元素有关的标签，如 thead、tbody、colgroup 等。

以下面标记代码为例，注意在 <table frame=”hsides” rules=”all”> 中使用了这两个属性：

<table frame="hsides" rules="all">
  <tr>
     <td>First</td>
     <td>Row</td>
  </tr>
  <tr>
     <td>Second</td>
     <td>Row</td>
  </tr>
</table>

以上代码在网页中将显示如下表格样式：

First	Row
Second	Row

我们注意到，表格最外边的四条边框只有水平方向的（上下）两条是可见的，而在表格内部分割表格的（单元格之间）边框则全部可见。事实上，frame 属性控制着表格最外围的四条边框的可见性，而 rules 则控制着表格内部边框的可见性。frame 属性可取的值及含义如下：

void - 默认值。表示不显示表格最外围的边框。
box - 同时显示四条边框。
border - 同时显示四条边框。
above - 只显示顶部边框。
below - 只显示底部边框。
lhs - 只显示左侧边框。
rhs - 只显示右侧边框。
hsides - 只显示水平方向的两条边框。
vsides - 只显示垂直方面的两条边框。

在三大浏器（Safari 不支持这个属性）中的应用以上值的效果分别如下面三幅图所示（也可以在 W3Schools 亲自动手试一试）。仔细观察可以发现，FF 和 OP 还算规矩，IE 除了第一个值正确外，其他 8 个值的实现都不正确，这一点稍后再讨论。现在仅从边框效果上来看，三者也存在细微的差别，即：

FF 的边框效果是左、上边框灰色，右、下边框黑色；
OP 则全部是黑色边框；
IE 采用了三维边框效果。

IE 实现 frame 属性的错误之处在于，在渲染除 void 之外的 8 个值时，它不仅会显示指定的表格最外围的边框，而且还会错误地显示相应的表格内部边框（应该由 rules 属性控制）。怎么解决这个问题呢？在实践中，因为 IE 对 rules 属性的实现与 FF 和 OP 是一致的，所以通常建议开发者同时使用这两个属性，这样就可以用 rules 属性的实现“覆盖”frame 属性对表格内部边框不正确的渲染效果（仍然保留正确的最外围表格边框效果）。

rules 属性可取的值有五个，分别是：

none - 默认值。无边框。
groups - 为行组或列组加边框。
rows - 为行加边框。
cols - 为列加边框。
all - 为所有行列（单元格）加边框

注意，rules 属性指定的边框不会与 frame 属性指定的表格外围边框重合。这些值在三大浏览器（Safari 同样也不支持这个属性）中的效果如下面三幅图所示：

前面说过，IE 对 table 元素的 rules 属性的实现都是正确的，也就是说与 FF 和 OP 的结果一致。上面三幅图的对比也证实了这一点。所以，我们就可以放心地同时使用 frame 和 rules 这两个属性，以保证在这三大浏览器中获得一致的边框效果。

最后，还有一个问题值得注意。对于 HTML 标记而言，我们通常认为不设置相应的属性或者将属性值留空则该属性就应该使用默认值。但正如 XHTML 规范所约定的－－如果只给标签添加了属性但却没有赋值，是不合法的。而事实也证明，如果在标签中只添加属性，而将其属性值留空，则该属性并不一定会使用默认值。下表就是笔者亲自试验总结的一个结果。从中可以看出，IE 和 FF 在属性值被留空的情况下没有采用默认值，只有 OP 能够在这种情况下自动取得默认值（表中第一种情况说明，只有当不添加任何属性时，这两个属性才会自动采用默认值）。

所以，在实践当中，为了避免不一致的表格外观，应该严格遵守规范来编写代码（不将属性值留空）。具体到这两个属性的使用中，就是要同时使用这两个属性，而且不能给任何一个属性留空－－但可以分别给它们赋 void 或 none 默认值。

属性组合	FF2	OP9	IE7
<table>
<table frame="void">
<table rules="none">
<table frame="void" rules="none">
<table frame=" " rules=" ">
<table frame=" ">
<table rules=" ">
<table frame="void" rules=" ">
<table frame=" " rules="none">