前言

今天领导安排个任务，将报告的某个功能界面动态化展示，其中有涉及到 Table 表格操作(rowspan、colspan)，刚刚开始对这两概念不是很理解，走了很多弯路…扯远了，开始吧。

一、概念

colspan（跨列）

colspan：指的是我这数据占几列。

colspan案例

<table border="1"><tr><!-- Monthly Savings占两列 --><th colspan="2">Monthly Savings</th></tr><tr><td>January</td><td>$100</td></tr><tr><td>February</td><td>$80</td></tr>
</table>

rowspan（跨行）

rowspan：指的是我这数据占几行。

rowspan案例

<table border="1"><tr><!-- Savings for holiday!占三行 --><th rowspan="3">Savings for holiday!</th></tr><tr><td>January</td><td>$100</td></tr><tr><td>February</td><td>$80</td></tr>
</table>

注意： Savings for holiday为什么要占三行，因为它自己本身算一行。

二、项目实践

效果展示

HTML

涉及 company 项目效果会有点差异，请谅解。

    <table border="1"><tbody><tr style="line-height: 32px;"><th><span>参考值</span></th><th><span>炎症类型</span></th><th><span>呼吸道疾病</span></th></tr><tr><th rowspan="6"><span>&lt;25ppb</span></th></tr><tr><td rowspan="4"><span>非嗜酸性炎症为主(嗜中性、感染性)非激素(抗生素)药物医疗为主</span></td><td><span>非嗜酸性哮喘</span></td></tr><tr><td><span>支气管扩张</span></td></tr><tr><td><span>嗜中性慢阻肺</span></td></tr><tr><td><span>感染性肺炎</span></td></tr><tr><td><span>小气道嗜酸性炎症</span></td><td><span>小气道哮喘</span></td></tr><tr><th rowspan="6"><span>&gt;25ppb</span></th></tr><tr><td rowspan="6"><span>嗜酸性炎症为主(气道高反应)激素药物治疗为主</span></td><td><span>过敏性哮喘</span></td></tr><tr><td><span>咳嗽变异性哮喘</span></td></tr><tr><td><span>嗜酸性支气管炎</span></td></tr><tr><td><span>混合炎症慢阻肺</span></td></tr><tr><td><span>嗜酸性肺炎</span></td></tr></tbody></table>

总结

下面实战符合自己的项目需求，概念问题，如果还不理解的可以参考其他大佬的文章或者其他网站。

HTML实现表格rowspan、colspan操作相关推荐

谷歌浏览器table不规则表格使用rowspan/colspan导致线条粗细不同
背景希望制作一张表格, 如下图, 但使用rowspan/colspan后导致绘制的表格线条重叠, 导致有些线条粗有些线条细. ps: 只有使用谷歌浏览器时有这个问题, 使用火狐等浏览器时线条显示均正 ...
自动化办公之excel教程（3）：数据编辑操作，表格的美化操作，应用表格样式和单元格样式，制作报销汇总单
一.数据编辑操作 1.填充数据填充数据见上一节自动化办公之EXCEL教程(2):各种数据的输入,自动填充数据,表格操作小技巧 2.查找和替换数据第一步:开始选项卡里找到查找或者Ctil+F 第 ...
使html表格可编辑状态,js+Html实现表格可编辑操作
本文实例为大家分享了js+Html实现表格可编辑操作的具体代码,供大家参考,具体内容如下功能描述:单击页面使单元格td变成可编辑状态,输入内容后,当单元格失去焦点时,保存输入的内容. 点击增加行,在 ...
办公自动化-表格的读写操作-xlrd-xlwt
excel表格结构表格的分层工作簿工作表1 工作表2 工作表3 行1 行2 行3 单元格1 单元格2 单元格3 让表格的列以数字显示行列都变成数字了表格的读操作开始==> 安装xlrd ...
jquery 表格分页等操作实现代码(pagedown，pageup)
jquery 表格分页等操作实现代码(pagedown,pageup) 没什么技术含量,先上图: 思路: 1:获取按键 2:判断当前表格行的位置 HTML结构: 复制代码代码如下: <div ...
WPS表格的常用操作技巧大全
WPS表格的常用操作技巧大全今天读书屋OFFICE网陈飞老师主要分享WPS表格的常用操作技巧,这些技巧相对于EXCEL表格来说,主要讲解:合并相同单元格,合并内容,数字转文本,快速输入当前日期.插入 ...
excel表格汇总怎么操作
今天跟大家分享一下excel表格汇总怎么操作 1.如下图想要快速汇总各个部门平均年龄,首先我们选中数据单元格区域 2.然后点击如下图选项 3.点击[汇总拆分]-选择[汇总多表] 4.点击[二维表] 5 ...
多个excel表格合并一键操作
今天跟大家分享一下多个excel表格合并一键操作 1.打开演示文件,要求将多个表格合并并标注表格来源. 2.首先我们点击下图选项 3.接着我们依次选择[汇总拆分]-[合并多表] 4.勾选[合并后,标注 ...
基于Python的高校勤工俭学工资管理系统——实现对excel表格的数据操作（xwlings库）
基于Python的高校勤工俭学工资管理系统 1 需求概述 1.1 需求分析勤工俭学是指学校组织的或学生个人从事的有酬劳动,用以助学.在我国,许多高校借以对学生进行劳动技术教育,培养正确的劳动观点和态 ...

HTML实现表格rowspan、colspan操作

前言