代码演示 横向合并：

<!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. Log4j使用的方法

    一.什么是log4j Log4J是Apache的一个开放源代码的项目.通过使用Log4J,程序员可以控制日志信息输送的目的地,包括控制台,文件,GUI组件和NT事件记录器,也可以控制每一条日志的输出格 ...

  2. AUGMIX : A SIMPLE DATA PROCESSING METHOD TO IMPROVE ROBUSTNESS AND UNCERTAINTY

    目录 概 主要内容 实验的指标 Dan Hendrycks, Norman Mu,, et. al, AUGMIX : A SIMPLE DATA PROCESSING METHOD TO IMPRO ...

  3. Java初学者作业——编写 Java 程序，让用户输入指定数字实现产生随机数。

    返回本章节 返回作业目录 需求说明: 编写 Java 程序,让用户输入指定数字实现产生随机数.运行效果如下: 实现思路: 定义两个变量start和end来保存起始和结束值. 通过结束值减起始值得到变化 ...

  4. 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开，在页面的列表中有若干项，列表的每项中有一个二级列表，二级列表默认为隐藏状态。点击列表的项，切换二级列表的显示或隐藏状态

    查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...

  5. 《MySQL数据操作与查询》- 维护学生信息、老师信息和成绩信息 支持按多种条件组合查询学生信息和成绩信息

    综合项目需求 一.系统整体功能 系统需支持以下功能: 维护学生信息.老师信息和成绩信息 支持按多种条件组合查询学生信息和成绩信息 学生 Student(id,班级id,学号,姓名,性别,电话,地址,出 ...

  6. winform 自定义自动完成控件

    做过前端的朋友肯定很清楚自动完成控件,很多优秀的前端框架都会带有自动完成控件,同样的,winform也有,在我们的TextBox和ComboBox中,只需要设置AutoCompleteSource属性 ...

  7. Mysql 性能优化记录

    记录工作中有关mysql性能优化的心得和经验 1. where条件中的字段 尽量建立索引 2. where条件中的查询条件等号左边尽量不做处理 如查询日期相关字段,尽量不使用date_fromat 或 ...

  8. Gitlab如何进行备份恢复与迁移？

    https://blog.csdn.net/ouyang_peng/article/details/77070977 1.Gitlab 创建备份 1.1 创建备份文件 首先我们得把老服务器上的Gitl ...

  9. PPT2010制作充电动画

    原文: https://www.toutiao.com/i6492264647318569486/ 启动PPT2010,新建一张空白幻灯片 选择"插入"选项卡,"插图&q ...

  10. POJCrossing River

    http://poj.org/problem?id=1700贪心问题 对于一个安排,怎么样是最小的?首先关于花费,对于每次运输,以最节约的方式运输.两种情况,一种最轻的作为往返,另外 一种是每次带一个 ...