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

  • 相关阅读:
    软链接的应用(在同一目录下方便查看日志)
    decimal模块
    python的request包
    jmeter的环境配置
    java交互方式中的同步与异步
    mysql数据库的快捷键
    [LeetCode]Number of Islands
    [LeetCode]Binary Tree Right Side View
    [LeetCode]House Robber
    [微软实习生2014]K-th string
  • 原文地址:https://www.cnblogs.com/tfxz/p/12621774.html
Copyright © 2011-2022 走看看