网页表格制作进阶

• 
  　　二、网页表格制作进阶
  
  　　前面第一部分我们介绍的是表格最基本也最常用的属性，要用好表格，就必须熟悉和掌握这些最基本的属性。在对这些基本的属性有了一定的了解之后，我们再来看看表格的其他几个似乎并不常用的属性，以便对表格有一个整体的认识。事实上，即使不了解下面所讲的内容，多数情况下也不会影响你对表格的使用，所以我们只是简略的带过。
  
  　　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、表格中的标题列
  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"＞
  ＜caption＞＜font color="#FF0000"＞＜b＞网页陶吧访问统计＜/b＞＜/font＞＜/caption＞
  ＜tr align="CENTER"＞
  ＜th＞Month＜/th＞
  ＜th＞% of IE visitor＜/th＞
  ＜th＞% of NC visitor＜/th＞
  ＜/tr＞
  ＜tr align="CENTER"＞
  ＜td＞August＜/td＞
  ＜td＞91%＜/td＞
  ＜td＞9%＜/td＞
  ＜/tr＞
  ＜/table＞
  
  
  　　3、行组(IE有效)
  
  　　每个表格可以有一个表头、一个表尾和一个或多个表体，分别以 THEAD、TFOOT和TBODY元素表示。 通常，文档中它们的次序首先是THEAD，然后是TFOOT，然后是不同数目的TBODY。
  　　＜thead＞ ... ＜/thead＞ - 表的题头
  　　＜tbody＞ ... ＜/tbody＞ - 表的正文
  　　＜tfoot＞ ... ＜/tfoot＞ - 表的脚注
  
  见下例：
  

  Food	Drink	Sweet
  A	B	C
  D	E	F

  
  表格代码：
  ＜table border width="300"＞
  ＜thead＞
  ＜tr＞
  ＜td＞Food＜/td＞
  ＜td＞Drink＜/td＞
  ＜td＞Sweet＜/td＞＜/tr＞
  ＜/thead＞
  ＜tbody＞
  ＜tfoot＞＜tr＞
  ＜td＞A＜/td＞
  ＜td＞B＜/td＞
  ＜td＞C＜/td＞＜/tr＞＜/tfoot＞
  ＜tr＞
  ＜td＞D＜/td＞
  ＜td＞E＜/td＞
  ＜td＞F＜/td＞＜tr＞
  ＜/tbody＞
  ＜/table＞
  
  
  　　4、列组(IE有效)
  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＞
  ＜th＞Food＜/th＞
  ＜th＞Drink＜/th＞
  ＜th＞Sweet＜/th＞
  ＜/thead＞ ＜tbody＞
  ＜tr＞
  ＜td＞A＜/td＞
  ＜td＞B＜/td＞
  ＜td＞C＜/td＞
  ＜tr＞
  ＜td＞D＜/td＞
  ＜td＞E＜/td＞
  ＜td＞F＜/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＞
  ＜th＞Food＜/th＞
  ＜th＞Drink＜/th＞
  ＜th＞Sweet＜/th＞
  ＜/thead＞ ＜tbody＞
  ＜tr＞
  ＜td＞A＜/td＞
  ＜td＞B＜/td＞
  ＜td＞C＜/td＞
  ＜tr＞
  ＜td＞D＜/td＞
  ＜td＞E＜/td＞
  ＜td＞F＜/td＞
  ＜/tbody＞
  ＜/table＞
  
  　　以上内容考虑到实用性，没有展开讨论，欲了解详细的内容可参考清华大学《HTML 语言教程》或其他相关书籍。

  （出处：急速软件下载学院）

• 复制本页网址和标题，发送给你QQ/Msn的好友一起分享
  
  
• 网页表格制作进阶 相关文章：
• ·网页表格制作进阶(一)
• ·网页表格制作进阶(三)
• ·网页表格制作进阶(二)
• ·网页表格制作进阶
• 网页表格制作进阶 相关软件

上一篇:无线标记语言(WML)基础之WML编程方法

下一篇:XML Schema帮你建模（3）

• 特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
• 者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
• 载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

精品推荐

热点TOP10

特别推荐