HTML5 表格标签的使用总结

表格

表格现在还是比较常用的一种标签, 但不是用来布局的，常用来处理, 显示表格式数据

创建表格

在HTML网页中 要想创建表格 就需要使用表格相关的标签 创建表格的基本语法如下

		......
	
	......

	

		
单元格内的文字

在上面的语法中包含三队HTML 标签 
分别为    
他们是创建表格的基本标签,缺一不可,下面我们来一一进行具体解释

1. table 用于定义一个表格
2. tr用于定义表格中的一行 必须嵌套在 table标签中 在table中包含几对 tr 就有几行表格
3. td /td: 用于定义表格中的单元格 必须嵌套在  标签中 , 一对中包含几对 就表示该行中有多少列(或多少个单元格)

示例

     

        

            
1.1
            
1.2
            
1.3
            
1.4
            
        
        

            
2.1
            
2.2
            
2.3
            
2.4
        
        

            
3.1
            
3.2
            
3.3
            
3.4
        
        
    

示例结果：（没有边框，需要用border标签来设置，见后面表格属性）

 中只能嵌套 
 标签 他就像一个容器 可以容纳所有的元素

表格属性

表头标签

表头一般位于表格的第一行或第一列 其中文本加粗居中 设置表头非常简单 只需要用表头标签替代相应的单元格标签即可

表格结构

在使用表格进行布局时,可以将表格划分为头部，主题和页脚(页脚因为有兼容性问题,我们不在赘述),具体 表示如下
: 用于定义表格的头部
必须位于标签中,一般包含网页的 Logo 和导航等头部信息
: 用于定义表格的主体
位于标签中 一般包含网页中除头部和底部之外的其他内容

示例

     表格举例

         

         

        

            
1.1
            
1.2
            
1.3
            
1.4
            
        
        

            
2.1
            
2.2
            
2.3
            
2.4
        
        

            
3.1
            
3.2
            
3.3
            
3.4
        
        
    

表格标题

表格的标题: caption

定义和用法: caption 元素定义表格标题

	
 我是表格标题 

（表格标题会自动居中，而之前的表格头部并不会）

合并单元格

跨行合并: rowspan 跨列合并 : colspan

合并单元格的思想:

​ 将多个内容合并的时候, 就会有多余的东西, 把它删除，例如 把3个 td 合并成一个 那就多余了2个需要删除

​ 公式 : 删除的个数 = 合并的个数 - 1

合并的顺序 先上 先左

示例：

        

            

              
Month
              
Savings
            
            

              
January
              
$100.00
              
$50
            
            

              
February
              
$10.00
            
          

表格不要纠结于外观, 那是CSS的作用