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

在我们的学习和生活中，经常会看到各种各样的表格。比如：销售报表、电子简历、课程表等，都是用表格来完成的。让我们看一下这个课程示例——这是一个11行6列的表格。不难发现：表格中的上午和下午，以及晚自习所在的单元格，都是由多个单元格合并而成。有两种类型的单元格合并。第一种：横向合并，又称横向合并。例如Excel中水平合并单元格，需要找到合并单元格的起始位置和单元格结束位置，点击菜单栏中的合并居中，单元格合并完成。这里需要注意的是，横向合并的单元格都是在这一行操作的，也就是说单元格从第一列跨越到第三列，三个单元格合并在一起，合并后的单元格不再显示。第二种：纵向合并，又称纵向合并。比如excel垂直合并单元格，还需要找到合并单元格的起始位置和单元格结束位置，点击菜单栏中的合并居中，单元格合并完成。这里还需要注意：垂直合并的单元格会产生跨行，也就是说单元格从第一行跨越到第三行，三个单元格合并在一起，合并后的单元格不再显示。综上所述，单元格的合并必然导致跨行或跨列。使用html代码，如何实现表格中的单元格跨行跨列？这就需要先了解单元格合并的基本规则！以班级表为例，对于上午和下午两个区域单元格的合并，分别是四行的合并。上午的单元格合并可以看作：上午保留第一行第一个单元格，垂直删除最后三个单元格下午合并单元格，下午保留第一行第一个单元格，垂直删除最后三个单元格，当浏览器最终解析时，它会将保留的单元格拉伸以填充整个空间。用代码实现的时候，早上第一行代码是：tr中包含了6个tds。第二行代码是：trcontains5tds，因为这一行删除了一个td。同样，第三行和第四行代码在tr中也包含了5个tds。那么问题来了，如何替换删除的td呢？我们需要在第一行的第一个td中添加一个属性：rowspan，其值为合并的总行数，这里为4。Rowspan直译为跨越行，引申义就是行合并。这告诉浏览器我的单元格需要垂直占据4个单元格。趁热打铁，下午实现各个cell的合并吧。下午的第一行代码是：tr中包含了6个tds。第二行代码是：tr包含5个td。因为删除了这一行的td，同样，第三、四行代码在tr中也包含了5个tds，然后在第一行的第一个td上加上属性rowspan，值为4，这样下午的单元格合并也是同理，晚自习的合并很容易理解。可以看做：保留第二个cell，横向删除剩下的4个cell。当浏览器解析时，它会拉伸保留的单元格以填满整个空间。用代码实现是：r包含2个cell——第一个cell显示晚自习；第二个单元格是所有要合并的单元格中的第一个。晚自习给这个单元格添加colspan属性，它的值是合并列的总数，这里是5。colspan是columnspan的缩写，直译为spanningcolumns，引申为列合并。这告诉浏览器我的单元格需要水平占据5个单元格。为了巩固理解和记忆，我们再做一次强化练习吧！看这张表，我们快速写下每一行的代码...打开编辑器，创建一个demo_table.html页面。使用英语！使用tab键完成基本代码，创建表格，设置宽度为600，高度为400。设置border边框为1，继续为表格定义cellspacing属性，设置值为0。定义cellpadding属性，值为0。第一行tr包含1个td，colspan属性定义在td上，值为4。/tr>第二行tr包含4个tds，没有任何merge属性定义。第三行tr包含4个td，为第一个td定义rowspan值为2的属性。第四行tr包含3个td，添加rowspan属性给第二个td，值为3。第五行tr包含2td，给第一个td添加colspan属性，值为2。第六行tr包含3个td，没有任何合并属性定义。注意：水平合并，水平跨栏，垂直合并，垂直交叉-行。并且，只能合并水平或垂直相邻的单元格。相邻的单元格不能合并！接下来，我们来实现一个课程表的案例。打开编辑器，新建一个course_table.html页面。使用英文！使用选项卡键自动补全基本代码在body中写Emmet语句：table>tr11>td6按tab键自动补全代码，生成11行6列的表格，为每个tr添加注释，内容是：第一行到第十一行。为表格标签属性定义宽度，宽度等于540(width="540")；定义高度属性，高度等于385(height="385")；然后定义border属性，边框宽度等于1，保存。在浏览器中打开页面，基本表格实现了！为了消除一些空隙，继续给表格添加cellspacing属性，值为0。添加cellpadding属性，值为0。为了让表格显示在浏览器中间，为表格定义一个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属性，并设置背景色为天蓝色，同时定义align属性，取值为center。保存文档。回到浏览器刷新，大家发现效果和例子有些不一样，那么如何统一每行的高度呢？这需要了解css样式。那么现在可以做什么呢？我们可以在第3行到第10行的单元格中加一个空格来扩大行高。回到浏览器，刷新，课程就做好了。点我看文章配套视频