表格标签table

表格的结构

        表格是由行和列组成，好比一个excel文件

表格标签

• 标签：表示一个表格

  • 标签：表示表格中的一行

    • 标签：表示表格中的列
    • 标签：表示表格中的表头

示例代码:

    
        姓名
        年龄
    
    
        张三
        18 
    

运行效果：

总结：

• 表格的主要目的是用来显示特殊数据的

• 一个完整的表格有表格标签（table），行标签（tr），单元格标签（td）组成，没有列的标签

• 中只能嵌套 类的单元格

• 标签，他就像一个容器，可以容纳所有的元素

表格属性

 示例代码：

    
          姓名   性别 年龄  
          刘德华 男 55  
          郭富城 男 52  
          张学友 男 58  
          黎明   男 18  
          刘晓庆 女 63  
     

运行效果：

表头单元格标签th

• 作用：

  • 一般表头单元格位于表格的第一行或第一列，并且文本加粗居中

• 语法：

  • 只需用表头标签替代相应的单元格标签即可。

示例代码：

    
		  
			姓名 
			性别
			电话
		
		
			小王
			女
			110
		
		
			小明
			男
			120
			
	

运行效果：

表格标题caption

定义和用法

   我是表格标题

注意：

1. caption 元素定义表格标题，通常这个标题会被居中且显示于表格之上。

2. caption 标签必须紧随 table 标签之后。

3. 这个标签只存在表格里面才有意义。你是风儿我是沙

示例代码：

    
        个人信息统计表
		  
			姓名 
			性别
			电话
		
		
			小王
			女
			110
		
		
			小明
			男
			120
			
	

运行效果：

合并单元格

合并单元格2种方式

• 跨行合并：rowspan="合并单元格的个数"

• 跨列合并：colspan="合并单元格的个数"

合并单元格顺序

        合并的顺序我们按照 先上 后下 先左 后右 的顺序

合并单元格三步曲

1. 先确定是跨行还是跨列合并

2. 根据 先上 后下 先左 后右的原则找到目标单元格 然后写上 合并方式 还有 要合并的单元格数量 比如 ：

3. 删除多余的单元格 单元格

示例代码1:

    
        个人简历
		  
			姓名：张三 
			性别：男
            年龄：26
            照片
		
		
			身高：178
			民族：汉
            婚姻：未婚
            照片
		
		
			个人简介
			个人简介
            个人简介
            个人简介
        	
        
			个人作品
			个人作品
            个人作品
            个人作品
		
	

运行结果：

示例代码2：

    
        个人简历
		  
			姓名：张三 
			性别：男
            年龄：26
            照片
		
		
			身高：178
			民族：汉
            婚姻：未婚
		
		
			个人简介
			个人简介
        	
        
			个人作品
			个人作品
		
	

运行结果：

总结表格 标签名定义说明表格标签就是一个四方的盒子表格行标签行标签要再table标签内部才有意义单元格标签单元格标签是个容器级元素，可以放任何东西表头单元格标签它还是一个单元格，但是里面的文字会居中且加粗表格标题标签表格的标题，跟着表格一起走，和表格居中对齐clospan 和 rowspan合并属性用来合并单元格的

1. 表格提供了HTML 中定义表格式数据的方法。

2. 表格中由行中的单元格组成。

3. 表格中没有列元素，列的个数取决于行的单元格个数。

4. 表格不要纠结于外观，那是CSS 的作用。

5. 表格的学习要求： 能手写表格结构，并且能简单合并单元格。

表格边线合并

border-collapse 设置表格的边线合并，如：border-collapse:collapse;