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

【HTML5】html5开篇基础（3）

news 文章来源：https://blog.csdn.net/Easonmax/article/details/142459659 2025/1/11 10:00:04

1.❤️❤️前言~🥳🎉🎉🎉

Hello, Hello~ 亲爱的朋友们👋👋，这里是E绵绵呀✍️✍️。

如果你喜欢这篇文章，请别吝啬你的点赞❤️❤️和收藏📖📖。如果你对我的内容感兴趣，记得关注我👀👀以便不错过每一篇精彩。

当然，如果在阅读中发现任何问题或疑问，我非常欢迎你在评论区留言指正🗨️🗨️。让我们共同努力，一起进步！

加油，一起CHIN UP！💪💪

🔗个人主页：E绵绵的博客
📚所属专栏：

1. JAVA知识点专栏

        深入探索JAVA的核心概念与技术细节

2.JAVA题目练习

        实战演练，巩固JAVA编程技能

3.c语言知识点专栏

        揭示c语言的底层逻辑与高级特性

4.c语言题目练习

        挑战自我，提升c语言编程能力

5.Mysql数据库专栏

        了解Mysql知识点，提升数据库管理能力

6.html5知识点专栏

         学习前端知识，更好的运用它

📘 持续更新中，敬请期待❤️❤️

这篇文章我们讲表格。

表格学习整体可以分为三大部分:
1.表格的相关标签
2.表格的相关属性
3.合并单元格

2.表格的相关标签 

在HTML中，创建表格的基本标签包括：

  1. <table>：定义一个表格。

  2. <thead>：定义表格的表头部分。用于将表头单元格（<th>）分组在一起，提供一种结构化的方式来组织表格的头部。可以包含多个行（<tr>），而不仅仅是一行表头。只是单纯语义化，不会对内容做任何修饰。

  3. <tbody>：定义表格的主体部分，包含实际的数据行。只是单纯语义化，不会对内容做任何修饰。

  4. <tr>：定义表格的一行（row）。

  5. <th>：定义表格头部单元格（header cell），通常用于表头中的内容，文本通常为粗体且居中显示。

  6. <td>：定义表格的单元格（data cell），用于包含表格中的数据。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><table><thead><tr><th>姓名</th><th>年龄</th><th>城市</th></tr></thead><tbody><tr><td>张三</td><td>25</td><td>北京</td></tr><tr><td>李四</td><td>30</td><td>上海</td></tr></tbody></table>
</body></html>

 

3.表格的相关属性

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

  除此还有heigh等属性。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>人员信息表</title></head><body><table align=center border="4" cellpadding="10" cellspacing="5" width="100" height="200"><thead><tr><th>姓名</th> <!-- 表头单元格 --><th>年龄</th><th>城市</th></tr></thead><tbody><tr><td>张三</td> <!-- 数据单元格 --><td>25</td><td>北京</td></tr><tr><td>李四</td><td>30</td><td>上海</td></tr><tr><td>王二</td><td>25</td><td>广州</td></tr></tbody></table></body></html></body></html>

 

 4.合并单元格

在 HTML 中，可以使用 <table> 标签创建表格，并通过 rowspan 和 colspan 属性来合并单元格。

  • rowspan 用于垂直合并单元格（跨越多行）
  • colspan 用于水平合并单元格（跨越多列）
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>合并单元格示例</title></head><body><table border="2"><tr><th>标题1</th><th colspan="2">合并标题</th> <!-- 合并两个列 --></tr><tr><td rowspan="2">合并行</td> <!-- 合并两行 --><td>数据1</td><td>数据2</td></tr><tr><td>数据3</td><td>数据4</td></tr></table>
</body></html>

由上可知如果要合并单元格我们 rowspan 和 colspan 所要针对的单元格是 左上 的单元格。

相关文章：

【HTML5】html5开篇基础（3）

