04-表格table标签

表格作用：

• 表格是较为常用的一种标签，但不是用来布局，常用来展示表格式数据。

• 它可以让数据显示的非常的规整，可读性非常好。

• 特别是展示后台数据的时候，表格运用是否熟练就显得很重要，一个清爽简约的表格能够把繁杂的数据表现得很有条理，虽然 div 布局也可以做到，但是总没有表格来得方便。

表格展示数据1

表格展示数据2

1、创建表格

基本语法：

    ...
  
  ...

  

    
单元格内的文字

在上面的语法中包含基本的三对HTML标签，分别为 table、tr、td，他们是创建表格的基本标签，缺一不可。

1. table 用于定义一个表格标签。
2. tr 标签 用于定义表格中的行，必须嵌套在 标签中。
3. td 用于定义表格中的单元格，必须嵌套在 标签中。
4. 字母 td 指表格数据（table data），即数据单元格的内容，td标签里可以存放任意标签。

table基本结构

总结：

• 表格的主要目的是用来显示特殊数据的
• 一个完整的表格有表格标签（table），行标签（tr），单元格标签（td）组成，没有列的标签
• 中只能嵌套 类的单元格
• 标签，他就像一个容器，可以容纳所有的元素

2、表格属性

表格常用属性

表格属性示意图

示例代码1：

    

        
姓名
        
性别
        
年龄
    
    

        
刘德华
        
男
        
55
    
    

        
郭富城
        
男
        
52
    
    

        
张学友
        
男
        
58
    
    

        
黎明
        
男
        
18
    
    

        
刘晓庆
        
女
        
63
    

示例1

3、表头单元格标签th

• 作用：
  一般表头单元格位于表格的第一行或第一列，并且th标签默认文本加粗且
  居中
• 语法：
  只需用表头标签 替代相应的单元格标签 即可。
  示例代码2：

    

        
姓名
        
性别
        
电话
    
    

        
小王
        
女
        
110
    
    

        
小明
        
男
        
120
    

示例2

4、表格标题caption

用法：

   
我是表格标题

注意：

1. caption 元素定义表格标题，通常这个标题会被居中且显示于表格之上。
2. caption 标签必须紧随 table 标签之后。
3. 这个标签只存在 表格里面才有意义。

示例代码3：

小说排行榜
    

        
排名
        
关键词
        
趋势
        
今日搜索
        
最近七日
        
相关连接
    
    

        
1
        
鬼吹灯
        

        
232
        
1111
        

            贴吧 
            图片 
            百科
        
    
    

        
2
        
盗墓笔记
        

        
444
        
2222
        

            贴吧 
            图片 
            百科
        
    
    

        
3
        
西游记
        

        
555
        
3333
        

            贴吧 
            图片 
            百科
        
    
    

        
4
        
东游记
        

        
324
        
4444
        

            贴吧 
            图片 
            百科
        
    
    

        
5
        
甄嬛传
        

        
4321
        
5555
        

            贴吧 
            图片 
            百科
        
    
    

        
6
        
水浒传
        

        
234
        
6666
        

            贴吧 
            图片 
            百科
        
    
    

        
7
        
三国演义
        

        
324
        
7777
        

            贴吧 
            图片 
            百科
        
    

示例3

5、 合并单元格

方式：

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

顺序：

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

三步曲：

• 先确定是跨行还是跨列合并
• 根据 先上 后下 先左 后右的原则找到目标单元格 然后写上 合并方式 还有 要合并的单元格数量 比如 ：
• 删除多余的单元格 单元格

示例代码4：

    

        
个人简介
    
    

        
姓名：小明
        
性别：男
        
年龄：18
        
这是照片
    
    

        
身高：180
        
民族：汉
        
婚姻：未婚
    
    

        
个人简介
        

    
    

        
个人作品
        

    

示例4

6、表格划分结构

对于比较复杂的表格，将表格分割成三个部分：题头、正文和脚注。而这三部分分别用: thead , tbody , tfoot 来标注， 这样更好的分清表格结构。
注意：

1. ：用于定义表格的头部。用来放标题之类的东西。 内部必须拥有 标签！
2. ：用于定义表格的主体。放数据本体 。
3. 放表格的脚注之类。
4. 以上标签都是放到table标签中。

    

        
这是标题
    
    

        

            
姓名
            
性别
            
年龄
        
    
    

        

            
小明
            
男
            
18
        
        

            
小明
            
男
            
18
        
        

            
小明
            
男
            
18
        
    
    

        

            
这是tfoot
        
    

7、总结表格

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