百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

Markdown表格合并_markdown表格合并单元格

myzbx 2025-02-17 13:16 18 浏览

Markdown表格

Markdown表格的语法如下:

 |   |   |   |   |
 | - | - | - | - |
 |   |   |   |   |

显示效果如下:

姓名

性别

年龄

生日

张小凡

13

-

陆雪琪

16

-

碧瑶

15

-

我们可以:在第二行,也就是表头下面的一行,去规定它是左对齐,右对齐,或者是居中,分别是:--::-:,除此之外,就没有其他的控制的方式了,markdown对于表格的控制是比较弱的,比如说表格的合并,markdown自身就无能为力了,好在它支持html的语法,我们也可以实现表格的控制。

姓名

性别

年龄

生日

张小凡

13

-

陆雪琪

16

-

碧瑶

15

-


HTML表格

html之中,使用table作为表格

table表示表格,里面的元素有表头,行,单元格

th表示表头,tr表示行,td表示单元格

普通的HTML表格

第1列

第2列

第3列

第4列

1

2

3

第4列

1

2

3

第4列

1

2

3

第4列

1

2

3

第4列

第1列第2列第3列第4列
123第4列
123第4列
123第4列
123第4列

同一行的单元格合并

同一行的单元格要合并,那就是一个单元格,占多个单元格的位置,位置是span,就可以使用colspan = "x",来表示所在的单元格占多少个格子。

第1列

第2列

第3列

第4列

1

2

3

第4列

1

第4列

1

2

3

第4列

1

2

3

第4列

第1列第2列第3列第4列
123第4列
1第4列
123第4列
123第4列

同一列的单元格合并

同一列的单元格要合并,那就是一个单元格,占多行单元格的位置,位置是span,就可以使用rowspan = "x",来表示所在的单元格占多少个列方向的单元格。

第1列

第2列

第3列

第4列

1

2

3

第4列

1

2

3

第4列

1

2

3

1

2

3

第1列第2列第3列第4列
123第4列
123第4列
123
123

行和列同时合并

这个时候,就需要把colspan = "x"rowspan = "x",同时使用了,下面是二者没有关系的一种情况。

第1列

第2列

第3列

第4列

1

2

3

1

2

3

第4列

1

2

3

1

2

3

第1列第2列第3列第4列
123
123第4列
123
123

下面是二者之间相互关联的一种情况。

第1列

第2列

第3列

第4列

1

2

3

第4列

1

2

1

1

第1列第2列第3列第4列
123第4列
12
1
1

表格实战测试

分析:主要是纵向的表格的合并,文字放置在表格的中间,表格头背景颜色设为粉红色,然后表头文字是红色。我们开始实现。

1.先去处理第一列的单元格,占据3个单元格,整体的显示效果和代码如下:

派别

姓名

年龄

性别

武器

1

2

3

4

5

2

3

4

5

2

3

4

5

派别姓名年龄性别武器
12345
2345
2345

2.然后处理第4列的两个单元格,也是纵向的,合并的单元格,会自动占据它所合并的方向的位置,相应的位置,计算的时候会在下一行或者相邻的列里面也计算在内,它下面的一个元素,自动跟在这个“隐藏元素”的后面比如青云山,男这两个元素的位置,就体现了这个原则。整体的显示效果和代码如下:

派别

姓名

年龄

性别

武器

青云山

2

3

5

2

3

5

2

3

4

5

1

2

3

4

5

派别姓名年龄性别武器
青云山235
235
2345
12345

3.然后我们实现居中,使用style,对于整个table设置,也可以对某个tr,或者某一个td使用,越小的控制,起作用的优先级越高,比如第2行,设置向右对齐,它的优先级高于整个table的设置。整体的显示效果和代码如下:

派别

姓名

年龄

性别

武器

青云山

2

3

5

2

3

5

2

3

4

5

1

2

3

4

5

派别姓名年龄性别武器
青云山235
235
2345
12345

4.实现其他的表格合并的效果,整体的显示效果和代码如下:

派别

姓名

年龄

性别

武器

青云山

2

3

5

2

3

5

2

3

4

5

1

2

3

5

鬼王宗

2

3

5

2

3

4

5

派别姓名年龄性别武器
青云山235
235
2345
1235
鬼王宗235
2345

5.填充数据

派别

姓名

年龄

性别

武器

青云山

张小凡

16

烧火棍

曾书书

17

轩辕

陆雪琪

18

天琊

天音寺

普智

500

嗜血珠

鬼王宗

鬼王

1000

朱雀印

碧瑶

15

伤心花

派别姓名年龄性别武器
青云山张小凡16烧火棍
曾书书17轩辕
陆雪琪18天琊
天音寺普智500嗜血珠
鬼王宗鬼王1000朱雀印
碧瑶15伤心花

6.修改表头样式,仍然是使用style,修改背景色background-color,字体颜色color就可以了。

派别

姓名

年龄

性别

武器

青云山

张小凡

16

烧火棍

曾书书

17

轩辕

陆雪琪

18

天琊

天音寺

普智

500

嗜血珠

鬼王宗

鬼王

1000

朱雀印

碧瑶

15

伤心花

派别 姓名 年龄 性别 武器
青云山张小凡16烧火棍
曾书书17轩辕
陆雪琪18天琊
天音寺普智500嗜血珠
鬼王宗鬼王1000朱雀印
碧瑶15伤心花

以上就是实战环节,完成了既定的目标的表格的单元格合并与样式的改造,over!


typora插件

据说VLOOK可以,但是我测试了之后,不行,合并单元格功能无法正常使用。


tables generator

