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

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

news 2026/2/7 12:19:19

文章目录

一、表格标签组成 ( 表格标签 | 行标签 | 单元格标签 )
二、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

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手：借助大模型技术，开发能根据用户输入的主题、风格等要求，生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用，帮助艺术家和创意爱好者激发创意、提高创作效率。 - 个性化梦境…...

编程新知 2025/11/6 5:46:16

云原生核心技术 (7/12): K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？

大家好，欢迎来到《云原生核心技术》系列的第七篇！ 在上一篇，我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在，我们就像一个拥有了一块崭新数字土地的农场主，是时…...

编程新知 2025/12/14 22:32:59

7.4.分块查找

一.分块查找的算法思想： 1.实例： 以上述图片的顺序表为例， 该顺序表的数据元素从整体来看是乱序的，但如果把这些数据元素分成一块一块的小区间， 第一个区间[0,1]索引上的数据元素都是小于等于10的， 第二…...

编程新知 2026/1/27 18:11:42

前端倒计时误差!

提示：记录工作中遇到的需求及解决办法文章目录前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言前几天听说公司某个项…...

编程新知 2025/9/8 23:14:43

多种风格导航菜单 HTML 实现（附源码）

下面我将为您展示 6 种不同风格的导航菜单实现，每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

编程新知 2026/2/2 2:49:11

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览漏洞名称：Apache Flink REST API 任意文件读取漏洞CVE编号：CVE-2020-17519CVSS评分：7.5影响版本：Apache Flink 1.11.0、1.11.1、1.11.2修复版本：≥ 1.11.3 或 ≥ 1.12.0漏洞类型：路径遍历&#x…...

编程新知 2026/2/6 2:13:58

pycharm 设置环境出错 pycharm 新建项目，设置虚拟环境，出错 pycharm 出错 Cannot open Local Failed to start [powershell.exe, -NoExit, -ExecutionPolicy, Bypass, -File, C:\Program Files\JetBrains\PyCharm 2024.1.3\plugins\terminal\shell-int…...

编程新知 2026/1/16 15:03:10

论文阅读：Matting by Generation

今天介绍一篇关于 matting 抠图的文章，抠图也算是计算机视觉里面非常经典的一个任务了。从早期的经典算法到如今的深度学习算法，已经有很多的工作和这个任务相关。这两年 diffusion 模型很火，大家又开始用 diffusion 模型做各种 CV 任务了&am…...

编程新知 2026/1/27 19:36:39

LangChain【6】之输出解析器：结构化LLM响应的关键工具

文章目录一 LangChain输出解析器概述1.1 什么是输出解析器？1.2 主要功能与工作原理1.3 常用解析器类型二主要输出解析器类型2.1 Pydantic/Json输出解析器2.2 结构化输出解析器2.3 列表解析器2.4 日期解析器2.5 Json输出解析器2.6 xml输出解析器三高级使用技巧3…...

编程新知 2025/10/4 5:55:58

Android Framework预装traceroute执行文件到system/bin下

文章目录 Android SDK中寻找traceroute代码内置traceroute到SDK中traceroute参数说明-I 参数（使用 ICMP Echo 请求）-T 参数（使用 TCP SYN 包） 相关文章 Android SDK中寻找traceroute代码设备使用的是Android 11，在/s…...

编程新知 2026/2/5 22:49:00

文章目录

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

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

三、表头单元格标签

四、表格标题标签

五、合并单元格

1、合并单元格方式

2、合并单元格顺序

3、合并单元格流程

六、合并单元格示例

1、原始表格

2、跨行合并单元格

3、跨列合并单元格

相关文章：