html表格的作用是什么

表格的结构标签

使用场景：因为表格可能很长，为了更好的表示表格的予以语义，可以将表格分成表格头部和表格的主体两大部分。

在表格标签中，分别使用：标签 表格的头部区域、标签的主体区域。这样可以更好的分清表格结构。

• ：用于定义表格的头部。内部必须拥有标签。一般是位于第一行。

• ：用于定义表格的主体，主要用于放数据本体。

• 以上标签都是放在

  标签中。

例子：

     
  
   		  
姓名
  
性别
 
 年龄 
 
     

     

		  
刘德华
  
男
 
 56 
       	  
张学友
  
男
 
 58 
          
郭富城
  
男
 
 51 
          
黎明
  
男
 
 57 
          
    



表格属性，这部分属性我们实际开发中不常用，后面通过CSS来设置。

目的有两个：

• 记住CSS这些单词，后面CSS会使用。

  

  Notion AI

  Notion是一款集成了笔记、知识库、数据表格、看板、日历等多种能力于一体的应用程序，它既可供个人使用，也可以与他人进行跨平台协作。

  下载

• 直观感受表格的外观形态。

属性名	属性值	描述
align	left 、center、right	规定表格相对周围元素的对齐方式。
border	1或""	规定表格单元是否拥有边框，默认为""，表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认 1 像素
cellspacing	像素值	规定单元表格之间的空白，默认 2 像素。
width	像素值或百分比	规定表格的宽度

案例：小说排行榜

排名	关键词	封面
1	靠近你会掉刺	@@##@@
2	魔尊要抱抱	@@##@@
3	触碰的旋律	@@##@@
4	穿越成反派要如何活命	@@##@@

案例分析：

• 第一行里面是 th 表头单元格

• 第二行开始里面是 td 普通单元格

• 单元格里面可以放任何元素，文字链接图片等后可以

后书写表格属性属性

• 用到宽度高度边框 cellpadding 和 cellspacing

• 浏览器中对齐 align

具体代码如下：

 

        

            

                
排名
                
关键词
                
封面
            
        

        

            

                
1
                
靠近你会掉刺
                
@@##@@
            
            

                
2
                
魔尊要抱抱
                
@@##@@
            
            

                
3
                
触碰的旋律
                
@@##@@
            
            

                
4
                
穿越成反派要如何活命
                
@@##@@
            
        
    

合并单元格

特殊情况下，可以把多格单元格合并为一个单元格。

合并单元格方式

跨行合并： rowspan=“合并单元格的个数”。
跨列合并： colspan=“合并单元格的个数”。

目标单元格：（写合并代码）

跨行：最上侧单元格为目标单元格，写合并代码
跨列：最左侧单元格为目标单元格，写合并代码

合并单元格三部曲：

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

• 2.找到目标单元格，写合并方式 = 合并的单元格数量 。
  比如：。

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

例子：



（学习视频分享：web前端）