分享
 
 
 

表格(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>

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

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有