WEB-前端 表格标签-合并单元格

  目录

合并单元方式  : 

跨行合并 :  

跨列合并 : 

目标单元格  :

 跨行的话

 跨列的话

合并的步骤  :

跨行合并  :  

跨列合并   : 


      

特殊情况下,可以把多个单元格合并为一个单元格,我们呢先以学会最简单的合并单元格即可~!

                       

                            如上示的   照片 和 个人简历 就是合并多个单元格 ~! 

合并单元方式  : 

跨行合并 :  

              rowspan= " 合并单元格的个数 " 

               

                  那这个就是跨行合并,第二行和第三行进行合并 ~!    使用   rowspan 

跨列合并 : 

           colspan=" 合并单元格的个数 " 

               

               将第一列和第二列进行合并 ~!!  使用 colspan 

目标单元格  :

            我们最终要合并,那肯定就要写 合并代码,那这个合并代码写在哪里呢 ??

            ===>>>

            就是写在我们的  目标单元格身上 ~!! 

            那目标单元格是写在哪里呢 ??

            ===>>>

            也有讲究, 看你是 跨行还是跨列 ~!

        跨行的话

            ===>>>

            那就写在 最上侧单元格为目标单元格,写合并代码

            

           那比如,我们现在就合并这两个单元格,这就是跨行合并单元格

           那按照写在最上侧的单元格为目标单元格,那就是 五角星 那个单元格是目标单元格

           因为五角星是在最上侧, 所以代码就写在它这个单元格上 ~!! 

         跨列的话

             ===>>>

             最左侧单元格为目标单元格,写合并代码 

          

              跨列是同理,那就写在最左侧即 五角星为目标单元格 ~!! 

合并的步骤  :

#  先确定是跨行还是跨列

#  找到目标单元格,写上合并方式 = 合并的单元格数量 

    比如  : < td colspan= "2" > </td> 

删除多余的单元格 

示例 : 

          

               先弄一个 3×3 表格 出来 ,来做个基础表格

               

               

                        然后,我们按照 合并的步骤 ,进行合并 ~!!

跨行合并  :  

                

                    

                         我们想让上示 红色所圈的两个 单元格合并下; 即跨行合并单元格

                         那就得以 五角星单元格 为目标单元格 

                         编写代码 

                         

                         那我们就要定位到    第二行 第一列 的表格处, 编写代码

                         因为是  跨行,所以是  rowspan, 是合并两个单元格,所以为 2 

                        需要注意上示,在第三行第一列 打了对勾,是因为要在第三步的时候删除该行代码

                        因为 跨行合并后,就要删除多余的单元格,所以,对于上示跨行来说,第三行第一

                        列的单元格就是  多余的单元格,需要删掉~!!

                        所以,完整的代码是 

                        

                        ===>>>

                   

                         这样就实现了 第二行和第三行 第一列的跨行合并 ~!!!

跨列合并   : 

                        

                       同理,要想实现上示红色所圈的单元格合并,则以蓝色五角星为目标单元格

                       

                       定位目标单元格后,进行跨列代码 编写 

                       因为是跨列 所以是 colspan,要合并两个单元格,所以 为 2 

                       随后进行第三步,删除单元格 

                      

                      ===>>>

                 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/335175.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Leetcode】2788. 按分隔符拆分字符串

文章目录 题目思路代码 题目 题目链接 给你一个字符串数组 words 和一个字符 separator &#xff0c;请你按 separator 拆分 words 中的每个字符串。 返回一个由拆分后的新字符串组成的字符串数组&#xff0c;不包括空字符串 。 注意 separator 用于决定拆分发生的位置&#…

Ubuntu中查看IP地址的常用命令及使用方法

在Ubuntu操作系统中&#xff0c;了解和查看IP地址是进行网络配置、故障排除以及连接其他设备的重要一步。 以下是几个常用的命令来查看IP地址&#xff1a; 一、ifconfig命令 输入ifconfig 输出如图所示&#xff0c;即为ip地址 如若提示没有ifconfig命令&#xff0c;则可以使用…

LeetCode 热题 100 | 双指针(下)

目录 42. 接雨水 1 方法一&#xff1a;我的方法 2 方法二&#xff1a;动态规划 3 方法三&#xff1a;双指针 菜鸟做题第一周&#xff0c;语言是 C 42. 接雨水 1 方法一&#xff1a;我的方法 Warning&#xff1a;这是我的智障做法&#xff0c;请勿模仿 我只能说它教会…

macOS系统ISO镜像完整制作过程

1.下载dmg包 下载中... 下载完成后会自动弹出安装窗口如下: 启动台中也有 Install macOS Sonoma图标 2.创建一个空的15G的dmg镜像: 创建空dmg镜像命令如下: hdiutil create -o ./Sonoma.cdr -size 15000m -layout SPUD -fs

python毕设选题 - 大数据工作岗位数据分析与可视化 - python flask

文章目录 0 前言1 课题背景2 实现效果3 项目实现3.1 概括 3.2 Flask实现3.3 HTML页面交互及Jinja2 4 **完整代码**5 最后 0 前言 &#x1f525; 这两年开始毕业设计和毕业答辩的要求和难度不断提升&#xff0c;传统的毕设题目缺少创新和亮点&#xff0c;往往达不到毕业答辩的要…

【Java】JDBC的使用

