返回


文章标题:
                 如何制作HOMEPAGE(3)
  

7.5 表格排版-----Table

Table是一种用来描述表格信息的新结构,它是HTML3.0中的一个重要内容。其实验性草案刚
一发布就立刻被广大的Web浏览器厂商所采纳,并且在Web领域里掀起了一场深刻的
Homepage排版革命。

7.5.1 一个Table实例

Table往往是由一个表格名称再加上一行或多行的表格内容所构成块状结构。表格的每一行
内又由一个或多个表项单元组成,并且表项单元还可以按照行或列的方式结合在一起,成
为一个大的表项单元。
下面我们先来看一个Table实例:
<TABLE BORDER=3 WIDTH="90%">
  <CAPTION>A test table with merged cells</CAPTION>
  <TR><TH ROWSPAN=2><TH COLSPAN=2>Average
       <TH ROWSPAN=2>other<BR>category<TH>Misc
  <TR><TH>height<TH>weight
  <TR><TH ALIGN=LEFT>males<TD>1.9<TD>0.003
  <TR><TH ALIGN=LEFT ROWSPAN=2>females<TD>1.7<TD>0.002
</TABLE>


图7-16是这一Table实例的显示效果。

7.5.2 Table元素

下面我们就根据上面的实例来分析一下Table中的各个元素:
1。<TABLE> 表格内容 </TABLE>
一对<TABLE>标记是一个Table结构的最外层,它主要包括三个重要属性。一个是用来表示表格边框粗细程度的属性BORDER,属性值取整数,如果省略BORDER属性,则表示不加边框。另一个是用来表示表格宽度的属性WIDTH,其属性可取相对值(由一对 " "号括起来的百分数,表示相对于充满窗口的百分比),也可取绝对值(用整数表示的屏幕像素点的个数,如WIDTH=300),缺省值是"100%"。还有一个属性是CELLPADDING,用来表示每个表项单元的内容与表格边框之间所空开的距离,用屏幕像素点为单位,缺省值是0。

图7-16 一个Table实例的显示效果
2。<CAPTION> 表格名称 </CAPTION>
在一对<CAPTION>标记中是这张表格的名称信息,它通常被Web浏览器显示在表格上方的中央部位。
3。<TR> 表格当前行的内容
单标记<TR>表示一个新的表格行(Table Row)的开始。
4。<TH> 表项标题内容

    <TD> 表项数据内容
单标记<TH>和<TD>都表示在表格的当前行里产生一个新的表项单元。其中<TH>表示一个
表项标题(Table Header)单元,而<TD>表示一个表项数据(Table Data)单元。Web浏览器
一般把<TH>中的文本用粗体表示。每个表项单元(<TH>或<TD>)都可带有表示横向对齐
方式的属性ALIGN,属性的取值范围主要有LEFT,CENTER,RIGHT等,其中<TH>的缺省值
是ALIGN=CENTER,<TD>的缺省值是ALIGN=LEFT。另外还有表示纵向对齐方式的属性
VALIGN,属性的取值范围主要有TOP,MIDDLE,BOTTOM等,其中<TH>和<TD>的缺
省值都是VALIGN=MIDDLE。
表项单元的一个重要特征就是可以进行横向及纵向地扩展,从而结合成一个大的表项单元。
这是通过属性COLSPAN(按列横向结合)及ROWSPAN(按行纵向结合)来表示的,属性
值取整数,表示结合几个基本表项单元。如上例中的<TH COLSPAN=2>Average,就表示
Average这个表项标题单元要按列横向地将2个基本表项单元结合在一起。
如果要在表格中显示一个空项,也必须写上一个表项单元的标记,来表示占据一定的空间
,如上例中的<TH ROWSPAN=2>后面无任何表项标题的内容,其显示效果就是图7-16
中左上角的空白块。
另一个值得注意的问题是每一行中的表项单元总是从左到右地依次排列,并跳过已经被上一
行ROWSPAN结合掉的基本表项单元。如上例中的<TH>height本应在第2行,第1列的位置,
但由于此单元已经被上一行结合掉,因而只能顺延到第2行,第2列的位置。

7.5.3 利用Table进行排版

你或许已经发现,Table的应用并非仅限于显示一些表格数据,而更要利用它独特的格式
控制能力,来对Homepage中的各种图文信息进行各式各样地排版。因为Table中的每个
表项单元可以属于任何结构,如图像、段落、列表、Form(见下一节),甚至是嵌套的
Table。如图7-17是Micosoft公司Homepage的排版样式,图7-18是将它源文件里的所有
<TABLE>标记都加上BORDER属性后所现出的Table原型。因此,如果你想使自己
Homepage的版本设计地更具特色,别忘了使用Table!


图7-17 Micosoft公司Homepage的排版样式


图7-18 原形毕露,排版全靠Table