在讲网页表格的结构化标记之前，还是先看几幅图片。

 

 

 

 Html表格的结构化

       所谓的结构化，正如上述第一副图所看到的，就是把我们的表格划分为三种：表头、表体、表尾。从而当我们在改动表体部分的时候，不会影响到其他两部分，从而解除了耦合，方便我们的应用。

 

结构化格式

     
       …
 --------表头区
       …
---------表体区
       …
------------表尾区

 

 总结：通过把表格划分为三部分，方便了我们对表格的编辑操作。

 

Html表格的标题

  每一个表格都有自己的标题，正如上述第二幅图片所看到的，那么又怎样做到让标题随着内容来移动呢？

 

     表格的标题

  

     
      
       …
      
     

 

<caption>下的属性值有：

属性名称	属性值	说明
align	Top	标题在表格上方
	Bottom	标题在表格下方

 

小结：通过设置表格的标题，可以随时让标题跟着表格动。

 

Html直列化格式

  什么是表格的直列化格式呢？我们寻常在Excel中所见到的给整列加背景颜色，说的就是这么一回事。

<colgroup>…<colgroup>

 

属性名称	属性值	说明
Align	Left	靠左
	Center	考中
	Right	靠右
Valign	Right	靠右
	Top	考上
	Middle	靠中
	Bottom	靠下
Span	数字	直列数

 

 小结：通过设置表格的直列化格式，可以对我们须要的内容进行加深颜色。这里仅仅是针对的列内容。

 

源码例如以下：

表格嵌套的使用一
     
学生成绩表
         
          
            
            
姓名
            
语文
            
数学
            
外语
           
          
          
           
            
张三
            
95
            
95
            
95
           
           
            
张三
            
95
            
95
            
95
           
           
            
张三
            
95
            
95
            
95
           
          
          
           
            
成绩汇总
           
          
         
   
表格嵌套的使用二
     
      
       学生成绩
      
      
       
        
姓名
        
语文
        
数学
        
外语
       
      
      
       
        
张三
        
95
        
95
        
95
       
       
        
张三
        
95
        
95
        
95
       
       
        
张三
        
95
        
95
        
95
       
      
      
       
        
成绩汇总
       
      
     
         
表格嵌套的使用三
     
      
       学生成绩
      
                                            
       
        
姓名
        
语文
        
数学
        
外语
       
      
      
       
        
张三
        
95
        
95
        
95
       
       
        
张三
        
95
        
95
        
95
       
       
        
张三
        
95
        
95
        
95