网页表格制作进阶

 

前面第一部分我们介绍的是表格最基本也最常用的属性,要用好表格,就必须熟悉和掌握这些最基本的属性。在对这些基本的属性有了一定的了解之后,我们再来看看表格的其他几个似乎并不常用的属性,以便对表格有一个整体的认识。事实上,即使不了解下面所讲的内容,多数情况下也不会影响你对表格的使用,所以我们只是简略的带过。

  1、拆分表格
  colspan表示该一储存格向右打通的栏数。 rowspan表示该一储存格向下打通的栏数。

看下面的表格:

第一行第一栏

第一行的第二、三栏

第二行及第三行 第一栏

第二行第二栏

第二行第三栏

 

第三行第二栏

第三行第三栏


表格代码:
table width="450" border="1" cellspacing="0" cellpadding="2" bordercolor="#009900"
tr
td>第一行第一栏</td
td colspan="2">第一行的第二、三栏</td
/tr
tr
td rowspan="2">第二行及第三行 第一栏</td
td>第二行第二栏</td
td>第二行第三栏</td
/tr
tr
td>第三行第二栏</td
td>第三行第三栏</td
/tr
/table

  你可能看的不大明白。如果借助于Dreamweaver来再现表格制作过程,相信你会很快明白其中的奥秘。先制作一个三行三列的表格(这可以说是上面表格的“原形”),见下图,然后将第一行的第二、三栏合并,第二行的第一栏、第三行第一栏合并,这样就得到了上例中的表格。你可以自己动手检验一下。

第一行第一栏

第一行第二栏

第一行第三栏

第二行第一栏

第二行第二栏

第二行第三栏

第三行第一栏

第三行第二栏

第三行第三栏


  熟练掌握表格的colspan rowspan属性,可以随心所欲的制作出复杂的表格。


  2、表格中的标题列

CAPTION 的作用是为表格标示一个标题列,如同在表格上方加一没有格线的打通列,通常用来存放表格标题,参数有 align valign
  align表示表格标题列相对于表格的对齐方式(水平),可选值为: left, center, right, top, middle, bottom,若 align="bottom" 的话标题列便会出现在表格的下方,不管你 的原代码是把 caption 放在 table 中的头部或尾部。
  valign表示表格标题列相对于表格的对齐方式(上下),可选值为: top, bottom。见下例:

网页陶吧访问统计

Month

% of IE visitor

% of NC visitor

August

91%

9%


表格代码:
table width="400" border="1" cellspacing="0" cellpadding="2"
captionfont color="#FF0000"><b>网页陶吧访问统计</b></font/caption
tr align="CENTER"
thMonth/th
th% of IE visitor/th
th% of NC visitor/th
/tr
tr align="CENTER"
tdAugust/td
td91%/td
td9%/td
/tr
/table


  3、行组(IE有效)

  每个表格可以有一个表头、一个表尾和一个或多个表体,分别以 THEADTFOOTTBODY元素表示。 通常,文档中它们的次序首先是THEAD,然后是TFOOT,然后是不同数目的TBODY
  <thead ... /thead - 表的题头
  <tbody ... /tbody - 表的正文
  <tfoot ... /tfoot - 表的脚注

见下例:

Food

Drink

Sweet

A

B

C

D

E

F

 

 

 


表格代码:
table border width="300"
thead
tr
tdFood/td
tdDrink/td
tdSweet/td></tr
/thead
tbody
tfoottr
tdA/td
tdB/td
tdC/td></tr/tfoot
tr
tdD/td
tdE/td
tdF/td><tr
/tbody
/table


  4、列组(IE有效)

colgroup align=# #=left, right, center

见下例:

Food

Drink

Sweet

A

B

C

D

E

F


表格代码:
table border width=160
colgroup align=left colgroup align=center colgroup align=right thead
tr
thFood/th
thDrink/th
thSweet/th
/thead tbody
tr
tdA/td
tdB/td
tdC/td
tr
tdD/td
tdE/td
tdF/td
/tbody
/table   

  5、列的属性控制

  <COL>定义一个列组中的列,以便对它们能够同时设置有关属性
  <col span=# #=从左数起,具有指定属性的列的列数
  <col align=# #=left, right, center

见下例:

Food

Drink

Sweet

A

B

C

D

E

F



表格代码:
table border width=160
colgroup col align=center span=2 colgroup align=right thead
tr
thFood/th
thDrink/th
thSweet/th
/thead tbody
tr
tdA/td
tdB/td
tdC/td
tr
tdD/td
tdE/td
tdF/td
/tbody
/table

  以上内容考虑到实用性,没有展开讨论,欲了解详细的内容可参考清华大学《HTML 语言教程》或其他相关书籍。