代码演示 横向合并：

<!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. pandas tutorial

    目录 Series 利用dict来创建series 利用标量创建series 取 Dataframe 利用dict创建dataframe 选择 添加列 列移除 行的选择, 添加, 移除 Panel B ...

  2. .NET 云原生架构师训练营（ASP .NET Core 整体概念推演）--学习笔记

    演化与完善整体概念 ASP .NET Core 整体概念推演 整体概念推演到具体的形式 ASP .NET Core 整体概念推演 ASP .NET Core 其实就是通过 web framework ...

  3. JDK httpClient 详解（源码级分析）——概览及架构篇

    1. 前言 2018年9月,伴随着java 11的发布,内置的httpclient正式登上了历史的舞台.此前,JDK内置的http工具URLConnection性能羸弱,操作繁琐,饱受诟病,也因此令如 ...

  4. Linux压缩和解压类

    gzip/gunzip gzip 文件:压缩文件为.gz gunzip 文件:解压文件 注: 1. 只能压缩和解压文件 2. 只是将hello.txt压缩成hello.txt.gz,并没有改变存储位置 ...

  5. 【MySQL作业】DDL 和 DML——美和易思使用 DML 新增和更新表数据应用习题

    点击打开所使用到的数据库>>> 1.添加 easyShopping 客户数据. insert into customer values('abc111','111',' 刘一鸣 ', ...

  6. 每天学一点——python用户的交互、格式化输出与基础运算符运用

    用户交互 input输入 input接收的数据都是字符串类型 如下图 output输出 还可以相加 换行符 想让他们隔行排列的话就可以这样(如图) 在想各行的开头前面加上\n即可 那若是想将两个输出的 ...

  7. MATLAB 右键该文件不存在或者SIMULINK打开后仿真器件报错

    错误示例: 提示是否创建文件 并且会提示某某模块或者某某文件未找到not found 原因: .m文件不存在,是因为所打开的文件还并没有添加进matlab的搜索目录,或者是需要.m文件运行后生成的 某 ...

  8. HDU ACM 8.13 T2 的 O(m)做法

    前言 由于本人比较拉所以看起来很啰嗦,将就看就好. 题目大意 \(n\)种包,每个包里面有一大一小两个球,选小球的代价是\(1\),大球的代价是\(2\),可以都不选,若一次性买两个包,则可以优惠\( ...

  9. python 插入mysql数据库字符串中含有单引号或双引号报错

    出现问题场景:使用mysql数据库管理接口测试用例,新增接口用例时,传入的paras内容,有多层嵌套的时候,就会有["]双引号括住[']单引号的情况,可能在插入单双引号的数据到数据库的时候, ...

  10. linux 之 expect 交互操作（自动输入密码）

    场景 需要实现执行一个命令,并自动输入密码. 实现 通过expect命令实现 spawn               交互程序开始后面跟命令或者指定程序expect               获取匹 ...