脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > HTML/Xhtml > table表格拆分合并

HTML中table表格拆分合并(colspan、rowspan)

  发布时间：2021-04-07 16:18:17   作者：YI_DIAN_DIAN   我要评论
这篇文章主要介绍了HTML中table表格拆分合并(colspan、rowspan),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

代码演示 横向合并：

<!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>

运行结果：

这里写图片描述

到此这篇关于HTML中table表格拆分合并(colspan、rowspan)的文章就介绍到这了,更多相关table表格拆分合并内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

相关文章

  • html+css合并表格边框的示例代码

    这篇文章主要介绍了html+css合并表格边框的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习
    2021-03-31

  • table表格使用:nth-child()实现隔行变色与对齐

    在html中，使用table表格展示数据是一种非常方面的途径，有的时候我们希望表格内的数据实现不同的对齐方式，以便符合阅读的习惯，比如日期列居左，数字通常居右对齐
    2020-12-08

  • html 表格单元格的宽度和高度的设置方法

    做网页的时候，经常会碰到表格宽度对不齐的问题，遇到这种问题怎么处理呢？下面小编给大家介绍下html 表格单元格的宽度和高度的设置方法，一起看看吧
    2018-08-09

  • 详解html中表格table的行列合并问题解决

    这篇文章主要介绍了详解html中表格table的行列合并问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来
    2020-07-28

  • 使用html5实现表格实现标题合并的实例代码

    在前端开发中经常会遇到标题合并的需求，今天小编给大家带来了使用html5实现表格实现标题合并的实例代码，感兴趣的朋友跟随小编一起看看吧
    2019-05-13

  • 关于表格table嵌套,边框合并问题的解决方法

    下面小编就为大家带来一篇关于表格table嵌套,边框合并问题的解决方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧
    2016-05-16

  • Dreamweaver单元格怎么合并？

    Dreamweaver单元格怎么合并？Dreamweaver是前端开发常用的软件，有些小站长可能也经常用。有些人还不知道Dreamweaver怎么合并表格内的单元格，需要的朋友可以参考下
    2015-07-07

  • 面试题：三行三列布局、表格有合并且不准嵌套使用表格

    三行三列布局，其中，第一行的第二列和第二行的第二列合并，第三行的第二列和第三列合并，不准嵌套使用表格，下面是具体的实现，希望对大家有所帮助
    2014-05-14

最新评论

关注微信公众号

扫一扫