[练就HTML降龙十八掌]
10-表格属性-下
第一时间查看更新请关注微信公众号“August精彩编程”。
上一篇：HTML表格属性-上
10.1-上一章节我们了解了HTML表格的属性，本章我们讲解HTML表格跨行跨列。
10.2-HTML的表格跨行和跨列如何做呢？我们先讲下什么是跨行跨列，相信大家都很熟悉Office的Excel表格，这个电子表格就有很强大的表格处理功能，也能行列合并，HTML表格跨行跨列也就相当于是表格单元格的合并。我们先介绍跨行跨列的属性再讲解如何跨行跨列。
分别是colspan(夸列属性)和rowspan(跨行属性)，属性的值给一个数字就行了，就是跨行(列)多少行(列)。
我们先看下面这个表格：
如图所示的表格，我们先分析下这个表格，是三行三列对吧，他有跨行也有夸列，我们先不理会跨行和跨列，先把表格的框架写出来：
表格框架就这样写好了，我们给表格2的边框宽度，350px的宽度和150px的高度，并且让表格居中显示，然后呢，表格效果我们到浏览器预览下：
这样我们这个表格的框架就好了。
然后我们先做第一行的两列合并，有小伙伴可能就要问了，两列合并？在同一行为何不上两行合并呢？其实不是的，是列，第一行的合并只有一行，三个单元格，可以理解为每个单元格是一列，所以我们要对后两列进行合并，那我们要在哪里写colspan属性呢？
我们是第一行的第二列开始合并到第一行的第三列，所以我们要从第一行的第二列开始：
代码这样写就可以了，我们给colspan属性2的值，因为我们要合并2个单元格，我们到网页看看效果：
效果怎么会是这样子呢？其实呢，这样显示是正常的，大家思考一下，我们队第二列和第三列合并了，那是不是相当于第一行第二列一个单元格占用了两列的位置，那原有的那一列是不是就被挤出去了？没错，所以会显示不太对劲，那怎么办呢？我们只需要吧多余的那一个单元格去掉，也就是多余的那一列去掉即可，看代码：
然后到浏览器看下效果：
没问题了，第一行第二列和第三列就合并了对吧，那么接下来是第二行第一列和第三行第一列的合并对吧，所以，我们再分析下，我们要对第二行第一列开始合并到第三行第一列对吧，所以我们要从第二行第一列开始就写rowspan属性，由于是2个单元格合并，所以我们要给这个属性值为2：
这样就写好了，我们看看效果：
根据刚才跨列合并我们基本能理解为什么会又多出一格，因为我们第二行第一列跨2列合并，所以第三行第一列就被挤掉了，挤到第三行第二列，于是乎最后面又多出一格，所以我们还需要把第三行删除一列：
OK，效果就出来了！
本章内容先讲到这里，如果喜欢本文章可以搜索微信公众号“August精彩编程”，点击关注，我们会不定期更新各类编程教程。
丸子：写文章不易，分享一个在走呗！
2019-5-10
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
