PHP笔记网

革命尚未成功,同志仍须努力下载JDK17

作者:Albert.Wen  添加时间:2020-06-20 10:14:44  修改时间:2024-11-03 04:24:24  分类:05.前端/Vue/Node.js  编辑

代码演示 - 横向合并:

效果图:

相关代码:

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

 代码演示 - 纵向合并:

效果图:

相关代码:

<table>
    <caption>纵向合并单元格</caption>
    <tr>
        <th>班级</th> 
        <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>