当前位置：首页 > news >正文

【HTML】HTML 表格总结 ★★★ ( 表格标签 | 行标签 | 单元格标签 | 表格标签属性 | 表头单元格标签 | 表格标题标签 | 合并单元格 )

news 2025/11/2 0:26:21

文章目录

一、表格标签组成 ( 表格标签 | 行标签 | 单元格标签 )
二、table 表格属性 ( border 属性 | align 属性 | width 属性 | height 属性 )
三、表头单元格标签
四、表格标题标签
五、合并单元格
- 1、合并单元格方式
- 2、合并单元格顺序
- 3、合并单元格流程
六、合并单元格示例
- 1、原始表格
- 2、跨行合并单元格
- 3、跨列合并单元格

一、表格标签组成 ( 表格标签 | 行标签 | 单元格标签 )

HTML 表格由 3 种标签组成 : 表格涉及的标签都是双标签 ;

表格标签 : 表格最外围的标签 , 用于包裹整个表格 ; 其中包含若干 tr 行标签 ;

	<table>整个表格内容</table>

行标签 : 标签内是一行的内容 , 其中包含若干 td 标签 ;

	<tr>表格中一行的内容</tr>

单元格标签 : 表格中一个单元格中的内容 , 只包含一个单元格的文本 ;

	<td>单元格文本内容</td>

代码示例 :

<!DOCTYPE html> 
<html lang="en"><head>    <meta charset="UTF-8" /> <title>网页标题</title><base target="_blank"/></head><body><!-- 整个表格内容 --><table><!-- 表格中一行的内容 --><tr><!-- 表格中单个单元格内容 --><td>姓名</td><td>年龄</td></tr><tr><td>Tom</td><td>18</td></tr><tr><td>Jerry</td><td>16</td></tr></table></body>
</html>

网页效果 :

在这里插入图片描述

二、table 表格属性 ( border 属性 | align 属性 | width 属性 | height 属性 )

table 表格属性 :

border 属性 : 属性值为像素值 ; 设置边框 , 默认 0 像素无边框 ;
cellspacing 属性 : 属性值为像素值 ; 设置单元格边框之间的间距 , 默认 2 像素 ;
cellpadding 属性 : 属性值为像素值 ; 设置单元格边框与单元格内容之间的间距 , 默认 1 像素 ;
width 属性 : 属性值为像素值 ; 设置表格宽度 ;
height 属性 : 属性值为像素值 ; 设置表格高度 ;
align 属性 : 可设置 left , center , right 等属性值 ; 用于设置整体表格在网页中的水平对齐方式 ;
- 设置 left , 表格在网页左侧 ;
- 设置 center , 表格在网页水平居中 ;
- 设置 right , 表格在网页右侧 ;

代码示例 :

<!DOCTYPE html> 
<html lang="en"><head>    <meta charset="UTF-8" /> <title>网页标题</title><base target="_blank"/></head><body><!-- 整个表格内容 --><table border="1" width="500" height="200" align="center" cellpadding="10" cellspacing="0"><!-- 表格中一行的内容 --><tr><!-- 表格中单个单元格内容 --><td>姓名</td><td>年龄</td></tr><tr><td>Tom</td><td>18</td></tr><tr><td>Jerry</td><td>16</td></tr></table></body>
</html>

网页效果 :

在这里插入图片描述

三、表头单元格标签

表头单元格可以在表格中用作第一排作为表格的表头使用 , 表头单元格中的文本设置可以与普通单元格中的文本设置不同 ;

表头单元格中的文本会居中 , 并且加粗显示 ;

表头单元格标签如下 :

<th></th>

表头单元格与普通单元格放置位置一样 , 也是放在 table 表格标签下的 tr 表格行标签下 , 如 :

		<!-- 表格标签 --><table><!-- 表格行标签 --><tr><!-- 表格表头单元格标签 --><th>姓名</th><th>年龄</th></tr><tr><!-- 表格普通单元格标签 --><td>Tom</td><td>18</td></tr></table>

代码示例 :

<!DOCTYPE html> 
<html lang="en"><head>    <meta charset="UTF-8" /> <title>网页标题</title><base target="_blank"/></head><body><!-- 表格标签 --><table border="1" width="500" height="200" align="left" cellpadding="10" cellspacing="0"><!-- 表格行标签 --><tr><!-- 表格表头单元格标签 --><th>姓名</th><th>年龄</th></tr><tr><!-- 表格普通单元格标签 --><td>Tom</td><td>18</td></tr><tr><!-- 表格普通单元格标签 --><td>Jerry</td><td>16</td></tr></table></body>
</html>

