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

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

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

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

相关推荐

Django零基础速成指南:快速打造带用户系统的博客平台

#python##服务器##API##编程##学习#不是所有教程都值得你花时间!这篇实战指南将用5分钟带你解锁Django核心技能,手把手教你从零搭建一个具备用户注册登录、文章管理功能的完整...

iOS 17.0 Bootstrap 1.2.9 半越狱来啦!更新两点

这款Bootstrap半越狱工具终于更新,离上一次更新已相隔很久,现在推出1.2.9版本,主要为内置两点功能进行更新,也是提升半越狱的稳定性。如果你正在使用这款半越狱工具的,建议你更新。注意!...

iOS 16.x Bootstrap 1.2.3 发布,支持运行清理工具

本文主要讲Bootstrap半越狱工具更新相关内容。如果你是iOS16.0至16.6.1和17.0系统的,想体验半越狱的果粉,请继续往下看。--知识点科普--Bootstrap...

SpringBoot整合工作流引擎Acticiti系统,适用于ERP、OA系统

今日推荐:SpringBoot整合工作流引擎Acticiti的源码推荐理由:1、SpringBoot整合工作流引擎Acticiti系统2、实现了三级权限结构3、持久层使用了mybatis框架4、流程包...

SpringCloud自定义Bootstrap配置指南

在SpringCloud中自定义Bootstrap配置需要以下步骤,以确保在应用启动的早期阶段加载自定义配置:1.添加依赖(针对新版本SpringCloud)从SpringCloud2020...

Python使用Dash开发网页应用(三)(python网页开发教程)

PlotlyDash开发Web应用示例一个好的网页设计通常都需要编写css甚至js来定制前端内容,例如非常流行的bootstrap框架。我们既然想使用Dash来搭建web应用,很大的一个原因是不熟悉...

Oxygen XML Editor 27.1 中的新功能

OxygenXMLEditor27.1版是面向内容作者、开发者、合作者和出版商的行业领先工具包的增量版本。在27.1版本中,AIPositronAssistant得到了增强,包括用于...

【LLM-多模态】Mini-Gemini:挖掘多模态视觉语言模型的潜力

一、结论写在前面论文提出了Mini-Gemini,一个精简而强大的多模态VLM框架。Mini-Gemini的本质在于通过战略性框架设计、丰富的数据质量和扩展的功能范围,发掘VLM的潜在能力。其核心是补...

谐云课堂 | 一文详解分布式改造理论与实战

01微服务与分布式什么是分布式?首先,我们对上图提到的部分关键词进行讲解。单体,是指一个进程完成全部的后端处理;水平拆分,是同一个后端多环境部署,他们都处理相同的内容,使用反向代理来均衡负载,这种也叫...

基于Abaqus的手动挡换挡机构可靠性仿真

手动挡,也称手动变速器,英文全称为Manualtransmission,简称MT,即用手拨动换挡操纵总成才能改变变速器内的齿轮啮合位置,改变传动比,从而达到变速的目的。家用轿车主要采用软轴连接的换挡...

【pytorch】目标检测:彻底搞懂YOLOv5详解

YOLOv5是GlennJocher等人研发,它是Ultralytics公司的开源项目。YOLOv5根据参数量分为了n、s、m、l、x五种类型,其参数量依次上升,当然了其效果也是越来越好。从2020...

超实用!50个非常实用的PS快捷键命令大全分享

今天,给大家介绍50个非常实用的快捷键命令大全,大家伙都是设计师,关于软件使用那是越快越好啊。一、常用的热键组合1、图层混合模式快捷键:正常(Shift+Option+N),正片叠底(Shif...

Pohtoshop中深藏不露的小技巧(科目一考试技巧记忆口诀看完必过)

邢帅教育ps教程为大家总结了一些Pohtoshop中深藏不露的小技巧,可以帮助到大家在设计时减少不必要的麻烦,提高工作效率哦~~~1.设置网格线保持像素完美不在1:1分辨率下也能保持像素完美,可以...

Ganglia监控安装总结(监控安装工作总结)

一、ganglia简介:Ganglia是一个跨平台可扩展的,高性能计算系统下的分布式监控系统,如集群和网格。它是基于分层设计,它使用广泛的技术,如XML数据代表,便携数据传输,RRDtool用于数据...

谁说Adobe XD做不出好看的设计?那是你没搞懂这些功能

AdobeXD的美化栏具有将设计视图美化的功能,它能使界面设计和原型设计更漂亮、更吸引眼球。美化栏的7个功能包括竖线布局设计、横线布局设计、重复网格、图形大小和位置设置、响应式调整大小、文字美化以及...