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

004+limou+HTML——（4）HTML表格

news 2026/5/24 5:50:34

000、前言

表格在实际开发中的应用还是比较多的，表格可以更加清晰地排列数据

001、基本结构

（1）构成

表格：<table>
行：<tr>（table row，表格行），由多少组tr标签，就有多少行
单元格：/（table data cell，表格单元格）

（2）代码

<!DOCTYPE html>
<html><head><meat charset="utf-8"/><title>网页标题</title></head><body><h1>网页标题1</h1><table><tr><td>单元格1</td><td>单元格2</td></tr><tr><td>单元格3</td><td>单元格4</td></tr></table><h1>网页标题2</h1></body>
</html>

在这里插入图片描述

（3）使用CSS进行优化（CSS以后学习，这里只是单纯让表格更加直观，因为默认情况下表格是没有边框的）

（3）使用CSS进行优化（CSS以后学习，这里只是单纯让表格更加直观，因为默认情况下表格是没有边框的）<!DOCTYPE html>
<html><head><meat charset="utf-8"/><title>网页标题</title><!--这里使用了CSS为表格加上边框--><style type="text/css">table,tr,td{border:1px solid silver;}</style></head><body><h1>网页标题1</h1><table><caption>表格标题1</caption><tr><td>单元格1</td><td>单元格2</td></tr><tr><td>单元格3</td><td>单元格4</td></tr></table><h1>网页标题2</h1><table><caption>表格标题2</caption><tr><td>单元格1</td><td>单元格2</td></tr><tr><td>单元格3</td><td>单元格4</td></tr></table></body>
</html>

在这里插入图片描述

002、完整结构

除了上面的基本架构，还有一些其他表格会用到的标签

（1）表标题：

一般来说一个表格只有一个表头，默认情况下，caption标签位于表格的第一行

（2）表头单元格：

单元格其实有两种：
- 表头单元格：（table header cell，表头单元格）
- 表行单元格：
两者都是单元格，但是不可以进行互换使用
- 表头单元格会用“粗体”、“居中”来显示th里的内容，但是td不会
- 两者的语义不一样，调试不一样

<!DOCTYPE html>
<html><head><meat charset="utf-8"/><title>网页标题</title><!--这里使用了CSS为表格加上边框--><style type="text/css">table,tr,td{border:1px solid silver;}</style></head><body><h1>网页标题1</h1><table><caption>表格标题1</caption><tr><th>表头单元格01</th><th>表头单元格02</th></tr><tr><td>单元格1</td><td>单元格2</td></tr><tr><td>单元格3</td><td>单元格4</td></tr></table><h1>网页标题2</h1><table><caption>表格标题2</caption><tr><th>表头单元格01</th><th>表头单元格02</th></tr><tr><td>单元格1</td><td>单元格2</td></tr><tr><td>单元格3</td><td>单元格4</td></tr></table></body>
</html>

在这里插入图片描述

003、语义化后完整的表格语法，上述的东西可以直接整合为下面这个code

为了更好语义化，HTML还引入了、、三个标签，使得逻辑更加清晰，调试更加方便，并且方便分块来控制表格的CSS样式

<!DOCTYPE html>
<html><head><meat charset="utf-8"/><title>表格语义化完整语法</title><!--这里使用了CSS为表格加上边框--><style type="text/css">table,tr,td{border:1px solid silver;}</style></head><body><table><caption>表格标题</caption><!--表头部分--><thead><tr><th>表头单元格</th><th>表头单元格</th><th>表头单元格</th></tr></thead><!--表身部分--><tbody><tr><td>表行单元格</td><td>表行单元格</td><td>表行单元格</td></tr><tr><td>表行单元格</td><td>表行单元格</td><td>表行单元格</td></tr><tr><td>表行单元格</td><td>表行单元格</td><td>表行单元格</td></tr></tbody><!--表脚部分--><tfoot><tr><td>标准单元格</td><td>标准单元格</td><td>标准单元格</td></tr></tfoot></table></body>
</html>