网页效果 :

在这里插入图片描述

四、表格标题标签

在 <table>表格标签中 , 可以使用表格标题标签 <caption> 为表格添加一个标题 ;

被添加的表格标题会显示在表格上方 , 并且居中显示 ;

表格标题标签用法 : 表格标题标签必须紧跟在 <table>表格标签后面 , 中间不要插入其它标签 , 否则设置无效 ;

		<!-- 表格标签 --><table><!-- 表格标题标签 --><caption>表格标题</caption><!-- 表格行标签 --><tr><!-- 表格表头单元格标签 --><th>姓名</th><th>年龄</th></tr><tr><!-- 表格普通单元格标签 --><td>Tom</td><td>18</td></tr></table>

代码示例 :

<!DOCTYPE html> 
<html lang="en"><head>    <meta charset="UTF-8" /> <title>网页标题</title><base target="_blank"/></head><body><!-- 表格标签 --><table border="1" width="500" height="200" align="left" cellpadding="10" cellspacing="0"><!-- 表格标题标签 --><caption>表格标题</caption><!-- 表格行标签 --><tr><!-- 表格表头单元格标签 --><th>姓名</th><th>年龄</th></tr><tr><!-- 表格普通单元格标签 --><td>Tom</td><td>18</td></tr><tr><!-- 表格普通单元格标签 --><td>Jerry</td><td>16</td></tr></table></body>
</html>

网页效果 :

在这里插入图片描述

五、合并单元格

1、合并单元格方式

单元格合并方式 :

跨行合并 : 垂直方向上的上下单元格合并是跨行合并 , 在 <td> 单元格标签中使用 rowspan 属性 , 设置跨行合并单元格数 ;
跨列合并 : 水平方向上的左右单元格合并是跨列合并 , 在 <td> 单元格标签中使用 colspan 属性 , 设置跨列合并单元格数 ;

2、合并单元格顺序

单元格合并是按照从上到下 , 从左到右的顺序进行合并 ;

3、合并单元格流程

合并单元格流程 :

首先 , 确定合并单元格类型 , 是跨行合并还是跨列合并 ;
然后 , 根据从上到下 , 从左到右的顺序 , 找到要设置 rowspan 或 colspan 属性的目标单元格 ;
- 跨行合并 : 按照从上到下的顺序进行合并 , 最上方的单元格是目标单元格 ;
- 跨列合并 : 按照从左到右的顺序进行合并 , 最左侧的单元格是目标单元格 ;
最后 , 删除合并后多余的单元格 ;

六、合并单元格示例

1、原始表格

代码示例 :

<!DOCTYPE html> 
<html lang="en"><head>    <meta charset="UTF-8" /> <title>网页标题</title><base target="_blank"/></head><body><!-- 表格标签 --><table border="1" width="500" height="200" align="left" cellpadding="10" cellspacing="0"><!-- 表格标题标签 --><caption>表格标题</caption><!-- 表格行标签 --><tr><!-- 表格表头单元格标签 --><th>姓名</th><th>年龄</th></tr><tr><!-- 表格普通单元格标签 --><td>Tom</td><td>18</td></tr><tr><!-- 表格普通单元格标签 --><td>Jerry</td><td>16</td></tr></table></body>
</html>

显示效果 :
在这里插入图片描述

2、跨行合并单元格

按照下图的样式 , 合并红色矩形框中的单元格 ;

在这里插入图片描述

合并步骤 :

首先 , 该合并是跨行合并 , 要在 <td> 标签中使用 rowspan 属性 ;
然后 , 找到目标单元格 , 是要合并单元格的最上方的单元格 , 显示 18 文本的单元格是目标单元格 ;
最后 , 删除多余的单元格 , 第三排显示 16 文本的单元格要删除 ;

代码示例 :

<!DOCTYPE html> 
<html lang="en"><head>    <meta charset="UTF-8" /> <title>网页标题</title><base target="_blank"/></head><body><!-- 表格标签 --><table border="1" width="500" height="200" align="left" cellpadding="10" cellspacing="0"><!-- 表格标题标签 --><caption>表格标题</caption><!-- 表格行标签 --><tr><!-- 表格表头单元格标签 --><th>姓名</th><th>年龄</th></tr><tr><!-- 表格普通单元格标签 --><td>Tom</td><td rowspan="2">18</td></tr><tr><!-- 表格普通单元格标签 --><td>Jerry</td></tr></table></body>
</html>

显示效果 :
在这里插入图片描述

3、跨列合并单元格

按照下图的样式 , 合并红色矩形框中的单元格 ;

在这里插入图片描述

合并步骤 :