1.❤️❤️前言~&#x1f973;&#x1f389;&#x1f389;&#x1f389; Hello, Hello~ 亲爱的朋友们&#x1f44b;&#x1f44b;&#xff0c;这里是E绵绵呀✍️✍️。 如果你喜欢这篇文章&#xff0c;请别吝啬你的点赞❤️❤️和收藏&#x1f4d6;&#x1f4d6;。如果你对我的…...

编程日记 2024/10/2 20:12:28

echarts实现3D柱状图（视觉层面）根据博主改编

https://blog.csdn.net/weixin_57798646/article/details/131067725 这是原贴 在这个基础上我需要实现 一根柱子 代码如下 <!DOCTYPE html> <html lang"en" style"height: 100%"><head><meta charset"utf8"> </hea…...

编程日记 2024/10/2 20:10:26

【一篇文章理解Java中多级缓存的设计与实现】

文章目录 一.什么是多级缓存&#xff1f;1.本地缓存2.远程缓存3.缓存层级4.加载策略 二.适合/不适合的业务场景1.适合的业务场景2.不适合的业务场景 三.Redis与Caffine的对比1. 序列化2. 进程关系 四.各本地缓存性能测试对比报告(官方)五.本地缓存Caffine如何使用1. 引入maven依…...

编程日记 2024/10/2 20:09:25

OpenSource - 开源WAF_SamWaf

文章目录 PreSafeLine VS SamWaf开发初衷软件介绍架构界面主要功能 使用说明下载最新版本快速启动WindowsLinuxDocker 启动访问升级指南自动升级手动升级 在线文档 代码相关代码托管介绍和编译已测试支持的平台测试效果 安全策略问题反馈许可证书贡献代码 Pre Nginx - 集成Mod…...

编程日记 2024/10/2 20:06:22

旅游避坑指南

1.火车站旁白的小摊贩&#xff0c;还有周边的小饭店百分之百是黑店&#xff0c;不仅难吃要死而且巨黑&#xff01;&#xff01;&#xff01; 可以地图上搜索附近的大型商超&#xff0c;例如泰安市的银座商超&#xff0c;里面的东西不仅好吃而且价格透明&#xff0c;还有很多当…...

编程日记 2024/10/2 20:00:16

矩阵系统源码搭建的具体步骤，支持oem，源码搭建

一、前期准备 明确需求 确定矩阵系统的具体用途&#xff0c;例如是用于社交媒体管理、电商营销还是其他领域。梳理所需的功能模块&#xff0c;如多账号管理、内容发布、数据分析等。 技术选型 选择适合的编程语言&#xff0c;如 Python、Java、Node.js 等。确定数据库类型&…...

编程日记 2024/10/2 19:59:15

正则表达式调试工具实战

正则表达式调试工具实战 1、新建工程QWidget工程工程名RegexTool 如果QT不会配置，请参考我的博客，QT配置 Widget.cpp 默认内容如下 2、主界面设计 三行两列，每行采用HBoxLayout作为行布局控件，内部一个Lable控件和一个TextEdit控件，采用VBoxLayout 控件包裹三个HBoxLa…...

编程日记 2024/10/2 19:58:14

SQL:函数以及约束

目录 介绍 函数 字符串函数 数值函数 日期函数 流程函数 约束 总结 介绍 说到函数我们都不陌生,在C,C,java等语言中都有库函数,我们在平时也是经常使用,函数就是一段代码,我们既可以自定义实现,又可以使用库里内置的函数;从来更加简洁方便的完成业务;同样的在SQL中也有…...

编程日记 2024/10/2 19:55:10

在Linux中将设备驱动的地址映射到用户空间

本期主题&#xff1a; MMU的简单介绍&#xff0c;以及如何实现设备地址映射到用户空间 往期链接&#xff1a; Linux内核链表零长度数组的使用inline的作用嵌入式C基础——ARRAY_SIZE使用以及踩坑分析Linux下如何操作寄存器&#xff08;用户空间、内核空间方法讲解&#xff09;…...

编程日记 2024/10/2 19:50:06

电脑自带dll修复在哪里，dll丢失的6种解决方法总结

