html —— table 标签 与 display:table 样式

目录：

一、table 相关标签介绍及使用

二、div 布局设置display：table

一、table 相关标签介绍及使用

相关标签按包含关系从大到小排序：

table ——> col | colgroup | thead | tbody | tfoot；

thead | tbody | tfoot ——> tr；

tr ——> th | td；

说明：

table：重要属性有border（单元格边框）、cellspacing（pixel/%，单元格之间的空白大小）；

col：统一设置某一列的单元格样式，各种浏览器都支持的属性有span、width，可选；

colgroup：统一设置一列或多列的单元格样式，相当于多个col元素，重要属性为span，可选；

thead | tbody | tfoot：可选；

tr ：一行，有各种设置单元格内容样式的属性，必须；

th | td ：一列，重要属性有colspan、rowspan 等，必须。

示例：

  
  

  

    

      
      
      

        

          
列标题1
          
列标题2
          
列标题3
        
      
      

        

          
数据11
          
数据12
          
数据13
        
        

          
数据21
          
横跨2列
        
        

          
数据31
          
纵跨2行
          
数据33
        
        

          
数据41
          
数据43
        
      
      

        

          
备注：此为tfoot 内容，横跨3列.
        
      
    

  

效果：

二、div 布局设置display：table|inline-table

布局时，可以直接使用table 一套标签布局，也可使用div 通过样式模仿table 布局。

首先，看看display 样式属性常用值：

none、inline、block、inline-block、inherit（不怎么用）

其次，display：table 等用来布局也是真滴强，先介绍下与此相关的display 属性值，都是与table 等标签对应的。

display 相应值：

table ：作为表格显示，类似table 标签；

table-column: 类似col 标签；

table-column-gorup：类似colgroup 标签；

table-header-group：类似thead 标签；

table-row-group：类似tbody 标签；

table-footer-group：类似tfoot 标签；

table-row：类似tr 标签；

table-cell：类似th 、td 标签。

重点：

div 设置display：table |inline-table 时，display:table-cell 可能会因为内容太多而使布局错乱，设置div table-layout 属性为fixed即可。

table-layout:auto (默认) | fixed | inherit。

示例：

  
  
  

  

    

      
      
      

        

          
列标题1
          
列标题2
          
列标题3
        
      
      

        

          
数据11
          
数据12
          
数据13
        
        

          
数据21
          
横跨2列
        
        

          
数据31
          
纵跨2行
          
数据33
        
        

          
数据41
          
数据43
        
      
      

        

          
备注：此为tfoot 内容，横跨3列.
        
      
    
    


    

      

        
数据11
        
数据12
        
数据13
      
  
      

        
数据21
        
数据22
        
数据23
      
    

  

效果：