004、合并属性，即：合并行[rowspan]/合并列：[colspan]

（1）概念

这个类似word的表格合并，rowspan可以将单元格合并

（2）具体语法

（3）具体代码

<!DOCTYPE html>
<html><head><meat charset="utf-8"/><title>表格语义化完整语法</title><!--这里使用了CSS为表格加上边框--><style type="text/css">table,tr,td{border:1px solid silver;}</style></head><body><table><caption>表格标题</caption><!--表头部分--><thead><tr><th>表头单元格</th><th>表头单元格</th><th>表头单元格</th></tr></thead><!--表身部分--><tbody><tr><td rowspan="2">表行单元格</td><td>表行单元格</td><td>表行单元格</td></tr><tr><td>表行单元格</td><td>表行单元格</td></tr><tr><td colspan="2">表行单元格</td><td>表行单元格</td></tr></tbody><!--表脚部分--><tfoot><tr><td>标准单元格</td><td>标准单元格</td><td>标准单元格</td></tr></tfoot></table></body>
</html>

在这里插入图片描述

004+limou+HTML——（4）HTML表格

000、前言表格在实际开发中的应用还是比较多的，表格可以更加清晰地排列数据 001、基本结构 （1）构成表格：<table>行：<tr>（table row，表格行），由多少组t…...

编程日记 2023/4/23 6:58:06

uniapp实现自定义相机

自定义相机起因由于最近用uniapp调用原生相机容易出现闪退问题，找了很多教程又是压缩图片又是优化代码，我表示并没有太大作用!!实现自定义相机使用效果图拓展实现多种自定义相机水印相机身份证相机人像相机起因由于最近用uniapp调用原生相机容易出现闪退…...

编程日记 2023/4/23 6:58:04

插值多项式的龙格现象的介绍与模拟

在文章拉格朗日插值多项式的原理介绍及其应用中，笔者介绍了如何使用拉格朗日插值多项式来拟合任意数据点集。事实上，插值多项式会更倾向于某些形状。德国数学家卡尔龙格Carl Runge发现，插值多项式在差值区间的端点附近会发生扭动&#x…...

编程日记 2023/4/23 6:58:03

Spring整体架构包含哪些组件？

Spring是一个轻量级java开源框架。Spring是为了解决企业应用开发的复杂性而创建的，它使用基本的JavaBean来完成以前只可能由EJB完成的事情。 Spring的用途不仅限于服务器端的开发，从简单性、可测试性和松耦合的角度而言，任何java应用都可以从…...

编程日记 2023/4/23 6:58:01

开发接口需要考虑哪些问题？

1 接口名字 user/ user/adduser/xxx 见名知意，调用接口的开发人员和后来接手的开发人员能够根据接口名称大致猜测出接口作用。 2 协议设计接口时，应明确调用接口的协议，是采用HTTP协议,HTTPS协议还是FTP协议。比如跨语言调用通常使用WebS…...

编程日记 2023/4/23 6:57:59

关于Activiti7审批工作流绘画流程图（2）

文章目录一、25张表详解二、安装插件一.定制流程提示：以下是本篇文章正文内容，下面案例可供参考一、25张表详解虽然表很多，但是仔细观察，我们会发现Activiti 使用到的表都是 ACT_ 开头的。表名的第二部分用两个字母表明表的用…...

编程日记 2023/4/23 6:57:58

String.format()对日期进行格式化