首先 , 该合并是跨列合并 , 要在 <td> 标签中使用 colspan 属性 ;
然后 , 找到目标单元格 , 是要合并单元格的最左测的单元格 , 显示 Jerry 文本的单元格是目标单元格 ;
最后 , 删除多余的单元格 , 第三排显示 16 文本的单元格要删除 ;

代码示例 :

<!DOCTYPE html> 
<html lang="en"><head>    <meta charset="UTF-8" /> <title>网页标题</title><base target="_blank"/></head><body><!-- 表格标签 --><table border="1" width="500" height="200" align="left" cellpadding="10" cellspacing="0"><!-- 表格标题标签 --><caption>表格标题</caption><!-- 表格行标签 --><tr><!-- 表格表头单元格标签 --><th>姓名</th><th>年龄</th></tr><tr><!-- 表格普通单元格标签 --><td>Tom</td><td>18</td></tr><tr><!-- 表格普通单元格标签 --><td colspan="2">Jerry</td></tr></table></body>
</html>

显示效果 :
在这里插入图片描述

【HTML】HTML 表格总结 ★★★ ( 表格标签 | 行标签 | 单元格标签 | 表格标签属性 | 表头单元格标签 | 表格标题标签 | 合并单元格 )

编程日记 2023/2/19 5:00:31

linux013之文件和目录的权限管理

用户、组、文件目录的关系： 简介：用户和组关联，组合文件目录关联，这样就实现了用户对文件的权限管理。首先来看一下，一个文件或目录的权限是怎么查看的，ls -l， 如下，这个信息怎么看呢…...

编程日记 2023/2/19 4:59:23

设计模式之状态模式

什么是状态模式状态模式是指允许一个对象在其内部状态改变时改变他的行为，对象看起来似乎改变了整个类。状态模式将一个对象在不同状态下的不同行为封装在一个个状态类中，通过设置不同的状态对象可以让环境对象拥有不同的行为，而状…...

编程日记 2023/2/19 4:58:14

XQuery 选择和过滤

XML实例文档我们将在下面的例子中继续使用这个 "books.xml" 文档（和上面的章节所使用的 XML 文件相同）。在您的浏览器中查看 "books.xml" 文件。选择和过滤元素正如在前面的章节所看到的，我们使用路径表达式或 FL…...

编程日记 2023/2/19 4:55:57

室友打了一把王者的时间，我理清楚了grep，find，管道|，xargs的区别与联系，用的时候不知道为什么要这样用

目录问题引入 find和grep的基本区别 xargs命令 Linux命令的标准输入 vs 命令行参数举例总结问题引入在自己做项目的过程中，想使用linux命令统计下一个目录下html文件的数量，在思考应该使用grep还是find去配合wc指令统计文件数量，后来…...

编程日记 2023/2/19 4:54:49

python 刷题时常见的函数

collections.OrderedDict 1. move_to_end() move_to_end() 函数可以将指定的键值对移动到最前面或者最后面，即最左边或最右边。 2. popitem() popitem()可以完成元素的删除操作，有一个可选参数last（默认为True），…...

编程日记 2023/2/19 4:53:42

Python之列表推导式和列表排序

Python中的列表推导式，是小编比较喜欢的一种，他能大大减少你的代码量来得到你想要的结果，下面说说列表中常用的几种推导式列表排序 Python开发中会经常用到排序操作，这里提供两种方式供大家参考，对象的sort()方法和…...

编程日记 2023/2/19 4:52:34

力扣(LeetCode)240. 搜索二维矩阵 II(C++)

