对table表格标签的深入理解

　　表格目前已经不用来进行页面布局，更多的是用来显示表格数据，其本身就拥有较多的标签，加上css设置表格样式，以及javascript动态创建表格时也比较复杂，所以更应该透彻的理解html表格标签的意义。

　　（一）表格基本结构标签

　　　　<table></table>:定义表格

　　　　　<th></th>:定义表格的标题栏

 　　　　<tr></tr>:定义表格的行

　　　　<td></td>:定义表格的列

　　使用这几个标签就可以创建出最基本的表格结构：

　　如下代码就可以创建出一个三行三列的简单表格

1  2     
     
 3             
 4                 
 5                 
 6                 
 7             
 8             
         9                 
10                 
11                 
12             
13    
                
       
                 
姓名
                    
年级
        
学号
       
       
        
周时
        
一
        
01
       
      
     
14 

　　（二）逻辑结构标签　

　　　　<caption>:定义表格标题

　　　　<thead>:定义表格页眉

　　　　<tbody>:定义表格主体

　　　　<tfoot>:定义表格页脚

　　　　<col>:用来给表格中的一列或者多列设置属性

　　　　<colgroup></colgroup>:用来表示表格的列组，更方便的一次性给表格设置样式

　　　使用表格的逻辑标签，使表格可读性更强，设置样式时也更加方便，示例代码如下：

1  2     
     
       3         
 4         
 5             
 6             
 7    　　　　　　/*
不添加span属性，默认一列，以在colgroup中的顺序为准*/ 8          9         
    10             
        11                 
12                 
13                 
14             
15         
16         
17             
        18                 
19                 
20                 
21             
22         
23         
24             
        25                 
26                 
27                 
28             
29         
30     
      
       表格标题
      
                                                                                                           
                      
        
姓名
        
年级
        
学号
       
      
      
                      
        
周时
        
一
        
01
       
      
      
                      
        
小石
        
三
        
03
       
      
     

　　

　　在给标签添加结构化标签后，表格可读性大大增强。关于<col>和clogroup标签需要注意以下两点：

　　1、<col>:用来为表格中的一列或者多列设置属性，span属性用来控制列数。<col>标签只能在<table>元素或者<colgroup>元素内部使用.

　　2、<clogroup>标签的唯一作用是用来存放col标签。

　　更多关于表格设计的样式，请访问