在前端开发中, html 表单是经常被使用到的, 表单可以直观的把信息展现出来, 有很好的交互功能; 在表单中可以把同一类的信息合并在一起显示, 这就需要把同一类的单元格合并在一起, 那么怎样才能合并单元格?
想要合并 table 单元格, 可以使用 colspan 属性合并列单元格, 使用 rowspan 属性合并行单元格. colspan 属性规定单元格可横跨的列数, rowspan 属性规定单元格可横跨的行数.
下面通过实例来看看如何合并 table 单元格.
我们先建立一个简单的表单:
- <table border="1" cellspacing="0" width="50%" height="150">
- <tr>
- <th > 班级 </th>
- <th > 姓名 </th>
- <th > 年龄 </th>
- <th > 电话 </th>
- </tr>
- <tr>
- <td>601 班 </td>
- <td>Jack</td>
- <td>24</td>
- <td>1351234567</td>
- </tr>
- <tr>
- <td>601 班 </td>
- <td>Tom</td>
- <td>22</td>
- <td>1351234567</td>
- </tr>
- <tr>
- <td>602 班 </td>
- <td>Rose</td>
- <td>22</td>
- <td>1351234567</td>
- </tr>
- <tr>
- <td>602 班 </td>
- <td > 张三 </td>
- <td>25</td>
- <td>1351234567</td>
- </tr>
- <tr>
- <td>602 班 </td>
- <td > 李四 </td>
- <td>25</td>
- <td>1351234567</td>
- </tr>
- </table>
效果图:
表中的信息都是一列一列的显示出来, 其实表单中只有两个班级, 我们可以把多余重复的信息合并在一起, 这样可以显得表单简洁.
表单的单元格合并有两种形式: 纵向合并和横向合并, 我们来看看 CSS 是怎样实现这两种合并单元格的:
1,CSS 纵向合并 table 表格单元格
rowspan 属性用在 td 标签中, 用来指定单元格纵向跨越的行数.
例: 我们可以把两个显示 601 班的单元格合并在一起, 三个显示 602 班的单元格合并在一起:
- <table border="1" cellspacing="0" width="50%" height="150">
- <tr>
- <th > 班级 </th>
- <th > 姓名 </th>
- <th > 年龄 </th>
- <th > 电话 </th>
- </tr>
- <tr>
- <td rowspan="2">601 班 </td><!--rowspan="2" 纵向合并两个单元格 -->
- <td>Jack</td>
- <td>24</td>
- <td>1351234567</td>
- </tr>
- <tr>
- <td>Tom</td>
- <td>22</td>
- <td>1351234567</td>
- </tr>
- <tr>
- <td rowspan="3">602 班 </td><!--rowspan="3" 纵向合并三个单元格 -->
- <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>
效果图:
rowspan="2" 表示从设置的 td 单元格开始向下合并两个单元格 (本身一个, 加上另外一个);rowspan="3" 表示从设置的 td 单元格开始向下合并三个单元格 (本身一个, 加上另外两个).
2,CSS 横向合并 table 表格单元格
colspan 属性用在 td 标签中, 用来指定单元格横向跨越的列数.
例: 我们可以把显示姓名和年龄两个单元格放在一起显示为姓名和年龄:
- <table border="1" cellspacing="0" width="50%" height="150">
- <tr>
- <th > 班级 </th>
- <th colspan="2"> 姓名和年龄 </th><!--colspan="2" 横向合并两个单元格 -->
- <th > 电话 </th>
- </tr>
- <tr>
- <td rowspan="2">601 班 </td><!--rowspan="2" 纵向合并两个单元格 -->
- <td>Jack</td>
- <td>24</td>
- <td>1351234567</td>
- </tr>
- <tr>
- <td>Tom</td>
- <td>22</td>
- <td>1351234567</td>
- </tr>
- <tr>
- <td rowspan="3">602 班 </td><!--rowspan="3" 纵向合并三个单元格 -->
- <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>
效果图:
colspan="2" 表示自左向右合并两个单元格.
来源: http://www.css88.com/qa/css3/12496.html