|
|
|
 |
|
设置美观的表格 |
| |
|
|
网页制作速成教程 → 设置美观的表格 |
| 网页制作速成教程 |
| |
|
5.0 设置美观的表格
HTML表格非常灵活, Web页经过它的格式化以后,看起来就好像用桌面排版程序处理过一样。根据经验,表格一般列于文档的附录中,其中总是充满着大量统计数据。
在World Wide Web里面,表格有了一种新的、更有趣的外观。所以会这样,是由于HTML允许在表格中包含从图片到链接,甚至从影像到声音文件的各种信息。
设置了信息表格以后,可以为Web页增添许多令人感兴趣的内容,但同时也增添了许多约束。总而言之,经过精心设计,使用表格后的整体效果会给人留下难忘的印象,并且非常实用。
HTML表格具有和纸面上表格几乎相同的优点,这种表格经常用于处理销售数据、目录表等等。由于web有的限制一些标准的表格在HTML里面无法正确地表达出来。
但从另一方面来说,由于Web具有的多媒体功能,纸张表格不适宜表述的一些信息在Web表格中却可以得到很好的发挥。
什么表格不宜在Web中使用呢?就是那些特别大或者包含了大量文字的表格。这是由于Internet用户被限制在显示屏狭小的区域里面,太大的表格无法一次性显示出来。当然,
浏览器允许用户在水平和垂直方向进行滚动显示,但是这样一来就会产生不耐烦的情绪,有违于简洁明了的目标。
在HTML里面,表格的编制用<TABLE>和</TABLE>标签标识的。用最简单的话
来说,表格是用它的独立表示定义的。我们需要决定表格的行数和列数,然后逐一地定义表格的单元格。单元格按照从上到下和从左到右的顺序定义。
这里说明,当提及表格时,行、列和单元格都是相关的标准术语。假如读者有过编电子表格的经验,那么早就熟悉了这些术语。行在屏幕中的走向是从左到右;列在屏幕中的走向是从上到下。每个行与列交汇的地方都代表一个单元格。所以带有10行和3列的表格总共包含了30个单元格。
在开始设计自己的单元格以前,需要先对整个表格的规格进行一番定义。举例来说,可以指定它是否带有一个边框,以及这个边框的宽度是多少。为了完成这项工作,可以在起始的<TABLE>标签里面包含一个BORDER=#。假如在标签中省略了单词BORDER,那么就不会显示边框。假如符号中有这个单词,但是没有定义某个数值,边框宽度就采用默认的“一个单位”宽度。
对于整个表格,需做的另外一种定义是表格在屏幕中占据多大的宽度。假设没有使用WIDTH或者COLSPAN属性,表格宽度就采用默认设定。宽度的默认设定是根据表格中每一栏的宽度决定的。而每一栏的宽度则默认设定为刚好能容得下最宽的数据元素或者图片。这样也许会使整个表格的外观变得非常难看,但是如果指定自己的表格占据页边间距90%的空间,那么就可以得到美观的大片空白区。这项设置是通过在起始<TABLE>标签中增添WIDTH属性完成的,如下所示:
<TABLE BORDER WIDTH=90%>
如果你想对表格的外观进行更进一步的控制,可以在表格符号里面设置CELLSPACING和CELLPADDING属性。其中,
CELLSPACING属性指定的是单元格之
间的间距有多大,默认设置是2。Cel1padding属性则指定单元格框线与单元格内空间的间距有多大。默认设置是1,一般不要设置成零,因为那样会使文字进入单元格和表格边框。下面是这两种属性的一个应用例子:
<TABLE BORDER WIDTH=90%
CELLSPACING=4 CELLPADDING=5>
|
|
| | |
|
| |
|
 |
|
| |
| |