Markdown 高级表格控制 ∈ Markdown 使用笔记

文章目录

  • Part.I Introduction
  • Part.II 表格样式控制
    • Chap.I 对齐方式
    • Chap.II 表格中文本控制
    • Chap.III 单元格合并
    • Chap.IV 颜色控制
  • Part.III 实用技巧
    • Chap.I Excel 转 HTML
  • Reference

Part.I Introduction

本文是 Markdown 使用笔记 的子博客,将介绍如何优雅地使用 Markdown 表格,让文档更加美观。

在这里插入图片描述

Part.II 表格样式控制

在 CSDN Markdown 编辑器菜单栏上面点击『表格』,会出现下面的 Mardown 语句

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

这是最基本的 Mardown 表格语句,很多情况下这种表格样式并不能满足我们多样的需求,笔者探索了一下『如何使用 Markdown 做出高级的表格』,目前可以做出如下样式的表格,下文会具体介绍

插入图片

Chap.I 对齐方式

对齐可以左对齐、居中、右对齐,通过 : 控制,示例如下:

| Column 1 | Column 2  |	Column 3 |
|:-| :-:|-:|
| left-aligned 文本居左 |  centered 文本居中 |right-aligned 文本居右|
Column 1Column 2Column 3
left-aligned 文本居左centered 文本居中right-aligned 文本居右

通过 HTML 语法令表格整体居中

<style>
.center 
{width: auto;/*表格宽度*/display: table;margin: auto;
}
</style><div class="center">项目     | Value
-------- | -----
电脑  | $1600
手机  | $12
导管  | $1
</div>
项目Value
电脑$1600
手机$12
导管$1

Chap.II 表格中文本控制

主要是对表格内容的操作,包括特殊字符的表示(比如|,因为整个字符用于 Markdown 表格的制作)、文本的加粗、斜体、换行…如下表所示

名称代码样式
竖线&#124;|
斜体_斜体_斜体
粗体__粗体__粗体
换行一行<br>二行一行
二行

Chap.III 单元格合并

Markdown 并没有单元格合并语法,但是 Markdown 是兼容HTML 的,因此,我们可以通过 HTML 的方式实现单元格合并。

HTML 表格基本语法

<table>
<tbody><tr><th>表头</th><th>表头</th><th>表头</th></tr><tr><td>11</td> <td>12</td> <td>13</td> </tr><tr><td>21</td> <td>22</td> <td>23</td> </tr><tr><td>31</td> <td>32</td> <td>33</td> </tr>
</table>

可以把每一个标签理解为一个容器,比如 <table> 容器里面有 行容器<tr>,行容器里面又有单元格容器 <td>。下面是上面 HTML 语法构建的表格:

表头表头表头
行1列1行1列2行1列3
行2列1行2列2行2列3
行3列1行3列2行3列3

合并行 colspan:规定单元格可纵跨的列数,即跨几列来合并行。

<table>
<tbody><tr><th>表头</th><th>表头</th><th>表头</th></tr><tr><td>/</td> <td>2</td> <td>3</td> </tr><tr><td>21</td> <td colspan="2">跨两列合并行</td>    </tr><tr><td colspan="3">跨三列合并行</td>    </tr>
</table>
表头表头表头
行/列列2列3
行2列1跨两列合并行
跨三列合并行

合并列 rowspan:规定单元格可横跨的行数,跨几行来合并列。

<table><tr><td>11</td> <td>12</td> <td>13</td> </tr><tr><td rowspan="2">合并两列</td>    <td>22</td> <td>23</td> </tr><tr><td>32</td> <td>33</td>    </tr>
</table>
行1列1行1列2行1列3
合并两列行2列2行2列3
行3列2行3列3

Chap.IV 颜色控制

使用 HTML 语法,可以设置表格的背景颜色和字体颜色,如下所示

<table>
<tbody><tr><th>项目</th><th>颜色名称</th><th>颜色</th></tr><tr><td><font color="Hotpink">文本颜色</font></td><td><font color="Hotpink">Hotpink</font></td><td bgcolor="Hotpink">rgb(240, 248, 255)</td></tr><tr><td><font color="Pink">文本颜色</font></td><td><font color="pink">AntiqueWhite</font></td><td bgcolor="Pink">rgb(255, 192, 203)</td></tr>
</table>
项目颜色名称颜色
文本颜色Hotpinkrgb(240, 248, 255)
文本颜色AntiqueWhitergb(255, 192, 203)