在现代科技日新月异的时代&#xff0c;电脑已经成为我们生活中不可或缺的一部分。然而&#xff0c;在使用电脑的过程中&#xff0c;我们常常会遇到一些常见的问题&#xff0c;其中之一就是dll文件丢失或损坏。当这些dll文件丢失或损坏时&#xff0c;可能会导致某些应用程序无法…...

编程日记 2024/10/2 19:46:03

k8s基于nfs创建storageClass

首先安装nfs #服务端安装 yum install -y nfs-utils rpcbind #客户端安装 yum install -y nfs-utils #启动服务 并设置开启启动 systemctl start rpcbind && systemctl enable rpcbind systemctl start nfs && systemctl enable nfs #创建共享目录 mkdir -p /…...

编程日记 2024/10/2 19:42:58

Chrome无法拖入加载.crx扩展文件(以IDM为例)

问题原因&#xff1a;新版本的Chrome浏览器已不支持加载.crx文件 解决办法&#xff1a;将.crx文件压缩为.zip文件&#xff0c;解压缩后再加载到Chrome中 以IDM的.crx文件作为示例&#xff1b; IDM的.crx文件位于C:\Program Files (x86)\Internet Download Manager; 将IDMGCE…...

编程日记 2024/10/2 19:37:55

数字教学时代：构建高效在线帮助中心的重要性

在数字化教学日益普及的今天&#xff0c;教育领域正经历着前所未有的变革。随着在线课程、虚拟教室、智能学习平台等数字化工具的广泛应用&#xff0c;教育资源的获取方式和学习模式发生了深刻变化。然而&#xff0c;这种变革也带来了新的挑战&#xff0c;其中之一便是如何确保…...

编程日记 2024/10/2 19:34:52

828华为云征文｜华为云弹性云服务器FlexusX实例下的Nginx性能测试

本文写的是华为云弹性云服务器FlexusX实例下的Nginx性能测试 目录 一、华为云弹性云服务器FlexusX实例简介二、测试环境三、测试工具四、测试方法五、测试结果 下面是华为云弹性云服务器FlexusX实例下的Nginx性能测试。 一、华为云弹性云服务器FlexusX实例简介 华为云弹性云服…...

编程日记 2024/10/2 19:32:50

知识图谱入门——2：技术体系基本概念：知识表示与建模、知识抽取与挖掘、知识存储与融合、知识推理与检索

知识图谱是通过构建“实体”和“关系”来描述世界的信息网络&#xff0c;它不仅是数据的存储方式&#xff0c;还可以支持推理与查询&#xff0c;帮助系统更好地理解、整合和利用数据。 文章目录 1. 知识表示与建模2. 知识抽取与挖掘3. 知识存储与融合4. 知识推理与检索总结 1.…...

编程日记 2024/10/2 19:30:49

【不看会后悔系列】排序之——文件归并【史上最全详解】~

文章目录 前言一、何为文件归并&#xff1f;二、文件归并思路分析三、创造多数据文件四、前置准备——堆排序五、两个文件写入到第三个文件六、读 N 个数据返回给文件,并返回读到数据的个数七、文件归并八、文件归并完整代码总结1. 运行代码2. 运行截图 总结 前言 学习了归并排…...

编程日记 2024/10/2 19:28:45

安全点的应用场景及其原理详解

引言 在Java虚拟机&#xff08;JVM&#xff09;运行的过程中&#xff0c;有些时刻&#xff0c;系统需要暂停所有正在运行的线程&#xff0c;以执行某些全局操作或确保数据的一致性。这些暂停线程的时刻被称为**“安全点”**&#xff08;Safepoint&#xff09;。尽管安全点最广…...

编程日记 2024/10/2 19:27:44

计算机各专业2025毕业设计选题推荐【各专业 | 最新】

计算机各专业2025毕业设计选题推荐 Java、Python、Vue、PHP、小程序、安卓、大数据、爬虫、可视化、机器学习、深度学习 文末有联系方式~~~ 1.Java 基于Java的在线购物系统设计与实现Java开发的图书管理系统基于Spring Boot的社交媒体平台Java实现的移动健康应用在线学习平…...

