常州五颜六色网络技术有限公司 -> 网站建设 -> 表格,让Web看起来更美(6):单元格与设置表格 登录 -> 注册 -> 回复主题 -> 发表主题

阿七 2006-04-04 09:53

单元格

列宽度

最重要的问题就是显示表格时每个列应该有多宽。行高差不多可以留给浏览器去决定,因为它会替每个单元格保留足够的 高度以容纳它的内容。而列宽比较重要,因为一些列(例如,显示文本的列)应该比另外一些列(例如,显示一位数字的列) 更宽。

通常,我们会像前面说到过的那样,对单独的单元格、列或列组使用CSS的width属性来指定它们的宽度。然而,Navigator 不对表格元素施用width属性。替代方法是在表格的单元格上使用遭到反对的HTML属性WIDTH。

WIDTH和前面讨论过的属性有些不同,它接受一种称为多重宽度的取值。多重宽度被用来指定相邻元素,例如表格列的宽度值。多重宽度是跟着一个星号的数字,例如1*、2*、3*等等。数字可以省略,单独的一个星号等价于1*。多重宽度以这样一种方式工作:在为所有固定宽度的列分配了宽度后,表格的多重宽度单元再分享剩余的空间,每个列占据和它的多重宽度相应的空间。比如,如果有两个列,一列的宽度是2*,而另一列的宽度是3*,则第一个列占据40%的宽度而第二个列占据60%,它们的宽度比是2:3。

多重宽度很好用,因为它能很好地分配显示宽度。如果用户拥有比作者预料的还大的显示器,各列仍能得到它应该分配的空间。不幸的是,除了*能被正确解释之外,当前的浏览器还不支持多重宽度。所以,指定了需要指定的列宽后,可以将剩余的列宽度指定为*,以使它们具有同样的宽度。

WIDTH接受的其余两种类型取值是以像素点为单位的长度和百分比。以像素点为单位的长度严格地将列的宽度规定为WIDTH 属性的取值。这不太好,因为它不能随不同的显示宽度自动调整。150个像素点对于那些巨大的21"显示器来说可能非常狭窄的,但对于那些使用低分辨率的14"显示器而言,那是屏幕的很大一部分。使用像素点指定宽度值的唯一原因是:希望将列的宽度指定为和某个图像一样的宽度时。

另一种办法,也是最好的办法,就是将列的宽度指定为整个表格宽度的百分比。这样,表格在各种分辨率下的外观都很好。

WIDTH属性可以对列元素或单元格设置。然而,既然Navigator不识别列元素,所以最好还是将它设置在单元格上。只在表格的第一行上设置宽度是一个好主意,这些值同时也对其它行起作用。

显然,WIDTH属性设置的约束并不总是令人满意。例如,一个用像素点指定宽度的列可能比整个表格还宽。浏览器的宽度算法相当复杂,所以应该避免奇怪的结果,最好遵循下面的简单原则:

为需要的列指定以像素点为单位的宽度;

为其它列指定百分比宽度,这样它们可以有相应的百分比宽度,能很好地显示各自的内容;

至少保持一列的width为*(默认值),从而将显示其它列后剩余的空间留给它。

通常,这样处理后就能使在所有显示器上获得预期的结果。虽然这不像CSS那样具有强大的宽度控制能力,但这是非常实用的办法。

表格宽度

通常,表格的宽度应使它刚好能显示它的所有列。然而有时,特别是使用表格控制布局时,可能希望指定整个表格的宽度。可以通过指定TABLE元素中的WIDTH属性做到这一点,它和单元格或列上的WIDTH属性非常类似,只有一点不同:它只接受像素点宽度和百分比宽度。显然,对表格使用像素点宽度不好,使用百分比取值来指定它占据上级元素的比例是更好的选择。

设置表格

使用表格进行页面布局

人们见到表格时意识到的第一件事,就是它能在任何布局中将显示分割成许多方块。通过灵活地使用ROWSPAN和COLSPAN属性,单元格可以实现想要的任何布局。在CSS出现之前,它是控制页面布局的有力武器,否则就只能接受简单的流水账式的页面。

当文档不包含应该以表格方式显示的数据时,将是一件多么糟糕的事情!因为这样就把文档的语义丢到九霄云外去了。同样在Navigator里,复杂的表格和复杂的CSS相互之间水火不容!如果想创建成千上万的人都能使用的Web页面,而其中很多人在使用Navigator,我们就不得不考虑Netscape的一些特点。

使用表格设计布局时应该遵循一些简单的规则:

  1. 只使用TABLE、TR和TD元素,混入其它元素早晚会使Navigator崩溃。另外,其它元素的语义或多或少地与基于表格的布局不相容。
  2. 确保如果删除文档中所有和表格相关的标记,它的结构仍旧合法。这样做的原因有几个:第一,从头到尾察看文档时有一个良好的文档结构;第二,不支持表格的旧版本浏览器 (或者新版本,像lynx那样的基于文本而不支持表格的浏览器)会忽略表格标记,所以文档必须对它们有意义。做到这一点的最好方法就是先将文档设计成线性文档,然后再在 它上面添加表格元素以使它的布局更令人感兴趣。这个过程很像先设计一个HTML文档,然后再设计作用它之上的CSS 样式表。
  3. 避免CSS布局导致的任何开销。如果发现一些地方不对头,首先检查这里。CSS可视格式化模型属性不能和表格和平共处。

现在需要作的就是创建一个表格,将文档中的各个部分以希望的方式来布置,将各个部分放在不同的单元格内。通过将它们放置在不同的行,并设置它们的行扩展、列扩展和宽度,来安排这些单元格,嘿!一眨眼功夫,就可以得到一个大概的布局了!

虽然,这不是一个值得推荐的手段,但却被广泛地使用着。因为一个有说服力的理由就是:它是控制HTML文档布局的唯一可靠方法。我们能在很多页面中发现它,包括 WebReference.com 的主页。在屏幕的同一部分显示大量信息时,我们首先要考虑使用表格来控制页面布局。如果页面确实能得益于这样的布局,就使用这种方法。否者,就使用普通的文档形式。大多数情况下,这会使用户更清楚地知道他的位置,并确信地做正确的事。



查看完整版本: [-- 表格,让Web看起来更美(6):单元格与设置表格 --] [-- top --]



Copyright © 2005-2014 5y6s Inc. 苏ICP备05001866号 Powered by PHPWind 5.0.1
Time 0.026386 second(s),query:5 Gzip enabled