代码演示 横向合并：

<!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. 【MySQL作业】MySQL函数——美和易思系统信息函数和加密函数应用习题

    点击打开所使用到的数据库>>> 1.显示当前 MySQL 服务器的版本信息和登录信息. MySQL 系统信息函数 version() 用于返回当前 MySQL 的版本号," ...

  2. C# 执行Javascript脚本

    前一阵子使用C#编写SCXML状态机,需要解析EMCScript表达式,使用了Jint库(https://github.com/sebastienros/jint/),当时感觉与C#之间的数据转换不是 ...

  3. CSS基础 阴影相关属性设置

    一.字体阴影属性名:text-shadow:水平偏移量 垂直偏移量 模糊度 阴影颜色: html代码: <div>农夫山泉有点甜</div>css代码: div{ font-s ...

  4. 初识python： 类练习 - 随机数生成

    1.提取指定值之间的指定个数的随机整数. 2.继承生成随机数的类,打印"坐标". 生成随机数类: import random class GetRadndom(object): ' ...

  5. Pytest_跳过用例的执行（7）

    pytest跳过用例执行的用法与unittest跳过用例大致相同. pytest跳过用例的方法如下: pytest.mark.skip(reason):无条件用例.reason是跳过原因,下同. py ...

  6. Flask_Flask-Mail邮件扩展（十三）

    在开发过程中,很多应用程序都需要通过邮件提醒用户,Flask的扩展包Flask-Mail通过包装了Python内置的smtplib包,可以用在Flask程序中发送邮件. Flask-Mail连接到简单 ...

  7. nginx中请求大小的限制的设置

    Nginx对客户端请求缓冲区大小有个默认限制,如果超过了该值(比如在上传大文件时),会报500错误. 只需要设置三个值,就可以解决该问题: 1. client_body_buffer_size: 指定 ...

  8. layui type:2 iframe子页面向父页面传值

    需求: 选择子页面表格中的radio或者双击该行,得到的该行数据传到父页面,由父页面渲染. 网上的各种方法都用了,父页面就是获取不到子页面传的值,过了一晚上,睡了一觉,柳暗花明又一村. layui t ...

  9. Redis介绍一

    一.五中数据类型 String: 字符串 Hash: 散列 List: 列表 Set: 集合 Sorted Set: 有序集合 Redis 发布订阅 Redis 发布订阅 (pub/sub) 是一种消 ...

  10. echarts-gl初体验：使用echarts-gl实现3D地球

    首先我们要下载引入echarts.js和echarts-gl.js 有需要的自己拿资源哈 链接:https://pan.baidu.com/s/1J7U79ey-2ZN4pjb7RTarjg 提取码: ...