zoukankan      html  css  js  c++  java
  • 【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>
    

    在这里插入图片描述
    原文:https://blog.csdn.net/qq_35415600/article/details/70237433

  • 相关阅读:
    pgpoolII3.1 的内存泄漏(二)
    iOS 开发的一些网址
    ios开发必备第三方库
    iOS截屏方法
    ios开发第三方库cocoapods安装
    iOS开发知识点总结
    iOS开发文件夹Copy items if needed
    iOS开源库最全的整理
    iOS图标抖动效果
    iOS 加密的3种方法
  • 原文地址:https://www.cnblogs.com/tfxz/p/12621774.html
Copyright © 2011-2022 走看看