【HTML】HTML 表格 ③ ( 合并单元格 | 跨行合并 | 跨列合并 | 单元格合并顺序 | 跨行设置 rowspan 属性 | 跨列设置 colspan 属性 )

文章目录

• 一、合并单元格

• 1、合并单元格方式
• 2、合并单元格顺序
• 3、合并单元格流程

• 二、合并单元格示例

• 1、原始表格
• 2、跨行合并单元格
• 3、跨列合并单元格

一、合并单元格

1、合并单元格方式

单元格合并方式 :

• 跨行合并 : 垂直方向上的 上下 单元格合并 是 跨行合并 , 在
  单元格标签 中 使用 rowspan 属性

• 跨列合并 : 水平方向上的 左右 单元格合并 是 跨列合并 , 在
  单元格标签中 使用 colspan 属性 , 设置跨列合并单元格数 ;

  2、合并单元格顺序

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

  3、合并单元格流程

  合并单元格流程 :

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

  二、合并单元格示例

  ---

  1、原始表格

  代码示例 :

   
  
  	    
  		 
          
  		
      
      
  		
  		
  
  			
  			
  表格标题
  			
  			
  
  				
  				
  姓名
  				
  年龄
  			
  			
  
  				
  				
  Tom
  				
  18
  			
  			
  
  				
  				
  Jerry
  				
  16
  			
  		
      
  

  显示效果 :

  

  2、跨行合并单元格

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

  

  合并步骤 :

  • 首先 , 该合并是要在
    标签中 使用 rowspan 属性 ;

  • 然后 , 找到 目标单元格 , 是要合并单元格的最上方的单元格 , 显示 18 文本的单元格 是目标单元格 ;
  • 最后 , 删除多余的单元格 , 第三排 显示 16 文本的单元格要删除 ;

  代码示例 :

   
  
  	    
  		 
          
  		
      
      
  		
  		
  
  			
  			
  表格标题
  			
  			
  
  				
  				
  姓名
  				
  年龄
  			
  			
  
  				
  				
  Tom
  				
  18
  			
  			
  
  				
  				
  Jerry
  			
  		
      
  

  显示效果 :

  

  3、跨列合并单元格

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

  

  合并步骤 :

  • 首先 , 该合并是要在
    标签中 使用 colspan 属性 ;

  • 然后 , 找到 目标单元格 , 是要合并单元格的最 左测的单元格 , 显示 Jerry 文本的单元格 是目标单元格 ;
  • 最后 , 删除多余的单元格 , 第三排 显示 16 文本的单元格要删除 ;

  代码示例 :

   
  
  	    
  		 
          
  		
      
      
  		
  		
  
  			
  			
  表格标题
  			
  			
  
  				
  				
  姓名
  				
  年龄
  			
  			
  
  				
  				
  Tom
  				
  18
  			
  			
  
  				
  				
  Jerry
  			
  		
      
  

  显示效果 :

  

  • 
    
    赞
    
  • 
    
    收藏
    
  • 
    
    评论
    
  • 
    
    分享
    
  • 
    
    举报
    

  上一篇：【HTML】HTML 表格 ② ( 表头单元格标签 | 表格标题标签 )

  

  提问和评论都可以，用心的回复会被更多人看到
  评论

  发布评论

  全部评论
  ()
  最热
  最新
  相关文章

  • ExtJs – grid 合并单元格 跨行跨列

    /** * 合并单元格 * @param {} grid 要合并单元格的grid对象 * @param {} cols 要合并哪几列 [1,2,4] */ function mergeCells(grid, cols) { var arrayTr = document.getElementById(grid.getId()+”-body”).firstChild.firstChild.fir

    
    html
    
    合并单元格
    
    i++

  • html表格合并单元格

    th标签 合并列 colspan=”k” 合并行 rowspan=”k” 例子《th colspan=”2″, rowspan=”3″》

    
    技术

  • html表单元素的colspan和rowspan合并单元格

    文章目录colspan和rowspancolspanrowspan代码案例colspan和rowspancolspan和rowspan这两个属性用于创建特殊的表格。colspancolspan用来指定单元格横向跨越的列数：colspan就是合并列的，colspan=2的话就是合并两列。rowspanrowspan用来指定单元格纵向跨越的行数:rowspan就是用来合并行的，比如rowspan=2就是合并两行。rowspan通常使用在td和th标签中row:行,span:跨度,跨距,范围c

    
    html

  • html 单元格合并

    我是占位符		我是占位符
    我是占位符	我是占位符 占位符 Markdown表格—合并单元格—设置单元格颜色 Markdown表格设计              ~~~~~~~我之前做表格遇到一些问题，特别是两个小表格 markdown d3 f5 5e HTML表格跨行、跨列操作(rowspan、colspan) 一般使用	元素的colspan属性来实现单元格跨列操作，使用	元素的rowspan属性来实现单元格的跨行操作。 colspan属性规定单元格可横跨的列数，所有浏览器都支持colspan属性。其取值为number，如下图所示： 例如： 取值 javascript element表格列单元格相同合并 html代码: //`template上` 数据 html 数组 js代码 编程 Html Table 合并单元格 基本表格 Html Table 合并 单元格 行 合并单元格 int sheetMergeCount = workSheet.GetSelectedRanges().Count; List rangeIndexList = new List(); int rowIndex =0; for (int i = 0; i C# c# i++ 其他 单元格合并 表格单元合并 1.row单元格合并：(注：先删后面的单元格) 先把后面表格中 星期一 删了，然后在前面表格 中加入：rowspan=”2″ 2代表合并单元的个数 2.column单元格合并：（对删除哪一个没有要求） 删除一个单元格后加入：colspan=”2″ … 其他 创建excel,合并单元格,设置单元格样式 package com.huawei.excel; import java.io.File;import java.io.FileOutputStream;import java.util.Date; import org.apache.catalina.startup.SetContextProp apache java 测试生成 用户信息 i++ poi excel 合并单元格 设置单元格样式 CellStyle cellStyle_tmp = workbook.createCellStyle();cellStyle_tmp.setAlignment(HorizontalAlignment.RIGHT);cellStyle_tmp.setVerticalAlignment(Vertical … 其他 poi导出excel合并单元格(包括列合并、行合并) 1 工程所需jar包如下：commons-codec-1.5.jarcommons-logging-1.1.jarlog4j-1.2.13.jarjunit-3.8.1.jarpoi-3.9-20121203.jar2 Code: jar 设备信息 jar包 合并单元格 设备名 jquery合并表格单元格 javascript 表格 content title Markdown表格合并单元格 属性 属性值 描述 type text 单行文本输入框 password 密码输入框 合并表格 控件 自定义 单选按钮 elementUI表格合并单元格 相信你肯定看了 ElementUI 官方文档了，没看的话先去看下表格各个属性的意义，方便下文阅读：传送门但你会发现此例过于简单，死数据，但我们开发的时候往往都是后台传递过来的数据，导致我们 rowspan 的参数需要自己做判断，根据数据的相同行（或列）进行合并；我们先看下结果： 代码附上： … JavaScript Vue 2 elementUI 04-合并单元格.html html Bootstrap mergeCells合并单元格（多列） /**合并单元格@paramtarget目标表格对象@paramdata原始数据（在服务端完成排序）@paramfieldName合并参照的属性名称@paramfieldList要合并的字段集合[不含fieldName]![]@paramcolspan合并开始列*/functionmergeCells(target,data,fieldName,fieldList,colspan){//声明一个m jquer bootstra poi 合并单元格、设置边框 HSSFWorkbook wb = new HSSFWorkbook(); HSSFSheet sheet = wb.createSheet(); //创建一个样式 HSSFCellStyle styleBorderThin= wb.createCellStyle(); setBorder.setB 合并单元格 sed 赋值 导出excel 韩曙亮_ 关注 私信 分类列表 更多 # Groovy141篇 # Git23篇 # Windows 逆向26篇 # Android 逆向197篇 # Android 命令行工具1篇 近期文章 1.就业内推 | 阿里云专场，CCIE、RHCE认证优先，30k+16薪 2.最快鉴别网工能力的方法，就三个字 3.阿里云，又瘫了！ 4.Shape-形状对象59 5.【深度学习】ResNet的性能不够好？ResNet听了直摇头并强势反击：是你的训练策略不行吧！… 文章目录 文章目录 一、合并单元格 1、合并单元格方式 2、合并单元格顺序 3、合并单元格流程 二、合并单元格示例 1、原始表格 2、跨行合并单元格 3、跨列合并单元格 每日签到 意见 反馈 举报文章 请选择举报类型 内容侵权 涉嫌营销 内容抄袭 违法信息 其他 具体原因 包含不真实信息 涉及个人隐私 原文链接（必填） 补充说明 0/200 上传截图 格式支持JPEG/PNG/JPG，图片不超过1.9M 取消 确认 已经收到您得举报信息，我们会尽快审核 赞 收藏 评论 分享 如有误判或任何疑问，可联系 「51CTO博客客服 」申诉及反馈。 我知道了 51CTO首页 内容精选 博客 学堂 精培 企业培训 CTO训练营 智能汽车 开源基础软件社区 WOT全球技术创新大会 公众号矩阵 移动端 免费课程 课程排行 直播课 软考学堂 精品班 厂商认证 IT技术 2023年软考 PMP项目管理 在线学习 企业服务 CTO训练营 技术经理研习营 LeaTech峰会 文章 资源 问答 开源课堂 专栏 直播 51CTO 开源基础软件社区 51CTO技术栈 51CTO官微 51CTO学堂 51CTO博客 CTO训练营 开源基础软件社区订阅号 51CTO学堂APP 51CTO学堂企业版APP 开源基础软件社区视频号 51CTO博客 首页 关注 排行榜 订阅专栏 搜索历史 清空 热门搜索 查看【 】的结果 首发福利 写文章 创作中心 登录注册 Copyright © 2005-2023 51CTO.COM 版权所有 京ICP证060544号 关于我们 官方博客 全部文章 热门标签 班级博客 了解我们 在线客服 网站地图 意见反馈 友情链接 开源基础软件社区 51CTO学堂 51CTO 汽车开发者社区 var userId=””; var uid=””; var user_id=14192100; var isLogin=0; var imgpath=”https://s2.51cto.com/”; var BLOG_URL=”https://blog.51cto.com/”; var HOME_URL=”https://home.51cto.com/”; var STATICPATH=”https://static2.51cto.com/edu/”; var SA_SERVER_URL_YM=”https://sc.51cto.com/sa?project=production”; var cururl=”https://blog.51cto.com/u_14202100/6274326″; var login_url=”https://home.51cto.com/mobile/client-login?reback=https://blog.51cto.com/u_14202100/6274326″; var praise_url=”https://blog.51cto.com/praise/praise”; var qrcodeSid=””; var qr_code=””; var router=”blog/index”; var csrfParam=”_csrf”; var csrfToken=”SESVuwP9-cWVloRL23bfAuUsslCjwIpQ-dUavVdQD4EWUR2p7qHGGcNz1VvtFdK90-2t1V8l6XRB0J2wnULQzQ==”; var is_load=0; var uc_url=”https://ucenter.51cto.com/”; var blog_url=”https://blog.51cto.com/”; var isBuy=1; var isPc=0; var writeMessage=”©著作权归作者所有：来自51CTO博客作者韩曙亮_的原创作品，请联系作者获取转载授权，否则将追究法律责任rn【HTML】HTML 表格 ③ ( 合并单元格 | 跨行合并 | 跨列合并 | 单元格合并顺序 | 跨行设置 rowspan 属性 | 跨列设置 colspan 属性 )rnhttps://blog.51cto.com/u_14202100/6274326″; var isCodeCopy=0; var cid=””; var fid=0; var commentListPage=””; var originalUrl=”https://blog.51cto.com/u_14202100/original”; var followersUrl=”https://blog.51cto.com/u_14202100/followers”; var translateUrl=”https://blog.51cto.com/u_14202100/translate”; var reproduceUrl=”https://blog.51cto.com/u_14202100/reproduce”; var followingUrl=”https://blog.51cto.com/u_14202100/following”; var page=”detail”; var tipStatus=1; var addReply_url=”https://blog.51cto.com/addBlogComment”; var removeUrl=”https://blog.51cto.com/delBlogComment”; var blog_id=6274326; var is_comment=0; var comment_list=”https://blog.51cto.com/getBlogCommentList”; var index_url=”https://blog.51cto.com/u_14202100″; var img_url=”https://static2.51cto.com/edu/blog/”; var i_user_id=””; var c_user_id=14192100; var collect_url=”https://blog.51cto.com/addUserCollect”; var is_old=2; var nicknameurl=”https://blog.51cto.com/u_14202100″; var nickname=”韩曙亮_”; var shareimgUrl=”/qr/qr-url?url=https%3A%2F%2Fblog.51cto.com%2Fu_14202100%2F6274326″; var checkFollow=1; var seoTitle=””; var articleABtest=0; !function(f,p){“use strict”;var h=new RegExp(“.css”),y=p.head||p.getElementsByTagName(“head”)[0],r=+navigator.userAgent.replace(/.*(?:AppleWebKit|AndroidWebKit)/?(d+).*/i,”$1″)<536;function s(e){return"complete"===e.readyState||"loaded"===e.readyState}function v(e,t,n){var o="onload"in e;function a(){e.onload=e.onreadystatechange=null,e=null,t()}"css"!==n||!r&&o?o?(e.onload=a,e.onerror=function(){e.onerror=null}):e.onreadystatechange=function(){s(e)&&a()}:setTimeout(function(){!function e(t,n){var o;t.sheet&&(o=!0),setTimeout(function(){o?n():e(t,n)},20)}(e,t)},1)}function u(t,n,e,o){if(t)if(h.test(t)){var a=t,r=e,c=u,i=p.createElement("link");if(r.attrs)for(var l in r.attrs)i.setAttribute(l,r.attrs[l]);r.prefetch?(i.href=a,i.rel="prefetch",c&&c()):(i.rel="stylesheet",v(i,c,"css"),i.href=a),y.appendChild(i)}else{var c=t,d=e,a=u,f=d.prefetch?p.createElement("link"):p.createElement("script");if(d.attrs)for(var s in d.attrs)f.setAttribute(s,d.attrs[s]);d.prefetch?(f.href=c,f.rel="prefetch",a&&a()):(f.charset="utf-8",v(f,a,"js"),f.async=!1,f.src=c),y.appendChild(f)}else setTimeout(function(){u()});function u(){var e=n.indexOf(t);-1<e&&n.splice(e,1),0===n.length&&o()}}function c(e="load",t){var n="object"==typeof t.option?t.option:{},t="function"==typeof t.callback?t.callback:null;return n.attrs="object"==typeof n.attrs?n.attrs:{},n.loaded="boolean"==typeof n.loaded&&n.loaded,n[e]=!0,{option:n,cb:t}}function i(c,e,t="load"){var n,o,a,r,i,l;function d(){var e=c,t=i,n=l;function o(){n&&n()}if(0===(e=Array.prototype.slice.call(e||[])).length)o();else for(var a=0,r=e.length;a<r;a++)u(e[a],e,t,o)}c&&c.length&&(i=e.option,l=e.cb,e=p,n=function(){"load"===t&&i.loaded?setTimeout(d,2e3):d()},("ready"===(o=t)?"loading"!==e.readyState:s(e))?n():(a=!1,r=function(){a||(n(),a=!0)},"load"===o?f.addEventListener("load",r):"ready"===o&&p.addEventListener("DOMContentLoaded",r),setTimeout(function(){r()},1500)))}f.PsLoader={ready:function(e,t,n={}){var o=[],a=[];e.forEach(function(e){(h.test(e)?o:a).push(e)}),n.loaded=!1,i(o,c("ready",{option:n,callback:function(){t(o)}}),"ready"),i(a,c("load",{option:n,callback:function(){t(a)}}))},load:function(e,t,n={}){i(e,c("load",{option:n,callback:t}))},prefetch:function(e,t,n={}){i(e,c("prefetch",{option:n,callback:t}))}}}(window,document); !function(m,g){var t=["scroll","wheel","mousewheel","resize","animationend","transitionend","touchmove"];function n(e){if("object"!=typeof e)throw new Error("CLazy option is not Object");var f={defaultImg:e.defaultImg||"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",preLoad:e.preLoad||1.3,preLoadTop:e.preLoadTop||0,complete:e.complete||null,events:e.events||t,capture:e.capture||!1},v=0,p={},h={},i={},A=this;function l(e){var t=e;if("object"!=typeof t)return!1;if(!t.el)for(var r in p)if(e===p[r].el){t=p[r];break}return t}function c(e){var e=e.getBoundingClientRect(),t=f.preLoad,r=f.preLoadTop;return e.topr&&e.left<m.innerWidth*t&&0<e.right}function u(e,t){var r,n=e.bindType,o=e.el;switch(t){case"loading":case"error":r=f.defaultImg;break;default:r=e.src}n?e.src&&(o.style[n]='url("'+r+'")'):o.getAttribute("src")!==r&&o.setAttribute("src",r),o.setAttribute("lazy",t)}this.add=function(e,t){var r=function(e){var t,r=!1;for(t in p)if(p[t].el===e){r=p[t];break}return r}(e);if(r)return this.check(r),!1;r="e_"+ ++v;if(p[r])return this.check(p[r]),!1;for(var n,o={id:r,el:e,bindType:"IMG"===e.tagName?null:"background-image",src:(n=e,(t=t)?t.value:n.getAttribute("ps-lazy")),$parent:function(e){if(!(e instanceof HTMLElement))return m;var t=e;for(;t&&t!==g.body&&t!==g.documentElement&&t.parentNode;){if(/(scroll|auto)/.test(function(e){return y(e,"overflow")+y(e,"overflow-y")+y(e,"overflow-x")}(t)))return t;t=t.parentNode}return m}(e)},a=(h[r]=function(e){A.check(o)},p[r]=o),i=h[r],c=0;c<f.events.length;c++){s=d=u=l=void 0;var[l,u,d,s=!1]=[a.$parent,f.events[c],i,f.capture];l&&l.addEventListener(u,d,s),m!==l&&m.addEventListener(u,d,s)}this.check(o)},this.remove=function(e){for(var e=l(e),t=(e.el&&e.el.removeAttribute("ps-lazy"),e),r=h[e.id],n=0;n<f.events.length;n++){c=i=a=o=void 0;var[o,a,i,c=!1]=[t.$parent,f.events[n],r,f.capture];o&&o.removeEventListener(a,i,c),m!==o&&m.removeEventListener(a,i,c)}delete h[e.id],delete p[e.id]},this.check=function(e){var t,r,n,o,a=l(e);c(a.el)&&(m===a.$parent||c(a.$parent))?(e=function(e){u(a,e),A.remove(a),f.complete&&f.complete({el:a.el,src:a.src,state:e})},a.src?(t=a.src,r=e,n=encodeURIComponent(t),i[n]?r(i[n]):((o=new Image).onload=function(){i[n]="loaded",r(i[n])},o.onerror=function(){i[n]="error",r(i[n])},o.src=t)):e("loaded")):u(a,"loading")},this.checkAll=function(){for(var e in p)A.check(p[e])}}function y(e,t){return"undefined"!=typeof getComputedStyle?getComputedStyle(e,null).getPropertyValue(t):e.style[t]}m.PsLazy=function(e={}){function t(e){for(var t=e.path||event.composedPath&&event.composedPath()||e._getPath&&e._getPath(),r=0;r<t.length;r++){var n=t[r];if(n&&"hasAttribute"in n&&n.hasAttribute("ps-lazy-check")){o.format();break}}}function r(){var e=g.querySelector("img[data-share]");e&&!e.getAttribute("src")&&e.setAttribute("src",e.getAttribute("data-share"))}var o=this;n.call(o,e),g.addEventListener("click",t),g.addEventListener("mouseover",t),this.format=function(){var e=g.querySelectorAll("[ps-lazy]");if(!e.length)return!1;for(var t=0;t<e.length;t++)o.add(e[t])},this.format();"complete"===(e=g).readyState||"loaded"===e.readyState?r():m.addEventListener("load",r,!1)}}(window,document); PsLoader.load(["https://static2.51cto.com/edu/blog/blog-static/static/css/pc_detailinline.min.css?v=5c7f42dbda","https://static2.51cto.com/edu/blog/blog-static/static/css/pc_detail.min.css?v=118252b566","https://cdn.51cto.com/jquery/jquery-2.2.4.min.js","https://static2.51cto.com/edu/center/js/interaction_iframe.js","https://cdn.51cto.com/jquery/swiper-4.5.3.js","https://static2.51cto.com/edu/blog/blog-static/static/js/pc_base.min.js?v=300bc61215","https://static2.51cto.com/edu/blog/blog-static/js/mprime.js?v=2cb70144db","https://static2.51cto.com/edu/blog/blog-static/static/js/pc_detail.min.js?v=2535acb529"], function() {}) PsLoader.prefetch(["https://static2.51cto.com/edu/blog/blog-static/static/css/pc_base.min.css?v=2731609498","https://static2.51cto.com/edu/blog/blog-static/static/css/pc_indexinline.min.css?v=e40c304555","https://static2.51cto.com/edu/blog/blog-static/static/css/pc_newIndexinline.min.css?v=7cd4246e43","https://static2.51cto.com/edu/blog/blog-static/static/css/pc_listinline.min.css?v=a365759c73","https://static2.51cto.com/edu/blog/blog-static/static/css/pc_newListinline.min.css?v=fcde138dd1","https://static2.51cto.com/edu/blog/blog-static/static/css/pc_topicinline.min.css?v=47a9bc571c","https://static2.51cto.com/edu/blog/blog-static/static/css/pc_topicdetailinline.min.css?v=512bf305aa","https://static2.51cto.com/edu/blog/blog-static/static/css/pc_bloggerinline.min.css?v=0e63931398","https://static2.51cto.com/edu/blog/blog-static/markdown/dist/js/main.js?v=9fee5bb838","https://static2.51cto.com/edu/blog/blog-static/static/js/pc_index_js.min.js?v=5331660aa2","https://static2.51cto.com/edu/blog/blog-static/static/js/pc_list_js.min.js?v=8973c321c1","https://static2.51cto.com/edu/blog/blog-static/static/js/pc_topic.min.js?v=873da4210c","https://static2.51cto.com/edu/blog/blog-static/static/js/pc_topic_static.min.js?v=8533cb9e02","https://static2.51cto.com/edu/blog/blog-static/static/js/pc_topicdetail.min.js?v=901345e7d5","https://static2.51cto.com/edu/blog/blog-static/static/js/pc_blogger_js.min.js?v=c7a4e3d003"]); var Lazy = new PsLazy({ defaultImg: "https://s2.51cto.com/images/100/base/empty.png?x-oss-process=image/ignore-error,1", preLoad: 1.3, complete: function(opt) {}, })

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.fwqtg.net

相关推荐: 一种通用的业务监控触发方案设计 | 京东云技术团队

一、背景 业务监控是指通过技术手段监控业务代码执行的最终结果或者状态是否符合预期，实现业务监控主要分成两步：一、在业务系统中选择节点发送消息触发业务监控；二、系统在接收到mq消息或者定时任务调度时，根据消息中或者任务中的业务数据查询业务执行的结果或状态并与业务…