题目描述枚举枚举整个矩阵，找到等于 target 的元素，则 return true ，否则 return false。 class Solution { public:bool searchMatrix(vector<vector<int>>& matrix, int target) {int n matrix.size(), m matrix[0]…...

编程日记 2023/2/19 4:51:24

golang defer

文章目录延迟函数的参数在defer语句出现时就已经确定下来了延迟函数没有入参时，延迟函数体内的变量会受到影响延迟函数 *可以* 修改主函数的 *具名* 返回值延迟函数 *无法* 修改主函数的 *匿名* 返回值defer会把声明的延迟函数以及函数的入参放到栈上，…...

编程日记 2023/2/19 4:50:14

【Java】线程的死锁和释放锁

线程死锁是线程同步的时候可能出现的一种问题文章目录1. 线程的死锁1.1 基本介绍1.2 应用案例2. 释放锁2.1 下面的操作会释放锁2.2 下面的操作不会释放锁1. 线程的死锁 1.1 基本介绍多个线程都占用了对方的锁资源，但不肯相让，导致了死锁，…...

编程日记 2023/2/19 4:49:07

如何使用断点续传上传大文件

概念大文件上传的需求介绍不管怎样简单的需求，在量级达到一定层次时，都会变得异常复杂。文件上传简单，文件变大就复杂上传大文件时，以下几个变量会影响我们的用户体验服务器处理数据的能力请求超时网络波动上传时间会变长…...

编程日记 2023/2/19 4:47:55

【图神经网络】图拉普拉斯滤波器如何实现全通、低通、高通滤波

【图神经网络】图拉普拉斯滤波器如何实现全通、低通、高通滤波文章目录【图神经网络】图拉普拉斯滤波器如何实现全通、低通、高通滤波1. 前言2. 符号说明3. 三种滤波3.1 全通滤波3.2 低通滤波3.2.1 平滑信号分析3.2.2 广义拉普拉斯平滑滤波器3.3 高通滤波4. 总结1. 前言 GCN&…...

编程日记 2023/2/19 4:45:35

python操作mysql数据库详解

使用Python操作MySQL数据库 MySQL是一种关系型数据库管理系统，它可以用来存储和管理大量的数据。之前介绍了大部分主流数据库，今天将介绍如何使用Python来操作MySQL数据库。安装MySQL 首先，我们需要安装MySQL服务器，可以从MyS…...

编程日记 2023/2/19 4:44:23

netty群聊系统

1设计思路：启动一个服务端，多个客户端第一个客户端启动时，会告诉服务器上线了第二个客户端启动时，告诉服务器上线，并且通知第一个启动的客户端第三个客户端启动时，告诉服务器上线，并且通知第一个…...

编程日记 2023/2/19 4:42:01

Android 初代 K-V 存储框架 SharedPreferences，旧时代的余晖？

本文已收录到 AndroidFamily，技术和职场问题，请关注公众号 [彭旭锐] 提问。前言大家好，我是小彭。 SharedPreferences 是 Android 平台上轻量级的 K-V 存储框架，亦是初代 K-V 存储框架，至今被很多应用沿用。有的…...

编程日记 2023/2/19 4:40:48

在windows中使用tomcat搭建Jenkins

1、准备环境：JDK JDK官网下载：https://download.oracle.com/java/19/latest/jdk-19_windows-x64_bin.msi 2、 tomcat包 tocat官网下载：https://tomcat.apache.org/download-90.cgi 3、 Jenkins.war包 Jenkins官网下载：https://mi…...

编程日记 2023/2/19 4:39:38

Linux系统

linux系统世界上最重要的服务器端操作系统。创建新目录 mkdir app mkdir -m 目录权限目录名创建有权限的目录名。创建一个空白文件 touch app.txt创建一个文件。 cat创建一个文件。 vi/vim创建一个文件。 nano创建一个文件。 truncate创建一个文件。 pwd查看当前目录。 rm…...

编程日记 2023/2/19 4:38:28

Mel Frequency Cepstral Coefficients (MFCCs)

wiki里说在声音处理中，梅尔频率倒谱( MFC ) 是声音的短期功率谱的表示，基于非线性梅尔频率标度上的对数功率谱的线性余弦变换。倒谱和MFC 之间的区别在于，在 MFC 中，频带在梅尔尺度上等距分布，这比正常频谱中使用的线…...

编程日记 2023/2/19 4:37:17

第七讲---贪心（上课）

1.股票买卖一、贪心考虑一种方案，在每次上升的前一天购入股票，并在上升后的当天卖出的方案 if (w[i] > w[i - 1])res w[i] - w[i - 1];接下来证明该贪心思路得出的方案即是最优解。 （1）证明贪心解 ≥ 最优解： …...

编程日记 2023/2/19 4:36:08

计算机如何思考与图灵完备

图灵完备是针对一套数据操作规则而言的概念，数据操作规则可以是一门编程语言，也可以是计算机实现里面的指令集，比如C/C++是图图灵完备的，通用CPU也是图灵完备的，但是GPU却不一定是图灵完备的。说白了图灵完备定义了一套规则，当这套规则可以实现图灵迹模型里的全部功能时，…...

编程日记 2023/2/19 4:34:58

XML Group端口详解

在XML数据映射过程中，经常需要对数据进行分组聚合操作。例如，当处理包含多个物料明细的XML文件时，可能需要将相同物料号的明细归为一组，或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码，增加了开…...

编程新知 2025/11/1 9:10:10

rknn优化教程（二）

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK，开始写第二篇的内容了。这篇博客主要能写一下： 如何给一些三方库按照xmake方式进行封装，供调用如何按…...

编程新知 2025/6/11 15:25:30