网页表格制作进阶
前面第一部分我们介绍的是表格最基本也最常用的属性,要用好表格,就必须熟悉和掌握这些最基本的属性。在对这些基本的属性有了一定的了解之后,我们再来看看表格的其他几个似乎并不常用的属性,以便对表格有一个整体的认识。事实上,即使不了解下面所讲的内容,多数情况下也不会影响你对表格的使用,所以我们只是简略的带过。
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">
<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有效)
<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 语言教程》或其他相关书籍。