如果你没有html基础,或者是觉得麻烦,或者是不太想去写表格,没关系,也有办法,直接生成,按照目标样式自定义去合并,设置样式,然后生成,拷贝到typora之中即可!!!方便快捷,省时省力!!!只需浏览器收藏url:
https://www.tablesgenerator.com/html_tables
,因为我们现在实现表格的合并,是通过html的语法来完成的,而tablesgenerator网站可以帮我们实现表格的合并,我们只需要复制其中的代码,然后即可。

相关推荐

HTML5学习笔记-绘制变形图形之组合效果

绘制组合效果的图形将一个图形绘制在另一个图形之上,图形效果会受制于图形的绘制顺序,可利用globalCompositeOperation属性组合图形,前面绘制贝塞尔曲线时,我就已经用过这个属性了,绘制...

安卓自定义 View 进阶:贝塞尔曲线(上)

在上一篇文章Path之基本图形中我们了解了Path的基本使用方法,本次了解Path中非常非常非常重要的内容-贝塞尔曲线。一.Path常用方法表为了兼容性(偷懒)本表格中去除了在API21(即安卓...

使用Python绘制迷人的二维心形曲线和三维马鞍面

Python是一个功能强大的编程语言,不仅可以处理数据分析和机器学习任务,还能够创建美观的图形和图像。在这篇博客中,我们将学习如何使用Python的matplotlib库和PyQt5框架来绘制二维心形...

年度最爱的朋友圈封面,太好玩了吧

哈喽~大家早上好呀!不知道大家有没有这种想法:我可以不发朋友圈,但我会换上自己喜欢又好看的朋友圈封面、头像或者签名。而最近我就发现了一个超火的涂鸦玩法,简直实现了朋友圈创作自由~再也不用去网上找这些有...

两英寸中的沿途风景(两英寸有多高?)

画家DinaBrodsky将这个项目命名为“小人国自行车旅行指南”,她把自己长达10年的骑行所见记忆,几乎全部浓缩在仅有两英寸直径的圆形画布上。这些作品中的景致都是真实存在的,而且完全是一个骑行者眼...

小白也能学会的Q萌插画头像教程,再也不怕撞头像了

你有没有这样的烦恼呢?想学插画,买了iPad,安装了Procreate,结果找不到教程,不会画,连最简单的头像也画不出来,这可咋办?别慌!今天同年美术就来教大家用Procreate画超简单的Q萌头像。...

篮球元素创意logo设计(篮球元素创意logo设计理念)

在三维空间与二维平面交汇处,篮球标志设计演绎着独特的视觉辩证法。这项运动特有的力学轨迹、集体意志与文化基因,在圆形画布上构建出超越图形本身的能量场域。当设计师的思维触角穿透表象的运动符号,触及篮球运动...

高颜来袭!假如井盖会说话,假如墙壁有生命

一群人在地上、墙上涂涂画画,竟然是在上课?没错!一直以来,东北林业大学的手绘创作与文化课以其独特趣味性和实践性深受大家喜爱,可谓一课难求。在这门课上,同学们化身“神笔马良”,用画笔勾勒世界,将粉墨挥洒...

画布上的玉色缪斯:詹姆斯·桑特笔尖的永恒柔光

詹姆斯·桑特(JamesSant),一位在英国维多利亚时代享有盛誉的肖像画家,他的艺术生涯跨越了19世纪的大部分时间,从1820年出生至1916年离世,见证了英国艺术史的辉煌篇章。桑特不仅以其精湛的...

可变数据打印软件如何制作圆形标签序列号

今天给小伙伴们分享一下在可变数据打印软件中是如何制作圆形标签序列号的具体制作步骤的哦。在可变数据打印软件中制作标签的大致步骤是先设置标签纸张大小,在绘制标签内容,标签制作完成,点击软件打印预览,预览没...

伞上绘梦:小艺术家们的创意绽放——阜阳阜南三小手绘伞主题活动

运营总监:鲍安常LJ0072025年4月7日整理操场上,彩笔沙沙学生们围坐,笑语喧哗透明雨伞静静躺下等一场春天的魔法画笔不停,梦想在挥洒伞面成了春天的家待雨落下,撑起它让春天,在伞中开遍天涯在阜南三小...

《photoshop教程》ps设计圆形色彩相位图效果图

本文教大家用PS画色轮图,色轮图就是色彩相位图,它完整表现了色相环360度的全部颜色,PS的色相/饱和度命令依据色轮图而设计,不过在色相/饱和度命令中,你看到的不是色轮,而是色轮的另一种形式--色条,...

揭秘!餐盘上那个小圆坑,99%的人用错了?

餐盘中的小圆形区域,常让人在用餐时产生好奇——这个既不像分隔格又不像装饰的凹陷,究竟有何用途?通过梳理设计历史、功能演变与大众解读,我们可以发现,这一设计不仅是实用主义的产物,更承载了饮食文化与生活智...

图片四个角怎么能做成圆弧角?这几种制作方法操作起来很简单!

图片四个角怎么能做成圆弧角?在当今这个视觉内容爆炸的时代,图像不仅仅是信息的载体,更是情感交流的桥梁,深刻地渗透进我们的日常生活,然而,一个微妙却常被边缘化的观察是,传统图片那尖锐的直角边缘,在不经意...

标签制作软件如何快速制作圆形合格证标签

今天给小伙伴们分享一下标签制作软件中如何快速制作圆形合格证标签的具体操作步骤。这个合格证标签是一个小小的圆形,标签是带颜色的,这种标签在进行制作的时候应该怎么制作呢?接下来就一起来看下吧。我们可以看到...