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

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

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

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网站可以帮我们实现表格的合并,我们只需要复制其中的代码,然后即可。

相关推荐

如何设计一个优秀的电子商务产品详情页

加入人人都是产品经理【起点学院】产品经理实战训练营,BAT产品总监手把手带你学产品电子商务网站的产品详情页面无疑是设计师和开发人员关注的最重要的网页之一。产品详情页面是客户作出“加入购物车”决定的页面...

怎么在JS中使用Ajax进行异步请求?

大家好,今天我来分享一项JavaScript的实战技巧,即如何在JS中使用Ajax进行异步请求,让你的网页速度瞬间提升。Ajax是一种在不刷新整个网页的情况下与服务器进行数据交互的技术,可以实现异步加...

中小企业如何组建,管理团队_中小企业应当如何开展组织结构设计变革

前言写了太多关于产品的东西觉得应该换换口味.从码农到架构师,从前端到平面再到UI、UE,最后走向了产品这条不归路,其实以前一直再给你们讲.产品经理跟项目经理区别没有特别大,两个岗位之间有很...

前端监控 SDK 开发分享_前端监控系统 开源

一、前言随着前端的发展和被重视,慢慢的行业内对于前端监控系统的重视程度也在增加。这里不对为什么需要监控再做解释。那我们先直接说说需求。对于中小型公司来说,可以直接使用三方的监控,比如自己搭建一套免费的...

Ajax 会被 fetch 取代吗?Axios 怎么办?

大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发!今天给大家带来的主题是ajax、fetch...

前端面试题《AJAX》_前端面试ajax考点汇总

1.什么是ajax?ajax作用是什么?AJAX=异步JavaScript和XML。AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX可以使网页实...

Ajax 详细介绍_ajax

1、ajax是什么?asynchronousjavascriptandxml:异步的javascript和xml。ajax是用来改善用户体验的一种技术,其本质是利用浏览器内置的一个特殊的...

6款可替代dreamweaver的工具_替代powerdesigner的工具

dreamweaver对一个web前端工作者来说,再熟悉不过了,像我07年接触web前端开发就是用的dreamweaver,一直用到现在,身边的朋友有跟我推荐过各种更好用的可替代dreamweaver...

我敢保证,全网没有再比这更详细的Java知识点总结了,送你啊

接下来你看到的将是全网最详细的Java知识点总结,全文分为三大部分:Java基础、Java框架、Java+云数据小编将为大家仔细讲解每大部分里面的详细知识点,别眨眼,从小白到大佬、零基础到精通,你绝...

福斯《死侍》发布新剧照 "小贱贱"韦德被改造前造型曝光

时光网讯福斯出品的科幻片《死侍》今天发布新剧照,其中一张是较为罕见的死侍在被改造之前的剧照,其余两张剧照都是死侍在执行任务中的状态。据外媒推测,片方此时发布剧照,预计是为了给不久之后影片发布首款正式预...

2021年超详细的java学习路线总结—纯干货分享

本文整理了java开发的学习路线和相关的学习资源,非常适合零基础入门java的同学,希望大家在学习的时候,能够节省时间。纯干货,良心推荐!第一阶段:Java基础重点知识点:数据类型、核心语法、面向对象...

不用海淘,真黑五来到你身边:亚马逊15件热卖爆款推荐!

Fujifilm富士instaxMini8小黄人拍立得相机(黄色/蓝色)扫二维码进入购物页面黑五是入手一个轻巧可爱的拍立得相机的好时机,此款是mini8的小黄人特别版,除了颜色涂装成小黄人...

2025 年 Python 爬虫四大前沿技术:从异步到 AI

作为互联网大厂的后端Python爬虫开发,你是否也曾遇到过这些痛点:面对海量目标URL,单线程爬虫爬取一周还没完成任务;动态渲染的SPA页面,requests库返回的全是空白代码;好不容易...

最贱超级英雄《死侍》来了!_死侍超燃

死侍Deadpool(2016)导演:蒂姆·米勒编剧:略特·里斯/保罗·沃尼克主演:瑞恩·雷诺兹/莫蕾娜·巴卡林/吉娜·卡拉诺/艾德·斯克林/T·J·米勒类型:动作/...

停止javascript的ajax请求,取消axios请求,取消reactfetch请求

一、Ajax原生里可以通过XMLHttpRequest对象上的abort方法来中断ajax。注意abort方法不能阻止向服务器发送请求,只能停止当前ajax请求。停止javascript的ajax请求...