编程日记 2024/10/2 19:21:37

【Python报错已解决】IndexError: index 0 is out of bounds for axis 1 with size 0

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 专栏介绍 在软件开发和日常使用中&#xff0c;BUG是不可避免的。本专栏致力于为广大开发者和技术爱好者提供一个关于BUG解决的经…...

编程日记 2024/10/2 19:16:32

SpringGateway（网关）微服务

一.启动nacos 1.查看linux的nacos是否启动 docker ps2.查看是否安装了nacos 前面是你的版本&#xff0c;后面的names是你自己的&#xff0c;我们下面要启动的就是这里的名字。 docker ps -a3.启动nacos并查看是否启动成功 二.创建网关项目 1.创建idea的maven项目 2.向pom.x…...

编程日记 2024/10/2 19:15:32

jQuery面试题：（第三天）

8.你在jQuery中使用过哪些插入节点的方法&#xff0c;它们的区别是什么&#xff1f; 答:append(),appendTo(),prepend(),prependTo(),after(),insertAfter() before(),insertBefore() 内添加 1.append()在文档内添加元素 2.appendTo()把匹配的元素添加到对象里 3.prepend()…...

编程日记 2024/10/2 19:13:30

聊聊国内首台重大技术装备（2）

上次&#xff0c;介绍了《首台&#xff08;套&#xff09;重大技术装备推广应用指导目录&#xff08;2024年版&#xff09;》中介绍的硅外延炉&#xff0c;湿法清洗机&#xff0c;氧化炉&#xff0c;见文章&#xff1a; 《聊聊国内首台重大技术装备&#xff08;1&#xff09;》…...

编程日记 2024/10/2 19:12:29

python 实现rayleigh quotient瑞利商算法

rayleigh quotient瑞利商算法介绍 瑞利商&#xff08;Rayleigh Quotient&#xff09;算法在多个领域&#xff0c;如线性代数、计算机视觉和机器学习等&#xff0c;都有重要的应用。瑞利商定义为函数 R ( A , x ) ( x H A x ) / ( x H x ) R(A, x) (x^H Ax) / (x^H x) R(A,x)…...

编程日记 2024/10/2 19:11:28

Java Web应用升级故障案例解析

在一次Java Web应用程序的优化升级过程中&#xff0c;从Tomcat 7.0.109版本升级至8.5.93版本后&#xff0c;尽管在预发布环境中验证无误&#xff0c;但在灰度环境中却发现了一个令人困惑的问题&#xff1a;新日志记录神秘“失踪”。本文深入探讨了这一问题的排查与解决过程&…...

编程日记 2024/10/2 19:10:27

Java类和对象、自定义包、static、代码块、方法重写

目录 1.类和对象 2.this指针 3.对象的构造和初始化 3.1默认初始化 3.2就地初始化 3.3构造初始化 3.4IDEA快速填充 3.5使用this简化 3.6初始化的总结 4.包的引入 4.1包的概念 4.2导入包中的类 4.3自定义包 5.static修饰 6.代码块的划分 7.方法重写 1.类和对象 使…...

编程日记 2024/10/2 19:09:26

【系统代码】招投标采购一体化管理系统，JAVA+vue

前言&#xff1a; 随着互联网和数字技术的不断发展&#xff0c;企业采购管理逐渐走向数字化和智能化。数字化采购平台作为企业采购管理的新模式&#xff0c;能够提高采购效率、降低采购成本、优化供应商合作效率&#xff0c;已成为企业实现效益提升的关键手段。系统获取在文末…...

编程日记 2024/10/2 19:08:25

基于yolov8深度学习的120种犬类检测与识别系统python源码+onnx模型+评估指标曲线+精美GUI界面目标检测狗类检测犬类识别系统

【算法介绍】 基于YOLOv8深度学习的120种犬类检测与识别系统是一款功能强大的工具&#xff0c;该系统利用YOLOv8深度学习框架&#xff0c;通过21583张图片的训练&#xff0c;实现了对120种犬类的精准检测与识别。 该系统基于Python与PyQt5开发&#xff0c;具有简洁的UI界面&a…...

