当前位置:首页 > 经验 >

table表格上下合并(table表格两行合并成一行)

来源:原点资讯(www.yd166.com)时间:2022-10-29 01:01:04作者:YD166手机阅读>>

成长是一辈子的事儿!大家好!我是时问新。分享前端、Python等技术,以及个人成长路上的那些事儿。

表格是可以进行单元格的合并的。

比如下图所示:

table表格上下合并,table表格两行合并成一行(1)

单元格A跨了两列,单元格E跨了两行。这就是单元格的合并。

colspan属性

colspan属性用来设置td或者th的列跨度。

col就是列的意思,span就是跨度的意思。

所以colspan就是表示跨了多少列的属性。

比如下图:

table表格上下合并,table表格两行合并成一行(2)

单元格A横跨了两列,单元格E横跨了三列。这个表格如何实现呢?

代码如下:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>合并单元格</title> <style> table,tr,td{ border-collapse: collapse; } </style> </head> <body> <table border="1" width="400"> <tr> <td colspan="2">A</td> <td>B</td> <td>C</td> </tr> <tr> <td>D</td> <td colspan="3">E</td> </tr> <tr> <td>F</td> <td>G</td> <td>H</td> <td>I</td> </tr> </table> </body> </html>

在浏览器中效果如下:

table表格上下合并,table表格两行合并成一行(3)

所以,一个单元格跨了几列,colspan属性的值就是几。

我们看到上面这个表格:

第一行的小格A,跨了2列,也就是说A一个顶2个单元格,B和C都是正常的1个单元格,2 1 1=4,相当于这一行总共是4个单元格。

第二行的小格E,跨了3列,就是E一个小格顶3个单元格,D是正常的1列,就是1个单元格,1 3=4,相当于这一行总共也是4个单元格。

第三行的F、G、H、I,都是正常的1列,也就是各占一个单元格,1 1 1 1=4,相当于这一行总共也是4个单元格。

明白了吧,每一行所占的单元格总数是一样的,只是某些小格,一个顶几个单元格,这就是colspan属性的作用----合并单元格。colspan属性写在td上

rowspan属性

rowspan属性用来设置td或者th的行跨度。


比如下图所示的表格:


table表格上下合并,table表格两行合并成一行(4)

首页 123下一页

栏目热文

table表格动态怎么设置(table表格不能添加宽度吗)

table表格动态怎么设置(table表格不能添加宽度吗)

大家好,今日继续讲解VBA数据库解决方案的第11讲内容,如何动态的建立数据库。VBA代码数据库解决方案一书写到这里,已经...

2022-10-29 01:07:38查看全文 >>

table怎么复制表格(一键设置table表格)

table怎么复制表格(一键设置table表格)

excel是日常生活中离不开的办公软件,很多情况,用excel都可以轻松搞定,今天将为大家介绍一下,如何把表格复制到另一...

2022-10-29 01:02:26查看全文 >>

table表格的用法(怎样打开table表格)

table表格的用法(怎样打开table表格)

什么是table表格?由一些被称之为单元格的矩形框,按照从左到右从上到下的顺序排列到一起组成的。网页收录降低降低网页搜索...

2022-10-29 00:57:53查看全文 >>

table表格制作教程(怎么用table标签做一个8行表格)

table表格制作教程(怎么用table标签做一个8行表格)

我们继续往下讲述,关于a标签的跳转,我们用到的是href属性,href里面对应的就是我们需要跳转的地址,可以是本地文件的...

2022-10-29 01:01:33查看全文 >>

表格怎么转化为table(excel转化成table)

表格怎么转化为table(excel转化成table)

excel表格转换pdf如何实现?当用户需要打印excel表格的时候可以将其转换为pdf版本,pdf能够完整保留原本的表...

2022-10-29 01:06:00查看全文 >>

table表格怎么左右插入(table表格怎样塞入图片)

table表格怎么左右插入(table表格怎样塞入图片)

安装windows 下载地址:https://dev.mysql.com/downloads/mysql/liunx安装...

2022-10-29 01:19:44查看全文 >>

table表格线样式(table表格折叠)

table表格线样式(table表格折叠)

表格table上的斜线,一般用在首行首列上,这个东西大家肯定都不陌生,在excel打印文档时我们时常都能碰到,那么在ht...

2022-10-29 00:39:24查看全文 >>

table表格的各种属性(table中什么属性设置表格宽度)

table表格的各种属性(table中什么属性设置表格宽度)

点击右上方红色按钮关注“小郑搞码事”,每天都能学到知识,搞懂一个问题!单纯的table应该比CSS还要老,也就是说在出现...

2022-10-29 00:46:17查看全文 >>

table表格怎么设置(怎么在table表格添加一行)

table表格怎么设置(怎么在table表格添加一行)

数据表也称为模拟运算表,是Excel图表的一种元素,它可以在图表的下方显示数据源中的数据。本文将介绍如何使用Spire....

2022-10-29 00:52:11查看全文 >>

table表格线条怎么加上(table去掉表格的横向和竖向边框)

table表格线条怎么加上(table去掉表格的横向和竖向边框)

大部分公司还是需要员工自行整理发票填写报销单,并且打印电子发票后提交给财务才能报销。如果发票多了会很浪费时间,让我们用P...

2022-10-29 01:17:23查看全文 >>

文档排行