表格(table)制作网页详细介绍

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

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

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>

以上内容考虑到实用性,没有展开讨论。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航