html5: table表格与页面布局整理

传统表格布局之table标签排版总结：

 

默认样式：

 

1. 基本表格（双线表格）

table标签内添加border属性：border="1"，value值不带单位

aa	1	1
bb	2	2

代码如下：

border="1" width="100%">
  

    

      
aa
1
1
    
    

      
bb
2
2
    
  

 

2. 无边框表格

aa	1	1
bb	2	2

代码如下：

    "100%">
      

        

          
aa
1
1
        
        

          
bb
2
2
        
      
    

 

3. 单线表格

aa	1	1
bb	2	2

代码如下：

    border="1" width="100%" style="border-collapse: collapse;">
      

      

        

          
aa
1
1
        
        

          
bb
2
2
        
      
    

 

 

4. 合并多列表格

rowspan: 行合并数目	aa	1
	bb	2
cc	3	3

aa	colspan: 列合并数目(特定长度的单元格，不会删除后面的单元格）		1
bb	2	2	2

代码如下：

    "1" width="100%">
      

        

          
rowspan="2" width="100px">rowspan:
行合并数目
aa
1
        
        

          
bb
2
        
        

          
cc
3
3
        
      
    

    "1" width="100%">
      

        

          
aa
colspan="2">colspan: 列合并数目(特定长度的单元格，不会删除后面的单元格）
1
        
        

          
bb
"200px">2
"200px">2
2
        
      
    

 

5. 涵盖所有table标签表格

表格标题：caption标签

注脚:tfoot	-	-
表体1：tbody	注：tbody可以有多个	1
2	3	4
表体2：tbody	注：tbody如果不写，浏览器里也会自动生成	1
2	3	4

代码如下：

    "1" width="100%">





表格标题：caption标签


        
表头thead
th1
th2
      

        

          
"width: 33%">表体1：tbody
"width: 33%">注：tbody可以有多个
1
        
        

          
2
3
4
        
      

        

          
表体2：tbody
注：tbody如果不写，浏览器里也会自动生成
1
        
        

          
2
3
4
        
      

        

          
注脚:tfoot
-
-
        
      
    

 

6. 表格实例

公司名称	xxx有限公司
证件类型	身份证
身份证	10011***123
信息	catA	br： br：
	catB
	catC
	catD1		catD2
	catD3		catD4

代码如下：

border="1" width="100%">
      

      

        

          
公司名称
"4">xxx有限公司
        
        

          
证件类型
"4">身份证
        
        

          
身份证
"4">10011***123
        
        

          
rowspan="5">信息
class="label">catA
"3">br：
br：

        
        

          
catB
colspan="3">
        
        

          
catC
colspan="3">
        
        

          
catD1
class="label">catD2

        
        

          
catD3
class="label">catD4

        
      
    

 

 

 

转载于:https://www.cnblogs.com/ziChin/p/10165946.html