这节课学习表格的单元格合并。

　　在我们的学习和生活中，经常会见到各式各样的表格。例如：销售报表、电子简历、课程表等等，都是用表格来完成的。我们来看这个课程表案例——这是一个 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个单元格——第一个单元格显示晚自习;第二个单元格就是所有待合并单元格的第一个。 晚自习

　　要给这个单元格添加 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>

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

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

　　打开编辑器中，新建一个 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行的单元格添加一个空格 就可以把行高撑开了。

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

上一篇

关于JavaScript里的Async那些事儿

下一篇

块级元素和内联元素