关于table的一些记录_html/css_WEB-ITnose

表格的大标题，该标记可以出现在

tbody的特点：

为了让大表格(table)在下载的时候可以分段的显示，就是说在浏览器解析HTML时，table是作为一个整体解释的，使用tbody可以优化显示。如果表格很长，用tbody分段，可以一部分一部分地显示，不用等整个表格都下载完成。下载一块显示一块，表格巨大时有比较好的效果。tbody包含行的内容下载完优先显示，不必等待表格结束。另外，还需要注意一个地方。表格行本来是从上向下显示的。但是，应用了thead/tbody/tfoot以后，就“从头到脚”显示，不管你的行代码顺序如何。也就是说如果thead写在了tbody的后面，html显示时，还是以先thead后tbody显示。

三个注意点：

1. thead和tfoot在一张表中都只能有一个，而tbody可以有多个
2. tfoot必须出现在tbody前面，这样浏览器在接收主体数据之前，就能渲染表尾，有利于加快表格的显示速度。这一点对大型表格尤其重要
3. thead、tbody和tfoot里面都必须使用tr标签

二、

在将caption的align属性设置为left的时候，IE6 7对这个属性有反映，其他浏览器都无动于衷。在标签style中添加text-align也是同样的情况

          
Table caption here
                                         
            
                
Head 1
                
Head 2
                
Head 3
            
          
                    
                
                    
Foot 1
                    
Foot 2
                    
Foot 3
                
          
                     
                
                    
A
                    
B
                    
C
                
                
                    
D
                    
E
                    
F
                
          
        

可选的属性

一、cellspacing

cellspacing在大部分浏览器中与style中的border-spacing效果相同，但在IE6 7中略有不同

二、css中的border-collapse

css中的border-collapse:collapse | separate 可以设置表格的边框是否被合并成一个边框。将设置为border-collapse:collapse后，各个浏览器显示各不相同

三、

　　scope属性定义将表头单元与数据单元相关联的方法；标识某个单元是否是列、行、列组或行组的表头；不会在普通浏览器中产生任何视觉变化；屏幕阅读器可以利用该属性。

　　使用 scope 属性，可以将数据单元格与表头单元格联系起来。通过属性值 row，表头行包括的所有表格都将和表头单元格联系起来。指定 col，会将当前列的所有单元格和表头单元格绑定起来。

  
    
Month
    
Savings
  
  
    
1
    
January
    
$100.00
  
  
    
2
    
February
    
$10.00
  

四、frame , rules

          
Table caption here
                                         
            
                
Head 1
                
Head 2
                
Head 3
            
          
                    
                
                    
Foot 1
                    
Foot 2
                    
Foot 3
                
          
                     
                
                    
A
                    
B
                    
C
                
                
                    
D
                    
E
                    
F
                
          
        

五、CSS中的table-layout

　　用来指定表格显示的样式

table { table-layout: fixed } 

* auto（缺省）* fixed* inherit

　　auto表示单元格的大小由内容决定。fixed表示单元格的大小是固定的，由第一个指定大小的单元格决定；如果所有单元格都没有指定大小，则由第一个单元格的默认大小决定；如果单元格中的内容超出单元格的大小，则用CSS中的overflow命令控制。微软公司声称使用这个命令，表格的显示速度可以加快100倍。为了加快表格显示，最好事先就在CSS（或者table标签的width和height属性）中指定表格的宽度和高度。

六、跨行rowspan 跨列colspan

熟练掌握表格的colspan、 rowspan属性，可以随心所欲的制作出复杂的表格。

          
Table caption here
                                         
            
                
Head 1
                
Head 2
                
Head 3
            
          
                    
                
                    
Foot 1
                    
Foot 2
                    
Foot 3
                
          
                     
                
                    
A
                    
B
                    
C
                
                
                    
D
                
          
        

 经过CSS添加后的table

发挥你的想象力，玩转table

附加中保存的是示例的html代码

table.rar

也可以进入页面http://download.csdn.net/download/loneleaf1/7500555下载

参考资料：

http://blog.csdn.net/lujunql/article/details/5529989 table标签中thead、tbody、tfoot的作用
http://www.w3school.com.cn/tags/tag_table.asp HTML