共计 3090 个字符，预计需要花费 8 分钟才能阅读完成。
在咱们的学习和生存中，常常会见到各式各样的表格。例如：销售报表、电子简历、课程表等等，都是用表格来实现的。咱们来看这个课程表案例——这是一个 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 行的单元格增加一个空格 就能够把行高撑开了。
回到浏览器，刷新，课程表就做好了。
文章配套视频点我
