不灭的焱

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

作者:php-note.com  发布于:2020-06-20 10:07  分类:HTML/CSS/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>