代码演示 横向合并：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>演示table标记2--单元格合并</title>

        <style type="text/css">

            td{

                text-align: center;

            }

        </style>

    </head>

    <body>

        <table border="1" cellspacing="0" width="50%" height="150">

            <caption>横向合并单元格</caption>

<!--colspan中必须指定要合并的列数目，是两列还是三列等等-->

            <tr> <th colspan="2">姓名和年龄</th> <th>电话</th> </tr>

            <tr> <td>Jack</td> <td>24</td> <td>1351234567</td>  </tr>

            <tr> <td>Tom</td> <td>22</td> <td>1351234567</td>  </tr>

            <tr> <td>Rose</td> <td>22</td> <td>1351234567</td>  </tr>

            <tr> <td>张三</td> <td>25</td> <td>1351234567</td>  </tr>

        </table>

        <br/>

        <table border="1" cellspacing="0" width="50%" height="150">

运行结果：



代码演示 纵向合并：

<table border="1" cellspacing="0" width="50%" height="150">

            <caption>纵向合并单元格</caption>

            <tr><th>班级</t> <th>姓名</th><th>年龄</th> <th>电话</th> </tr>

            <tr><td rowspan="2">601班</td> <td>Jack</td> <td>24</td> <td>1351234567</td>  </tr>

            <tr> <td>Tom</td> <td>22</td> <td>1351234567</td>  </tr>

<!--rowspan中必须指定要合并的列数目，是两行还是三行等等-->

            <tr><td  rowspan="3">602班</td> <td>Rose</td> <td>22</td> <td>1351234567</td>  </tr>

            <tr> <td>张三</td> <td>25</td> <td>1351234567</td>  </tr>

            <tr> <td>李四</td> <td>25</td> <td>1351234567</td>  </tr>

        </table>

    </body>

</html>



原文：https://blog.csdn.net/qq_35415600/article/details/70237433

【HTML】table表格拆分合并（colspan、rowspan）的更多相关文章

  1. table表格中的 colspan rowspan cellpadding cellspacing

    横跨两列的单元格: colspan  属性规定单元格可横跨的列数 colspan="2" <table border="1"> <tr> ...

  2. <table>标签总结（colspan跨列 ，rowspan跨行）

    table标签有些内置属性要设置: <table cellpadding="0" cellspacing="0" border="0" ...

  3. 使用js方法将table表格中指定列指定行中相同内容的单元格进行合并操作。

    前言 使用js方法对html中的table表格进行单元格的行列合并操作. 网上执行此操作的实例方法有很多,但根据实际业务的区别,大多不适用. 所以在网上各位大神写的方法的基础上进行了部分修改以适合自己 ...

  4. js实现table表格相同内容按需合并

    uniteTdCells(tableId) { var table = document.getElementById(tableId); for (let i = 0; i < table.r ...

  5. 普通table表格样式及代码大全(全)

    普通table表格样式及代码大全(全)(一) 单实线边框表格 <TABLE style="BORDER-COLLAPSE: collapse" borderColor=#00 ...

  6. ASP.NET中重复表格列合并的实现方法(转自脚本之家)

    这几天做一个项目有用到表格显示数据的地方,客户要求重复的数据列需要合并,就总结了一下.NET控件GridView 和 Repeater 关于重复数据合并的方法. 这是合并之前的效果: 合并之后的效果图 ...

  7. 自设table表格，获取内容，并经弹出框的url传参,获取结果显示在弹出框,并加载合计

    table表格,选择框 form id="editForm1"> <table class="table_form"> <td > ...

  8. 关于 Table 表格那些三两事儿

    引言 实现下列表格样式,嵌套与form表单中提交信息,为了让自己的表格可以“ 随心所欲 ” 变换自己的形式,需要两个重要的td 属性colspan 列合并 以及 rowspan 行合并 来实现,表格宽 ...

  9. html-3,table 表格标签 tr th td caption thead tbody tfoot 的简单使用

    <!-- table border='1' style="border-collapse:collapse;" border 表格的像素宽度 border-collapse: ...

随机推荐

  1. 大数据分布式存储之Cassandra

    分布式存储区别于集中式数据库存储,通过网络将海量数据存储到企业的各个数据节点(可能分布到不同的数据中心或机架上): 分布式存储需要考虑的问题 元数据管理 元数据是指数据本身的标识,通过元数据能很快的找 ...

  2. Salesforce LWC学习(三十八) lwc下如何更新超过1万的数据

    背景: 今天项目组小伙伴问了一个问题,如果更新数据超过1万条的情况下,有什么好的方式来实现呢?我们都知道一个transaction只能做10000条DML数据操作,那客户的操作的数据就是超过10000 ...

  3. 开源社区合入patch的步骤

    以Ranger项目为例,说明开源社区合入patch的详细步骤. 1.reviews页面下载patch 进入到review页面:https://reviews.apache.org/r/67919/ 点 ...

  4. Swoole 协程简介

    什么是协程 协程可以简单理解为线程,只不过这个线程是用户态的,不需要操作系统参与,创建.销毁和切换的成本都非常低. 协程不能利用多核 cpu,想利用多核 cpu 需要依赖 Swoole 的多进程模型. ...

  5. Appium服务器初始化参数（Capability）

    原文:https://blog.csdn.net/lilongsy/article/details/83010101 appium官方说明:https://appium.io/docs/cn/writ ...

  6. centos7安装wordpress详细教程

    安装之前:建议安装各种软件 [root@localhost ~]# yum -y install wget zip unzip net-tools 一.安装apache 测试环境建议关闭防火墙和SEL ...

  7. 详谈 Java工厂 ---工厂方法模式

    1.前言 有个场景,消费者需要付钱,有可能是使用支付宝.微信.银行卡,那么该怎么选择呢? 是不是想到了使用用if else判断?还是使用switch? 一个地方这样写还好,如果有很多这样的业务,难道都 ...

  8. Echart可视化学习（五）

    文档的源代码地址,需要的下载就可以了(访问密码:7567) https://url56.ctfile.com/f/34653256-527823386-04154f 常见的数据可视化库: D3.js ...

  9. CentOS6.5下安装Hadoop-2.7.3（图解教程）

    注:图片如果损坏,点击文章链接:https://www.toutiao.com/i6627365258090512909/ 已安装好虚拟机(3个节点) YUM源已安装好.系统版本CentOS6.5.j ...

  10. Texture+PBR两种工作流程

    一.导入Texture 1.Inpspector TextureSize 2的n次幂,底层图形学需要,计算更快:不使用2的倍数,系统也会添加像素补全2n: 有最大尺寸限制8k,cubemap最高4k: ...