表格的分组显示

发贴心情 

表格的分组显示(Structured Table) (IExplore Only)

1)按行分组
<thead> ... </thead> - 表的题头(Header)
<tbody> ... </tbody> - 表的正文(Body)
<tfoot> ... </tfoot> - 表的脚注(Footer)

例:
<table border>
<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>

2)按列分组
<colgroup align=#> #=left, right, center

例:
<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>

3)列的属性控制
<col span=#> #=从左数起,具有指定属性的列的列数
<col align=#> #=left, right, center

例:
<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>

浏览器下载表格的原理是要将整个表格内容下载完毕再一次显示出来,这样当表格内容很多时,会显得下在很慢。它的作用就是当一个表格里内容太多的时候将表格分块下载到浏览器,这样不至于让浏览者觉得速度很慢。

点击查看用户来源及管理,发贴IP:*.*.*.* 2005-1-12 17:29:00
  编辑这个贴子       
< language=JavaScript>var actioninfo3='单帖屏蔽';document.write (dvbbs_show_topic('300422','3','qnzu','','','qnzu@163.com','||||||||||||||||||','','images/images/userface/image1.gif','','','','','<tbody>  <tr>  标签要手动输入进去,挺麻烦的,要是能更加“可视化”就好了。
对了,那么div标签又在何时置于何处?div标签同<tbody>  <tr>有什么必然关系吗?
[此贴子已经被作者于2005-1-13 8:58:07编辑过]
','2005-1-13 8:56:00','face1.gif','*.*.*.*','29876',1,0,4129,2,'新进会员','32','32','74','2003-7-22','176','265','117','','1',0,'0','level0.gif',4,'2005-2-28 21:08:00','0',3,'tablebody2','0','0'));
  qnzu 帅哥哟,离线,有人找我吗?  
  
  
  等级:新进会员
  文章:74
  积分:265
  注册:2003-7-22
给qnzu发送一个短消息  把qnzu加入好友  查看qnzu的个人资料  搜索qnzu在[WEB].com 网页设计的所有贴子  点击这里发送电邮给qnzu  引用回复这个贴子  回复这个贴子 4
 
发贴心情 
<tbody>  <tr>  标签要手动输入进去,挺麻烦的,要是能更加“可视化”就好了。
对了,那么div标签又在何时置于何处?div标签同<tbody>  <tr>有什么必然关系吗?
[此贴子已经被作者于2005-1-13 8:58:07编辑过]
点击查看用户来源及管理,发贴IP:*.*.*.* 2005-1-13 8:56:00
  编辑这个贴子       
< language=JavaScript>var actioninfo3='单帖屏蔽';document.write (dvbbs_show_topic('300608','3','tonglin404','','','tonglin404@163.com','||||||||||||||||||','','UploadFace/31230_20041229174239650.jpg','','TT帮 帮主','','','他可以实现在mozilla和Netcaptor下的表格内部的滚动条。但IE不支持。','2005-1-13 11:38:00','face1.gif','*.*.*.*','29876',1,0,31230,2,'稳定会员','89','100','287','2004-7-26','0','682','0','','1',0,'0','level3.gif',4,'2005-2-28 16:09:00','0',4,'tablebody1','0','0'));
  tonglin404 帅哥哟,离线,有人找我吗?  
  
  
  头衔:TT帮 帮主
  等级:稳定会员
  文章:287
  积分:682
  注册:2004-7-26
给tonglin404发送一个短消息  把tonglin404加入好友  查看tonglin404的个人资料  搜索tonglin404在[WEB].com 网页设计的所有贴子  点击这里发送电邮给tonglin404  引用回复这个贴子  回复这个贴子 5
 
发贴心情 
他可以实现在mozilla和Netcaptor下的表格内部的滚动条。但IE不支持。
点击查看用户来源及管理,发贴IP:*.*.*.* 2005-1-13 11:38:00
  编辑这个贴子       
< language=JavaScript>var actioninfo3='单帖屏蔽';document.write (dvbbs_show_topic('303346','3','daijianchun','','','jianchun_dai@tom.com','|||249444347||||||jianchun_dai@hotmail.com|||||||||','','uploadFace/6679_2004331924057665.gif','','闯名堂主','目光和前程一样远,胸怀和人生路一样宽,肚量和事业一样大!
http://www.rushfame.go.nease.net
','','table-layout版本:CSS2  兼容性:IE5+ 继承性:无
语法:
table-layout : auto | fixed
取值:
auto :默认值。默认的自动算法。布局将基于各单元格的内容。表格在每一单元格内所有内容读取计算之后才会显示出来
fixed :固定布局的算法。在这种算法中,表格和列的宽度取决于 col 对象的宽度总和,假如没有指定,则会取决于第一行每个单元格的宽度。假如表格没有指定宽度( width )属性,则表格被呈递的默认宽度为 100%
说明:
设置或检索表格的布局算法。
你可以通过此属性改善表格呈递性能。此属性导致IE以一次一行的方式呈递表格内容从而提供给信息用户更快的速度。此属性依据此下顺序使用其中一种方式布置表格栏宽度:
  1. 使用 col colGroup 对象的宽度( width )属性信息。
  2. 使用表格第一行内的单元格的宽度( width )信息。
  3. 依据表格列数等分表格宽度。而不考虑表格内容的实际宽度。
假如单元格的内容超过了列宽度谌萁岜换恍小<偃缥薹ɑ恍校蚰谌莼岜徊们小<偃绱耸粜员簧柚梦?B> fixed ,则 overflow 能够被用于控制处理溢出单元格( td )宽度的内容。假如表格行高度被指定了,那么换行的内容如果超出了指定表格行高度也会在纵向上被裁切。
设置此属性值为 fixed ,有助于提高表格性能。对于长表格效果尤其显著。
设置表格行高可以进一步提高呈递速度,浏览器不需要检测行内每一个单元格内容去确定行高就可以开始解析以及呈递。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 tableLayout
示例:
table { table-layout: fixed; }
','2005-1-18 16:31:00','face1.gif','*.*.*.*','29876',1,0,6679,2,'活跃分子','32','32','555','2003-9-12','778','1462','583','','1',0,'0','level4.gif',4,'2005-3-1 9:14:00','0',5,'tablebody2','1','0'));
  daijianchun 帅哥哟,在线,有人找我吗?  
  
  
  头衔:闯名堂主
  等级:活跃分子
  文章:555
  积分:1462
  注册:2003-9-12
给daijianchun发送一个短消息  把daijianchun加入好友  查看daijianchun的个人资料  搜索daijianchun在[WEB].com 网页设计的所有贴子  点击这里发送电邮给daijianchun   引用回复这个贴子  回复这个贴子 6
 
发贴心情 
table-layout版本:CSS2  兼容性:IE5+ 继承性:无
语法:
table-layout : auto | fixed
取值:
auto : 默认值。默认的自动算法。布局将基于各单元格的内容。表格在每一单元格内所有内容读取计算之后才会显示出来
fixed : 固定布局的算法。在这种算法中,表格和列的宽度取决于 col 对象的宽度总和,假如没有指定,则会取决于第一行每个单元格的宽度。假如表格没有指定宽度( width )属性,则表格被呈递的默认宽度为 100%
说明:
设置或检索表格的布局算法。
你可以通过此属性改善表格呈递性能。此属性导致IE以一次一行的方式呈递表格内容从而提供给信息用户更快的速度。此属性依据此下顺序使用其中一种方式布置表格栏宽度:
  1. 使用 col colGroup 对象的宽度( width )属性信息。
  2. 使用表格第一行内的单元格的宽度( width )信息。
  3. 依据表格列数等分表格宽度。而不考虑表格内容的实际宽度。
假如单元格的内容超过了列宽度谌萁岜换恍小<偃缥薹ɑ恍校蚰谌莼岜徊们小<偃绱耸粜员簧柚梦?B> fixed ,则 overflow 能够被用于控制处理溢出单元格( td )宽度的内容。假如表格行高度被指定了,那么换行的内容如果超出了指定表格行高度也会在纵向上被裁切。
设置此属性值为 fixed ,有助于提高表格性能。对于长表格效果尤其显著。
设置表格行高可以进一步提高呈递速度,浏览器不需要检测行内每一个单元格内容去确定行高就可以开始解析以及呈递。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 tableLayout
示例:
table { table-layout: fixed; }
posted @ 2005-03-01 10:07  swordzj  阅读(590)  评论(0编辑  收藏  举报