编程日记 2024/10/2 19:07:24

UNI-APP_iOS开发技巧之：跳转到TestFlight或者App Store

有的时候我们的应用可能需要上TestFlight或者App Store&#xff0c;更新升级就需要跳到TestFlight里面。方法如下&#xff1a; 跳转到TestFlight: itms-beta://itunes.apple.com/app/你的AppID 跳转到AppStore: itms-apps://itunes.apple.com/app/你的AppIDhttps://airp…...

编程日记 2024/10/2 19:04:21

基于SSM+Vue技术的定制式音乐资讯平台

文未可获取一份本项目的java源码和数据库参考。 一、选题的背景与意义&#xff1a; 随着个人计算机的普及和互联网技术的日渐成熟&#xff0c;网络正逐渐成为人们获取信息及消费的主要渠道。然而在当前这个信息时代&#xff0c;网络中的信息种类和数量呈现爆炸性增长的趋势&a…...

编程日记 2024/10/2 19:03:20

Spring依赖注入和注解驱动详解和案例示范

在 Spring 框架中&#xff0c;依赖注入&#xff08;Dependency Injection, DI&#xff09;和注解驱动&#xff08;Annotation-Driven&#xff09;是其核心机制&#xff0c;它们为 Spring 应用提供了灵活性和可扩展性。依赖注入简化了对象间的依赖管理&#xff0c;而注解驱动则通…...

编程日记 2024/10/2 19:02:19

域名注册空间网站/百家号关键词排名

# encoding: utf-8 import sys reload(sys) sys.setdefaultencoding(utf-8)#######################Base64加密解密(可逆)################### # Base64编码&#xff0c;64指A-Z、a-z、0-9、和/这64个字符&#xff0c;还有“”号不属于编码字符&#xff0c;而是填充字符 import…...

编程日记 2025/1/11 7:56:40

商务型网站模板/个人优秀网页设计

有时我们需要判断是不是ajax请求来决定模块输出还是json格式输出.PHP判断ajax请求的原理:在发送ajax请求的时候&#xff0c;我们可以通过XMLHttpRequest这个对象&#xff0c;创建自定义的header头信息&#xff0c; 在jquery框架中&#xff0c;对于通过它的$.ajax, $.get, or $.…...

编程日记 2025/1/11 6:10:05

专业建站开发/网络营销培训课程

注&#xff1a;以下内容适用于WPF、C#编码。 最近对异步编程产生了较大的兴趣&#xff0c;所以写出来和感兴趣的朋友一起分享&#xff01; 1、关于Dispatcher 调度类&#xff1a; 提供用于管理线程的工作项队列的服务。 通常&#xff0c;WPF 应用程序从两个线程开始&#…...

编程日记 2025/1/11 4:44:30

云南专业网站建设/外贸网站制作推广

算是狗年上班的最后一天吧&#xff0c;想想还是略略总结一下近半年来的概况。 这段时间比较懒得去总结更新发表新的博客&#xff0c;一来是生活和工作的琐碎让自己有些懈怠&#xff0c;二是对自己写的东西缺乏深度感到困扰&#xff0c;自己大概也带着些完美型人格吧。最近的工…...

编程日记 2025/1/11 4:23:17

做自营网站还是amazon/温州seo团队

好了&#xff0c;就不多说了&#xff0c;事实上只要你有了足够的能力&#xff0c;能开始想老板所想的事&#xff0c;这时候你会发现&#xff0c;你也可以做老板了。 据我所知&#xff0c;很多程序员都是越过架构师这道坎&#xff0c;有了整体的架构布局思维&#xff0c;就开始…...

编程日记 2025/1/11 2:01:21

wordpress侧栏文本代码/网络推广公司简介

c表a表查询语句 select a.*,c.* FROM a LEFT JOIN c on FIND_IN_SET(a.a_id,c.a_id)...

编程日记 2025/1/10 22:37:51