关于前端:零基础教你学前端23合并单元格

39次阅读

共计 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 行的单元格增加一个空格    就能够把行高撑开了。

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

文章配套视频点我

正文完
 0