表格的跨行(rowspan)与跨列(colspan)

beyes

跨行，即跨行合并单元格，如将第 1 行和第 2 行的两个单元格合并。

跨列，即跨列合并单元格，如将第 1 行中的第 2 和第 3 个列的单元格合并。

假设现在有如下代码所示的单元格：

1. <table border="1" width='600px'>
   
2.         <tr>
   
3.                 <td>姓名</td> <td>密码</td> <td>手机</td> <td>电话</td>
   
4.         </tr>
   
5. 
   
6.         <tr>
   
7.                 <td>张三</td> <td>222222</td> <td>13800138000</td> <td>010-10101010</td>
   
8.         </tr>
   
9. 
   
10. 
    
11. </table>
    

复制代码

它很普通，样子为：



现在打算将第 2 行中的手机和电话号码都合并为一个号码，此时就需要跨列合并，需要修改的代码如下：

1. <tr>
   
2.                 <td>张三</td> <td>222222</td> <td colspan="2">13800138000</td>
   
3.         </tr>

复制代码

效果如下所示：



下面演示跨行操作。跨行操作前的代码如下：

1. <table border="1" width='600px'>
   
2.         <tr>
   
3.                 <td>姓名</td> <td>密码</td> <td>手机</td> <td>电话</td>
   
4.         </tr>
   
5. 
   
6.         <tr>
   
7.                 <td>张三</td> <td>222222</td> <td>13800138000</td> <td>010-10101010</td>
   
8.         </tr>
   
9.          <tr>
   
10.                 <td>张三</td> <td>222222</td> <td>13800138000</td> <td>010-10101010</td>
    
11.         </tr>
    
12. 
    
13. 
    
14. 
    
15. </table>
    

复制代码

效果为：



现在将上图的两个 “张三” 都合并起来，修改代码如下：

1. <table border="1" width='600px'>
   
2.         <tr>
   
3.                 <td>姓名</td> <td>密码</td> <td>手机</td> <td>电话</td>
   
4.         </tr>
   
5. 
   
6.         <tr>
   
7.                 <td rowspan="2">张三</td> <td>222222</td> <td colspan="2">13800138000</td>
   
8.         </tr>
   
9. 
   
10.         <tr>
    
11.                  <td>222222</td> <td colspan="2">13800138000</td>
    
12.         </tr>
    
13. 
    
14. </table>

复制代码

上面代码，将第 2 个 <td>张三</td> 去掉，然后第 1 处中的张三改为 <td rowspan="2">张三</td> ，效果如下图所示：