Part.III 实用技巧

Chap.I Excel 转 HTML

在 Excel 编辑好表格后,依次点击『文件』→另存为→选择位置→保存类型选择 网页(*.htm;*.html)。然后会看到生成了一个*.htm 文件和一个 *.files 文件夹,打开文件夹会看到有下面的一些文件

在这里插入图片描述
用文本编辑器打开所需表格的htm,搜索<table,将下面的部分贴到 Markdown 编辑器,并且删除 Markdown 不支持的语法即可。

在这里插入图片描述

项目方法描述
1法1描1
2法2描2

Reference

  • Markdown表格——复杂表格
  • CSDN-markdown 表格样式设置(跨行表格,背景色等)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/12628.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

寒冷地区污水处理一体化设备如何选型

在寒冷地区选择污水处理一体化设备时&#xff0c;需要特别考虑设备的耐寒性能和处理效率&#xff0c;以确保在低温环境下仍能稳定运行并达到预期的处理效果。以下是一些选型时需要考虑的关键因素&#xff1a; 耐寒设计&#xff1a;选择具有耐寒设计的设备&#xff0c;例如&…

[AWS] stepfunctions-local

本质是本地docker&#xff0c;只支持异步调用 run aws-stepfunctions-local docker run -p 8083:8083 \ --mount typebind,readonly,source/path/MockConfigFile.json,destination/home/StepFunctionsLocal/MockConfigFile.json \ -e SFN_MOCK_CONFIG"/home/StepFuncti…

企业微信推送报错40056

企业微信推送&#xff0c;报错 {"errCode":40056,"message":"weixin qy api errcode : 40056","result":99} 原因&#xff1a; 研究院的项目是新开的&#xff0c;虽然用的端华的配置信息&#xff0c;但应用没有授权&#xff0c;导致该…

论:即时战略RTS游戏的小地图采用 自下而上的汇报式 还是 自上而下的查找式?

关键词&#xff1a;RTS 小地图 游戏设计 思路 卫星 位置映射 阵营 更新 汇报 询问 UE4 UE5 Unreal Engine 前言 你是否想过类似红色警戒的战略小地图的要素是采用何种方式更新数据的。大量数据实时更新&#xff0c;考虑频率&#xff0c;运行效率&#xff0c;开发中如何选型&a…

2024年5月18日(星期六)骑行香杆箐

