零基础教你学前端——23、合并单元格

在我们的学习和生活中，经常会见到各式各样的表格。例如：销售报表、电子简历、课程表等等，都是用表格来完成的。我们来看这个课程表案例——这是一个 11 行 6 列的表格，不难发现：表格中的上午和下午，以及晚自习所在的单元格，都是由多个单元格合并而成的。

单元格合并分为两种。第一种：横向合并，也可以称之为水平合并。例如，在excel中水平合并单元格，需要找到合并单元格的开始位置和单元格的结束位置，点击菜单栏中的合并并居中，单元格合并完成。这里需要注意的是：水平合并的单元格均在本行中操作，意味着单元格从第一列跨到了第三列，三个单元格合并到了一起，被合并的单元格不再显示。第二种：纵向合并，也可以称之为垂直合并。例如，在excel中垂直合并单元格，也需要找到合并单元格的开始位置和单元格的结束位置，点击菜单栏中的合并并居中，单元格合并完成。这里也需要注意：垂直合并的单元格，产生了跨行，意味着单元格从第一行跨到了第三行，三个单元格合并到了一起，被合并的单元格也不再显示。综上所述，单元格的合并必定产生跨行或者跨列。使用 html 代码，如何实现表格中的单元格跨行和跨列呢？这需要首先要了解单元格合并的基本规则！以课程表为例，对于上午下午两个区域单元格的合并，分别都是四个行的合并。上午各单元格的合并可以看做是：保留上午里第一行第一个单元格，纵向删除后三个单元格    下午各单元格的合并，保留下午里第一行第一个单元格，纵向删除后三个单元格，最后浏览器解析时，会把保留的单元格拉伸铺满整个空间。在用代码实现时，上午的第一行代码为：tr 里 包含 6个 td。    第二行代码为：tr 里包含 5个 td，因为这一行有一个td删除了。同样，第三行和第四行代码同样都是 tr 里包含 5个 td。

那么问题来了，被删除的td 怎么来补位呢 ？我们需要在第一行第一个 td 里添加属性 ：rowspan，它的值就是合并行的总数，这里就是 4。rowspan 直译为跨行，引申的意思就是行合并。这样就告诉浏览器，我这个单元格纵向需要占据 4 个单元格的空间。

趁热打铁，我们再来实现一下下午各单元格的合并。下午的第一行代码为：tr 里包含 6个 td。   第二行代码为：tr 里包含 5个 td。因为这行的 td 删除了，同样，第三行和第四行代码同样都是 tr 里包含 5个 td，然后在第一行第一个 td 里添加属性 rowspan，值为 4 ，这样下午单元格合并也实现了同理，晚自习的合并也就好理解了，它可以看做是：保留第二个单元格，横向删除剩余的4个单元格。浏览器解析时，会把保留的单元格拉伸铺满整个空间。用代码实现就是： r 里包含 2个单元格——第一个单元格显示晚自习；第二个单元格就是所有待合并单元格的第一个。   <tr><td>晚自习</td><td></td></tr>    要给这个单元格添加 colspan 属性，它的值就是合并列的总数，这里就是 5。colspan 是 column span 的缩写，直译为跨列，引申的意思就是列合并。这样就告诉浏览器，我这个单元格横向需要占据 5 个单元格的空间。

为了夯实理解和记忆，我们再做一个强化练习！
看这个表格，我们来快速的写出每一行的代码......
打开编辑器，新建一个 demo_table.html  页面。
使用英文 ! 配合tab键，补全基础代码，创建table表格，设置width宽度，值为600，height高度，值为 400 。

设置 border边框为1， 给 table 继续定义 cellspacing 属性，值为 0。定义 cell padding属性，值为0。

第一行 tr 里包含 1 个td，td 上定义 colspan 属性，值为 4。
<tr><td  colspan='4'></td></tr>

第二行 tr 里包含 4 个 td，没有任何合并属性定义。
 <tr><td></td> <td></td> <td></td> <td></td> </tr>

第三行 tr 里包含 4 个 td，给第一个 td 定义  rowspan 属性，值为2。
<tr><td  rowspan='2'></td> <td></td> <td></td> <td></td> </tr>

第四行 tr 里包含 3 个 td，给第二个 td 添加  rowspan 属性，值为3。  <tr> <td></td> <td rowspan='3'></td> <td></td> </tr>

第五行 tr 里包含 2 个 td，给第一个 td 添加  colspan 属性，值为2 。<tr> <td colspan="2></td> <td></td> </tr>

第六行 tr 里包含 3个 td，没有任何合并属性定义。

 <tr> <td></td><td></td><td></td> </tr>

需要注意：水平合并，横向跨列 ，垂直合并，纵向跨行。并且，只能横向或纵向相邻单元格合并，不相邻的单元格是不能合并的！

下面，我们来动手实现一下课程表案例吧。

打开编辑器中，新建一个 course_table.html  页面。
使用英文 ! 配合tab键自动补全基础代码  

在 body里书写 Emmet 语句：   table>tr11>td6   按下tab 键自动补全代码，

一个 11 行 6 列的表格就生成了。为每一个 tr 添加注释，内容为：第一行   到   第十一行。给 table 标签定义 width属性，宽度等于540   (width="540")  ；定义 height 属性，高度等于385 (height="385")  ；再定义 border属性，边框宽度等于 1 ，保存。在浏览器中打开页面，基本的表格实现了！

为了消除一些间距，给 table 继续添加 cellspacing 属性，值为 0。添加 cellpadding属性，值为0。为了让表格在浏览器中间位置显示，再给 table 定义 align属性，值为 center。保存。

回到浏览器，刷新，准备工作完成！案例中，第 3 行到第 6 行进行了纵向跨行合并。回到编辑器，找到第3行 第一个单元格 td，给它定义 rowspan 属性，属性值设置成4，并且把被合并掉的第4、5、6行中的第一个 td 删除掉。保存。

回到浏览器，刷新，第一组纵向单元格合并完成。

 

返回编辑器，找到第7行 第一个单元格td，给它定义 rowspan 属性，属性值设也置成4，把第8、9、10行中的第一个单元格删除掉。保存。

回到浏览器，刷新，第二组纵向单元格合并也完成了。

案例中，最后一行的第2到第6个单元格也合并了。回到编辑器，给最后一行的第二个 td 定义 colspan 属性，属性值设置成5，并且把该行的第3、4、5、6个单元格删除。保存。

回到浏览器，刷新，完成了横向单元格的合并！

返回编辑器，在表格的单元格中添加对应的文本 。回到案例中，表头字体加粗，背景为深蓝色，早自习、上午、下午、晚自习的单元格背景为浅蓝色，主体区是隔行显示浅蓝色背景的斑马线效果。我们来给表格添加背景色。

回到编辑器，将第一行中的 td 标签换成 th 标签，这样文本就会加粗并且在单元格里居中，然后给第一行 tr 定义 bgcolor 属性，背景色定义为 deepskyblue，深天蓝色。

给第2、4、6、8、10行 tr 定义 bgcolor 属性，背景色设置为 skyblue，天蓝色。
给上午、下午、晚自习这三个 td 单元格定义 bgcolor 属性，背景色也设置为 skyblue，同时定义align 属性，值为 center。保存文件。

回到浏览器，刷新，大家发现和案例的效果有些区别，那怎样把每一行 的高度统一呢？这需要用到css样式的知识了。那现在有什么办法可以实现呢？我们可以给第3到10行的单元格添加一个空格    就可以把行高撑开了。

回到浏览器，刷新，课程表就做好了。 

文章配套视频点我