【javaweb】Table带标题,横跨行,横跨列

来源:互联网 发布:部落冲突网络连接错误 编辑:程序博客网 时间:2024/05/24 05:25

1、横跨列效果展示

横跨两列姓名爱好张三唱歌

游泳

代码:

<html>
    <body>
        <table border="1">
            <caption>横跨两列</caption>
                <tr>
                     <th>姓名</th>
                     <th colspan="2">电话</th>
                </tr>
                <tr>
                     <td>张三</td>
                     <td>唱歌</td>
                     <td>游泳</td>
                 </tr>
         </table>
    </body>
</html>


2、横跨行效果展示

横跨两行姓名张三爱好唱歌游泳

代码:

<table border="1">            
        <caption>横跨两行</caption>                
        <tbody>
            <tr>                     
                <th>
                    姓名
                </th>                     
                <td>
                    张三
                </td>                                    
            </tr>                
            <tr>                    
                <th rowspan="2">
                    爱好
                </th>                     
                <td>
                    唱歌
                </td>                
            </tr>                
            <tr>                     
                <td>
                    游泳
                </td>                 
            </tr>         
        </tbody>
    </table>