曲径通幽论坛

标题: 表格的跨行(rowspan)与跨列(colspan) [打印本页]
作者: beyes    时间: 2015-12-17 23:35
标题: 表格的跨行(rowspan)与跨列(colspan)
跨行，即跨行合并单元格，如将第 1 行和第 2 行的两个单元格合并。

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

假设现在有如下代码所示的单元格：
  1. <table border="1" width='600px'>
  2.         <tr>
  3.                 <td>姓名</td> <td>密码</td> <td>手机</td> <td>电话</td>
  4.         </tr>

  6.         <tr>
  7.                 <td>张三</td> <td>222222</td> <td>13800138000</td> <td>010-10101010</td>
  8.         </tr>


  11. </table>
复制代码

它很普通，样子为：
[attach]4230[/attach]


现在打算将第 2 行中的手机和电话号码都合并为一个号码，此时就需要跨列合并，需要修改的代码如下：
  1. <tr>
  2.                 <td>张三</td> <td>222222</td> <td colspan="2">13800138000</td>
  3.         </tr>
复制代码

效果如下所示：
[attach]4231[/attach]


下面演示跨行操作。跨行操作前的代码如下：
  1. <table border="1" width='600px'>
  2.         <tr>
  3.                 <td>姓名</td> <td>密码</td> <td>手机</td> <td>电话</td>
  4.         </tr>

  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>



  15. </table>
复制代码


效果为：
[attach]4232[/attach]


现在将上图的两个 “张三” 都合并起来，修改代码如下：
  1. <table border="1" width='600px'>
  2.         <tr>
  3.                 <td>姓名</td> <td>密码</td> <td>手机</td> <td>电话</td>
  4.         </tr>

  6.         <tr>
  7.                 <td rowspan="2">张三</td> <td>222222</td> <td colspan="2">13800138000</td>
  8.         </tr>

  10.         <tr>
  11.                  <td>222222</td> <td colspan="2">13800138000</td>
  12.         </tr>

  14. </table>
复制代码

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








欢迎光临 曲径通幽论坛 (http://www.groad.net/bbs/) Powered by Discuz! X3.2