JDBC package jdbc_demo;import java.sql.Connection; import java.sql.DriverManager; import java.sql.Statement;public class jdbc {public static void main(String[] args)throws Exception {//1.注册驱动Class.forName("com.mysql.cj.jdbc.Driver");//2.获取…

信道复用技术码分复用 CDM(Code Division Multiplexing)

目录 一、码分复用 CDM&#xff08;Code Division Multiplexing&#xff09; 二、码分多址CDMA 三、码片序列的概念 四、码片序列的正交关系 五、CDMA的工作原理 一、码分复用 CDM&#xff08;Code Division Multiplexing&#xff09; 常用的名词是码分多址 CDMA (Code Di…

OceanBase集群部署

我认为学习一个中间件比较好的方式是&#xff0c;先了解它的架构和运行原理&#xff0c;然后动手部署一遍&#xff0c;加深对它的了解&#xff0c;再使用它&#xff0c;最后进行总结和分享 本篇介绍OceanBase部署前提条件和集群部署 1.使用开源免费的社区版&#xff0c;企业版…

JS-WebAPIS(四)

日期对象&#xff08;常用&#xff09; • 实例化 在代码中发现了 new 关键字时&#xff0c;一般将这个操作称为实例化创建一个时间对象并获取时间 获得当前时间 获得指定时间 • 时间对象方法 使用场景&#xff1a;因为日期对象返回的数据我们不能直接使用&#xff0c;所以…

Yearning存在任意文件读取漏洞

文章目录 前言声明一、Yearning简介二、漏洞描述三、影响版本四、漏洞复现五、修复建议 前言 Yearning MYSQL SQL语句审核平台。提供查询审计&#xff0c;SQL审核&#xff0c;SQL回滚&#xff0c;自定义工作流等多种功能。该平台存在任意文件读取漏洞。 声明 请勿利用文章内的…

ThinkPad T14/T15/P14s/P15s gen2电脑原厂Win10系统镜像 恢复笔记本出厂时预装自带OEM系统

lenovo联想原装出厂Windows10系统&#xff0c;适用型号&#xff1a; ThinkPad T14 Gen 2&#xff0c;ThinPad T15 Gen 2&#xff0c;ThinkPad P14s Gen 2&#xff0c;ThinkPad P15s Gen 2 &#xff08;20W1,20W5,20VY,20W7,20W0,20W4,20VX,20W6&#xff09; 链接&#xff1…

【车载开发系列】Autosar DCM诊断管理模块

【车载开发系列】Autosar DCM诊断管理模块 【车载开发系列】Autosar DCM诊断管理模块 【车载开发系列】Autosar DCM诊断管理模块一. DCM模块概念二. DCM模块与Autosar其他模块关系1&#xff09;Dcm和PduR的交互2&#xff09;Dcm和ComM模块的交互3&#xff09;Dcm和Dem的交互4&a…

职能部门的绩效考核改革,解决方案来了

一、客户背景及现状问题 A酒店是酒店行业的龙头企业&#xff0c;其品牌享有很高的知名度。为了适应市场竞争及发展的需要、充分发挥每个员工的积极性&#xff0c;提高企业的整体业绩&#xff0c;该企业于前几年开始实行严格的绩效考核制度。绩效考核实行之初&#xff0c;管理者…

基于Django的Python应用—学习笔记—功能完善

一、让用户可以输入信息 创建forms.py 创建基于表单的页面的方法几乎与前面创建网页一样&#xff1a;定义一个 URL &#xff0c;编写一个视图函数并编写一个模板。一个主要差别是&#xff0c;需要导入包含表单 的模块forms.py 。 from django import forms from .models impor…

安捷伦E8361A网络分析仪E8361C

安捷伦E8361A网络分析仪 E8361A 是 Agilent 的 67 GHz 网络分析仪。网络分析仪是一种功能强大的仪器&#xff0c;可以以无与伦比的精度测量射频设备的线性特性。许多行业使用网络分析仪来测试设备、测量材料和监控信号的完整性。附加功能&#xff1a; 94 dB 的动态范围和 <…

Odrive 学习系列四:如何使用脚本自动初始化odrive配置

一、背景: 在学习markbase的教程后,发现odrive的初始化配置命令确实有点多。尽管odrive有自动补全: 且可以通过 ctrl + → 来快速补全: 但是对初学者而言,仍旧有比较大的工作量。 而针对于此,我们可以通过powershell脚本的方式来解决这个问题。 二、设计初始化…

Flink实时数仓同步:拉链表实战详解

一、背景 在大数据领域&#xff0c;业务数据通常最初存储在关系型数据库&#xff0c;例如MySQL。然而&#xff0c;为了满足日常分析和报表等需求&#xff0c;大数据平台会采用多种不同的存储方式来容纳这些业务数据。这些存储方式包括离线仓库、实时仓库等&#xff0c;根据不同…

github如果有别人给你的仓库提pull request,该如何验证他的代码并合并

我有一个github仓库&#xff0c;是做抖音直播数据对接的&#xff0c;有很多朋友给我点了star&#xff0c;也有朋友fork了这个仓库&#xff0c;最近接收到一个pull request的请求&#xff0c;他最直播结束的内容作了判断&#xff0c;我该如何在我本地校验它的代码并合并呢&#…

【Linux】03 GCC编译器的使用

一、编译过程 在使用gcc编译程序时&#xff0c;编译过程可以简要划分为4个阶段&#xff1a; 预处理、编译、汇编、链接 1.1 预处理&#xff08;preprocessing&#xff09; 这个阶段主要处理源文件中的#indef、#include和#define预处理命令&#xff1b; 这里主要是把一些include…

Linux 部署

jdk&tomcat安装 1.上传jdk、tomcat安装包 2.解压两个工具包 #解压tomcat tar -zxvf apache-tomcat-8.5.20.tar.gz #解压jdk tar -zxvf jdk-8u151-linux-x64.tar.gz 3.配置并且测试jdk安装 #配置环境变量 vim /etc/profile #java environment export JAVA_HOME/root/soft/…