2024年5月18日 (星期六&#xff09;骑行香杆箐&#xff0c;早8:30到9:00&#xff0c;郊野公园西门集合&#xff0c;9:30准时出发【因迟到者&#xff0c;骑行速度快者&#xff0c;可自行追赶偶遇。】 偶遇地点:郊野公园西门集合 &#xff0c;家住东&#xff0c;西&#xff0c;南…

AI绘画Stable Diffusion | 如何利用SD垫图实现照片风格转换,动漫真人互转教程

“ 小红书上有很多用AI做卡通头像的&#xff0c;大概思路是你拍一张个人照片发给博主&#xff0c;博主利用midjourney的垫图功能转换成卡通形象&#xff0c;一张收取一定费用……” 稍微了解AI绘画的人都应该知道&#xff0c;midjourney是付费的软件&#xff0c;而且需要一定魔…

【北京迅为】《iTOP-3588从零搭建ubuntu环境手册》-第7章 安装VMwareTools

RK3588是一款低功耗、高性能的处理器&#xff0c;适用于基于arm的PC和Edge计算设备、个人移动互联网设备等数字多媒体应用&#xff0c;RK3588支持8K视频编解码&#xff0c;内置GPU可以完全兼容OpenGLES 1.1、2.0和3.2。RK3588引入了新一代完全基于硬件的最大4800万像素ISP&…

【软件的安装与基本设置】AD21软件的PCB规则设置

在绘制PCB之前&#xff0c;要进行规则的创建&#xff0c;因为在绘制PCB的过程中&#xff0c;难免会出现很多错误&#xff0c;所以需要先对绘制PCB创建规则&#xff0c;即所有的打孔&#xff0c;走线&#xff0c;铺铜都要基于电气性能规则去设计&#xff0c;等到后期&#xff0c…

摸鱼大数据——Linux搭建大数据环境(安装zooKeeper和zookeeper shell命令)五

安装zookeeper软件 1.上传软件 使用CRT等客户端远程上传 zookeeper-3.4.6.tar.gz 文件到/export/software目录下 2.解压软件 [rootnode1 ~]# cd /export/software/ [rootnode1 software]# tar -xzvf zookeeper-3.4.6.tar.gz -C /export/server/ [rootnode1 software]# cd /ex…

Shell编程之数组

一.数组定义方法 1.数组名称&#xff08;数值1 数值2 数值3 数值4 数值5&#xff09;数组名称&#xff08;"字符串1" "字符串2" "字符串4" "字符串5" "字符串6"&#xff09;(或者使用单引号) 如何查看数组的元素&#xff1…

项目管理表格-项目总体计划(项目管理-项目经理干货资料Excel)

项目管理总体计划模板 1、项目基本信息 2、项目里程碑 3、项目干系人 4、项目团队组织架构管理 5、项目预算管理 6、项目项目任务计划管理 7、问题及风险管理 8、项目周报 9、项目相关要求 软件项目相关全套精华资料包获取方式①&#xff1a;点我获取 获取方式②&#xff1a;本…

javaSE:类和对象

面向对象 java是一种面向对象的编程语言&#xff0c;面向对象就是把能为我们所用的东西直接拿来使用&#xff0c;省去中间过程&#xff0c;比如洗衣服&#xff0c;要完成这一个动作&#xff0c;我们本来需要一个盆&#xff0c;放水&#xff0c;放衣服&#xff0c;换水&#xf…

Hive的排序

order by 全局排序,因此只有一个reducer,设置了多个reducer也不起作用.-- 设置reducer的个数为2 set mapred.reduce.tasks2; -- 查询 select * from user_install_status_limit order by uptime limit 10;order by 在hive.mapred.mode strict 模式下,必须指定 limit,否则执行…

三大国密浏览器简单介绍-行云管家

国密浏览器是指支持国密算法SM2/SM3&#xff0c;支持基于国密算法的SSL协议&#xff0c;支持采用国密SSL证书实现HTTPS加密的网站正常访问的浏览器。今天我们行云管家小编就给大家简单介绍一下三大国密浏览器&#xff0c;以便大家了解。 三大国密浏览器简单介绍-行云管家 1、密…

开源可视化表单服务商:提升自主研发 助力流程化办公!

当前&#xff0c;做好流程化办公可以为企业实现提质增效的办公效果&#xff0c;助力企业进入数字化转型。作为开源可视化表单服务商&#xff0c;流辰信息坚持研发创新理念&#xff0c;努力提升自主研发能力&#xff0c;专为广大客户朋友提供集产品、框架定制、产品交付为一体的…

【WEEK12】 【DAY2】整合Druid数据源【中文版】

2024.5.14 Tuesday 目录 12.整合Druid数据源12.1.Druid简介12.2.配置数据源12.2.1.添加Druid数据源依赖12.2.2.切换数据源12.2.3.运行Springboot04DataApplicationTests.java12.2.4.尝试使用Druid数据源的专有配置12.2.5.导入Log4j 的依赖12.2.6.新建config文件夹12.2.7.修改测…

短视频人设定位有哪些:四川京之华锦信息技术公司

短视频人设定位有哪些&#xff1a;打造独特魅力的关键 随着短视频平台的兴起&#xff0c;越来越多的内容创作者开始涌现&#xff0c;他们凭借各自独特的魅力在网络世界中崭露头角。而在这其中&#xff0c;一个成功的短视频账号背后&#xff0c;往往有一个清晰、鲜明的人设定位…

安卓APP+TCP+服务器端

1、在.xml文件中添加权限 <uses-permission android:name"android.permission.ACCESS_WIFI_STATE"/><uses-permission android:name"android.permission.INTERNET"/>2、修改显示界面 <?xml version"1.0" encoding"utf-8&…

短剧私域-快速引流变现

短剧的爆火&#xff0c;衍生出了很多周边项目。 比如免费看剧App&#xff0c;短剧搜索机器人&#xff0c;短剧付费圈子等等。 这些项目的本质&#xff0c;就是借助短剧的热度&#xff0c;把流量引到自己的鱼塘进行变现。 短剧机器人大家都知道&#xff0c;目前最火的一种玩法…

vue一个简易时钟

<template><div class"">时间{{ time }}<div class"base1"><div class"move-to-center line"></div><div class"move-to-center line line2"></div><div class"move-to-center lin…