前言：String.format()作为文本处理工具，为我们提供强大而丰富的字符串格式化功能，这里根据查阅的资料做个学习笔记，整理成如下文章，供后续复习查阅。一. format()方法的两种重载形式：format(String format,…...

编程日记 2023/4/23 6:57:56

核酸检测信息管理系统

目录前言一、功能与需求分析二、详细设计与实现1、data包（1）DataDataBase（2）NaPaNamePassword2、operation包（1）操作接口（2）Resident用户功能（3）Simper用户功…...

编程日记 2023/4/23 6:57:54

典型回溯题目 - 全排列（一、二）

典型回溯题目 - 全排列（一、二） 46. 全排列题目链接：46. 全排列状题目大意： 给定一个不含重复数字的数组 nums ，返回其所有可能的全排列。你可以按任意顺序返回答案。注意：（1&#xf…...

编程日记 2023/4/23 6:57:53

数据清洗和特征选择

数据清洗和特征选择数据清洗和特征挖掘的工作是在灰色框中框出的部分，即“数据清洗>特征，标注数据生成>模型学习>模型应用”中的前两个步骤。灰色框中蓝色箭头对应的是离线处理部分。主要工作是从原始数据，如文本、图像或者应…...

编程日记 2023/4/23 6:57:51

java StringBuilder 和 StringBuffer 万字详解（深度讲解）

StringBuffer类介绍和溯源StringBuffer类常用构造器和常用方法StringBuffer类 VS String类（重要）二者的本质区别（含内存图解）二者的相互转化StringBuilder类介绍和溯源StringBuilder类常用构造器和常用方法String类，St…...

编程日记 2023/4/23 6:57:49

【Linux】帮助文档查看方法

目录1 Linux帮助文档查看方法1.1 man1.2 内建命令(help)1 Linux帮助文档查看方法 1.1 man man 是 Linux 提供的一个手册，包含了绝大部分的命令、函数使用说明。该手册分成很多章节（section），使用 man 时可以指定不同的章节来浏…...

编程日记 2023/4/23 6:57:48

UEFI 实战(2) HelloWorld 之一 helloworld及.inf文件

初识UEFI 按惯例，首先让我们用HelloWorld跟UEFI打个招呼吧标准application /*main.c */ #include <Uefi.h> EFI_STATUS UefiMain ( IN EFI_HANDLE ImageHandle, IN EFI_SYSTEM_TABLE *SystemTable ) { SystemTable -> ConOut-> OutputString(SystemTab…...

编程日记 2023/4/23 6:57:46

向2022年度商界木兰上榜女性致敬！

目录信息来源： 2022年度商界木兰名单简介评选标准动态榜单为你心中的2023商界女神投上一票信息来源： 2022年度商界木兰榜公布华为孟晚舟获商界木兰最高分 - 脉脉【最具影响力女性】历届商界木兰榜单中国最具影响力的30位商界女性名单…...

编程日记 2023/4/23 6:57:44

ChatGPT助力校招----面试问题分享(二)

1 ChatGPT每日一题：DC-DC与LDO的区别问题：介绍一下DC-DC与LDO的区别 ChatGPT：DC-DC和LDO都是电源管理电路，它们的主要作用是将输入电压转换为所需的输出电压，以供电子设备使用。但是，它们之间存在一些重…...

编程日记 2023/4/23 6:57:43

JAVA架构与开发（JAVA架构是需要考虑的几个问题）

在企业中JAVA架构师主要负责企业项目技术架构，企业技术战略制定，技术框架搭建，技术培训和技术攻坚的工作。在JAVA领域，比较多的都是web项目。用于解决企业的数字化转型。对于JAVA架构师而言，平时对项目的架构主要考虑…...

编程日记 2023/4/23 6:57:41

vue 中 v-for 的使用

v-for 获取列表的前 n 条、中间范围、末尾 n 条的数据 list: [{ img: /static/home/news1.png, title: 标题1 },{ img: /static/home/news2.png, title: 标题2 },{ img: /static/home/news1.png, title: 标题3 },{ img: /static/home/news2.png, title: 标题4 },{ img: /stati…...

编程日记 2023/4/23 6:57:39

项目--基于RTSP协议的简易服务器开发(2)

一、项目创立初衷： 由于之前学过计算机网络的相关知识，了解了计算机网络的基本工作原理，对于主流的协议有一定的了解。但对于应用层的协议还知之甚少，因此我去了解了下目前主要的应用层传输协议，发现RTSP（…...

编程日记 2023/4/23 6:57:38

ubus编译_环境搭建

文章目录一、环境搭建脚本toolChain_jsonc.cmaketoolChain_libubox.cmaketoolChain_ubus.cmakeinstall.sh二、测试出现问题：三、测试uloopmain.c 每5s打印信息一、环境搭建脚本准备四个文件 install.sh,toolChain_jsonc.cmake,toolChain_libubox.cmake,toolChai…...

编程日记 2023/4/23 6:57:36

移动通信（16）信号检测

常见的信号检测算法一般包括以下几类检测算法：最优、线性和非线性。最优检测算法：最大似然算法线性检测算法：迫零检测算法和最小均方误差检测算法非线性检测算法：串行干扰消除检测算法球形译码检测算法属于一种次优检测算法&#…...

编程日记 2023/3/9 1:29:47

准最优最小二乘框架：破解PDE非齐次边界数值求解难题

1. 项目概述：当最小二乘遇上非齐次边界——一个准最优框架的构建在偏微分方程（PDE）的数值求解领域，最小二乘法一直以其数学上的优雅和稳定性吸引着研究者。其核心思想直白而有力：将微分方程问题转化为一个最小化残差范…...

编程新知 2026/5/24 4:54:51

FPGA在材料测试中的高精度控制与并行处理应用

1. FPGA在材料测试领域的革新价值材料测试设备作为工业质量控制的核心装备，其性能直接影响着从汽车安全气囊到医疗植入物的产品可靠性。传统基于通用微控制器的测试系统正面临三大技术瓶颈：首先是测试标准迭代速度快，ASTM、ISO等组织每年新增…...

编程新知 2026/5/24 4:01:18

保姆级教程：用USM的PE和分区助手，把旧硬盘数据无损搬到新硬盘（附Win11引导修复）

Win11系统硬盘无损迁移全指南：USM PE与分区助手实战详解当你面对一块崭新的固态硬盘，既想享受飞速读写体验，又担心重装系统后那些精心调试的设置和重要数据丢失，这种纠结我太熟悉了。去年我的主力机升级时，整整3TB的工…...

编程新知 2026/5/24 2:44:23

仅限首批200家零售企业获取：2024中国零售Agent成熟度评估矩阵V2.1（含137项能力测评项+自动生成差距报告）

更多请点击： https://codechina.net 第一章：AI Agent零售行业应用 AI Agent 正在重塑零售行业的客户体验、供应链效率与决策智能化水平。通过融合自然语言理解、多步推理、工具调用与记忆机制，AI Agent 不再是单点问答机器人，而是…...

编程新知 2026/5/24 2:10:30

从纸质报表到Excel：PaddleOCR+Python自动化识别复杂表格（附完整代码）

金融表格自动化革命：用PaddleOCRPython实现纸质报表秒转Excel每次月末结算时，财务部的张经理总要面对堆积如山的纸质报表——供应商对账单、银行流水单、税务申报表，这些表格往往带有手写注释、合并单元格和模糊印章。传统的人工录入不仅耗时…...

编程新知 2026/5/24 1:27:32

Alibaba组件选型与架构设计

Alibaba组件选型与架构设计前言本文将总结Spring Cloud Alibaba各组件的特点，并根据不同业务场景提供选型建议和架构设计指导。一、组件对比与选型 1.1 注册中心对比特性NacosEurekaConsulCAP模型CP/AP可切换APCP多语言支持HTTP/DNSHTTPHTTP/DNS配置管理原生支持…...

编程新知 2026/5/24 0:27:22

Kubernetes DaemonSet深度解析：管理集群守护进程的最佳实践

Kubernetes DaemonSet深度解析：管理集群守护进程的最佳实践一、DaemonSet概述 DaemonSet 是Kubernetes中用于在集群的每个节点上运行一个Pod副本的控制器。它确保所有节点（或满足特定条件的节点）都运行该Pod的一个实例。 1.1 DaemonSet应…...

编程新知 2026/5/23 23:51:11