Markdown表格——复杂表格

已于 2022-06-16 17:31:23 修改
阅读量6.4w 收藏 166
点赞数 83
分类专栏： 工具 文章标签： markdown markdown表格
于 2020-12-07 17:37:01 首次发布
萌
本文链接：https://blog.csdn.net/dream_summer/article/details/110822636
版权
本文详细介绍了如何使用Markdown创建和格式化表格，包括基础样式设置、单元格内竖线、斜体与粗体、换行、单元格合并以及Excel表格转换为HTML的方法。此外，还讲解了如何通过HTML实现表格的整体居中对齐，对于需要从Excel快速生成Markdown格式的表格，提供了实用的操作步骤。
摘要由CSDN通过智能技术生成

目录

1.首先基础的样式及设置

表格内容对齐大家应该都知道，如下所示，左边加冒号则居左对齐，右边加冒号居右对齐，两边都加则居中对齐。

项目     | Value
-------- | -----
电脑  | $1600
手机  | $12
导管  | $1


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

结果：

项目Value
电脑$1600
手机$12
导管$1
Column 1Column 2Column 3
centered 文本居左right-aligned 文本居中right-aligned 文本居右

2. 单元格中带有竖线 |

单元格中的|用|表示，结果会自动转换为|

例如：

项目     | Value
-------- | -----
电脑|平板  | $1600
手机  | $12
导管  | $1

结果如下：

项目Value
电脑|平板$1600
手机$12
导管$1

3. 斜体，粗体

斜体:内容两侧各加一个下划线，例_内容_
粗体:内容两侧各加两个下划线，例__内容__

项目     | Value
-------- | -----
电脑|平板  | $1600
_手机_  | $12
__导管__   | $1

结果如下：

项目Value
电脑|平板$1600
手机$12
导管$1

4. 表格内换行

用HTML标签<br>

项目     | Value
----- | -----
电脑&#124;平板  | 一行<br>二行

结果如下：

项目Value
电脑|平板一行
二行

5. 合并单元格

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

首先要了解基础的html表格如下：

<table>
    <tr>
        <td>行1列1</td> 
        <td>行1列2</td> 
        <td>行1列3</td> 
   </tr>
    <tr>
  		<td>行2列1</td> 
        <td>行2列2</td> 
        <td>行2列3</td> 
    </tr>
    <tr>
        <td>行3列1</td> 
        <td>行3列2</td> 
        <td>行3列3</td> 
    </tr>
</table>
行1列1行1列2行1列3
行2列1行2列2行2列3
行3列1行3列2行3列3

其中 每对<tr>.....</tr>标签之间为一行，每对 <td>....</td> 标签之间为一列。

合并行

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

要注意要少写几个<td>标签，如下所示，共三列，其中第二行合并第二列和第三列，只需要在前面再写一列即可，第三行跨三列，即已包括三列，不需要再写<td>

<table>
    <tr>
        <td>行/列</td> 
        <td>列2</td> 
        <td>列3</td> 
   </tr>
    <tr>
  		 <td>行2列1</td> 
      	 <td colspan="2">跨两列合并行</td>    
    </tr>
    <tr>
        <td colspan="3">跨三列合并行</td>    
    </tr>
</table>

显示如下

行/列列2列3
行2列1跨两列合并行
跨三列合并行

合并列

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

<table>
    <tr>
        <td>行1列1</td> 
        <td>行1列2</td> 
        <td>行1列3</td> 
   </tr>
    <tr>
        <td rowspan="2">合并两列</td>    
  		 <td>行2列2</td> 
      	 <td>行2列3</td> 
    </tr>
    <tr>
        <td>行3列2</td> 
        <td>行3列3</td>    
    </tr>
</table>

在第一列合并了第二三行，则在第二行写合并，第三行就不用了再写第一列了。

显示如下：

行1列1行1列2行1列3
合并两列行2列2行2列3
行3列2行3列3

合并行列

<table>
    <tr>
        <td>列一</td> 
        <td>列二</td> 
   </tr>
   <tr>
        <td colspan="2">合并行</td>    
   </tr>
   <tr>
        <td>列一</td> 
        <td>列二</td> 
   </tr>
    <tr>
        <td rowspan="2">合并列</td>    
        <td >行二列二</td>  
    </tr>
    <tr>
        <td >行三列二</td>  
    </tr>
</table>
列一列二
合并行
列一列二
合并列行二列二
行三列二

6. excel转html

如果已有excel表，用Markdown语言编辑出对应的excel，比较复杂的表格就很麻烦了。如果这个表格做成只读的，就可以用下面的方式来显示。
参考原文https://www.jianshu.com/p/78f6b3d8ab4f

  • 准备好要处理的excel表格
    在这里插入图片描述

  • 另存为html格式——wps、office都支持，生成了一个文件夹和一个htm文件
    在这里插入图片描述
    在这里插入图片描述

  • 用浏览器打开htm文件，并用右键查看页面源代码如图，注意左下角，如果有多个工作表，一定要切换到想要查看的sheet
    在这里插入图片描述

发现用了框架，表格在框架中如图，
图2 页面源代码
所以我们应该查看框架源代码如图
图3 框架源代码：

  • 找到<table>...</table>标签下的内容，复制到Markdown编辑器内。 表格即完成了Markdown的转换。
 <table border=0 cellpadding=0 cellspacing=0 width=192 style='border-collapse:
 collapse;table-layout:fixed;width:144pt'>
 <col width=64 span=3 style='width:48pt'>
 <tr height=18 style='height:13.8pt'>
  <td height=18 class=xl65 width=64 style='height:13.8pt;width:48pt'>　</td>
  <td class=xl65 width=64 style='border-left:none;width:48pt'>方法</td>
  <td class=xl65 width=64 style='border-left:none;width:48pt'>描述</td>
 </tr>
 <tr height=18 style='height:13.8pt'>
  <td height=18 class=xl65 align=right style='height:13.8pt;border-top:none'>1</td>
  <td class=xl65 style='border-top:none;border-left:none'>方法1</td>
  <td class=xl65 style='border-top:none;border-left:none'>描述1</td>
 </tr>
 <tr height=18 style='height:13.8pt'>
  <td height=18 class=xl65 align=right style='height:13.8pt;border-top:none'>2</td>
  <td class=xl65 style='border-top:none;border-left:none'>方法2</td>
  <td class=xl65 style='border-top:none;border-left:none'>描述2</td>
 </tr>
 <tr height=18 style='height:13.8pt'>
  <td height=18 class=xl65 align=right style='height:13.8pt;border-top:none'>3</td>
  <td class=xl65 style='border-top:none;border-left:none'>方法3</td>
  <td class=xl65 style='border-top:none;border-left:none'>描述3</td>
 </tr>
 <tr height=18 style='height:13.8pt'>
  <td height=18 class=xl65 align=right style='height:13.8pt;border-top:none'>4</td>
  <td class=xl65 style='border-top:none;border-left:none'>方法4</td>
  <td class=xl65 style='border-top:none;border-left:none'>描述4</td>
 </tr>
</table>
　方法描述
1方法1描述1
2方法2描述2
3方法3描述3
4方法4描述4
  • 注意：说到另存时生成的文件夹，可以发现里面就是所有的代码，包括框架源码和样式，其中sheet001.htm就是我们工作表一的内容，sheet002.htm就是工作表二的内容。
    在这里插入图片描述
    可以直接用记事本打开找到<table>...</table>标签内容。
    在这里插入图片描述

7.表格整体居中

（1）用html写的表格
如5/6里面的写法：

<table>
    <tr>
        <td>行1列1</td> 
        <td>行1列2</td> 
        <td>行1列3</td> 
   </tr>
    <tr>
  		<td>行2列1</td> 
        <td>行2列2</td> 
        <td>行2列3</td> 
    </tr>
    <tr>
        <td>行3列1</td> 
        <td>行3列2</td> 
        <td>行3列3</td> 
    </tr>
</table>

这种直接用style指定表格样式即可：

<style>
	table {
   	 margin: auto;
	}
</style>

展示效果：

行1列1行1列2行1列3
行2列1行2列2行2列3
行3列1行3列2行3列3
（2）MarkDown写的表格 直接把表格用div标签包裹，指定div标签居中即可，代码如下 
<style>
.center 
{
  width: auto;/*表格宽度*/
  display: table;
  margin: auto;
}
</style>

<div class="center">

项目     | Value
-------- | -----
电脑  | $1600
手机  | $12
导管  | $1

</div>

展示效果如下：

项目Value
电脑$1600
手机$12
导管$1
袁小萌同学
关注
专栏目录
Markdown表格、单元格合并、快速编辑表格
reading-conference-writing
10-08 1万+
markdown中制作表格、合并单元格、快速制作结构复杂的表格
强力推荐：Markdown表格生成神器——markdown-table
gitblog_00041的博客
05-26 1078
强力推荐：Markdown表格生成神器——markdown-table markdown-tableGenerate a markdown (GFM) table项目地址:https://gitcode.com/gh_mirrors/ma/markdown-table 项目介绍 在Markdown文档中，创建和维护表格是一项常见的任务。markdown-table 是一个轻量级的开源工具，能够帮...
markdown中编辑复杂表格
热门推荐
sunbocong的博客
07-13 5万+
markdown中编辑复杂表格 使用markdown自带语法 markdown中自带了基本的表格编辑语法： 如： | name | age | gender | money | |-------|:---:|-----------|-------:| | rhio | 384 | robot | $3,000 | | haroo | .3 | bird ...
Markdown 表格生成器：Markdown-Table
最新发布
gitblog_01095的博客
08-12 400
Markdown 表格生成器：Markdown-Table markdown-tableGenerate a markdown (GFM) table项目地址:https://gitcode.com/gh_mirrors/ma/markdown-table 在这个数字化的时代，我们经常需要将结构化数据展示在文档中。Markdown 是一种简洁且易于阅读的标记语言，尤其适合编写技术文档和笔记。而当...
Markdown使用table标签创建表格的问题
#include
12-10 4004
使用Markdown写东西有时需要插入表格，方式有两种： 1.使用Markdown的表格语法 2.使用html的<table>标签来创建表格 但是某些Markdown编辑器中使用<table>标签会出现表格前有空行的情况。
Markdown绘制表格
FisrtBqy的博客
03-20 3万+
Markdown绘制表格 正常markdown语法： | 表头 | 表头 | 表头 | | -------- | -------- | -------- | | 行1，列1 | 行1，列2 | 行1，列3 | | 行2，列1 | 行2，列2 | 行2，列3 | | 行3，列1 | 行3，列2 | 行3，列3 | 效果图： 表头 表头 表头 行1，列1 行1，列2 行1，列3 行2，列1 行2，列2 行2，列3 行3，列1 行3，列2 行3，列3 但是无法
markdown做复杂表格
chch2010523的博客
08-08 1172
HTML格式的表格 由于Markdown兼容html语法，因此可以用html语法生成一些复杂形式的表格。如下面可合并行列的表格： <table><tbody> <tr> <th rowspan=3>合并行</th> <th>第一列</th> <th&gt...
markdown复杂表格制作
非-浪的博客
09-22 1211
数字格式输出描述 3.1415926 {:.2f} 3.14 保留小数点后两位 3.1415926 {:+.2f} +3.14 带符号保留小数点后两位 -1 {:+.2f} -1.00 带符号保留小数点后两位 2.71828 {:.0f} 3 不带小数 5 {:0>2d} 05 数字补.
【Markdown笔记】表格
08-22 7340
【Markdown笔记】表格 在Markdown中使用表格。 基本使用 Markdown中使用表格的方式很简单，使用|来分隔单元格，使用-来分隔表头和单元格。 例如一个4行3列的表格： 表头1 表头2 表头3 单元格信息 单元格信息 单元格信息 单元格信息 单元格信息 单元格信息 单元格信息 单元格信息 单元格信息 写法如下： | 表头1 | 表头2 | 表头3 | | ---------- | ---------- | ---------- | |
Markdown语法-表格绘制
XZ_ZC的博客
05-04 2824
表格标题栏下方一行，使用"："来进行限制文本为左对齐。表格标题栏下方一行，使用"："来进行限制文本为左对齐。
markdown 表格制作工具
11-25
这就引出了我们的主题——Markdown表格制作工具。这些工具提供了友好的用户界面，使得创建、编辑和预览Markdown表格变得轻松快捷。例如，`markdown_table_create`可能就是一个这样的工具，它可能包含以下功能： 1. *...
工具轻松转换JSON与Markdown表格-自制Obsidian插件
07-23
轻松转换JSON与Markdown表格——自制Obsidian插件
Markdown表格——在CSDN上画表格
weixin_45634365的博客
03-18 854
示例一 代码： |显示效果|代码| |--|--| | $a+b$ | `$a+b$` | |$a-b$| `$a-b$` | |$a*b$|`$a*b$`| | $a/b$ | `$a/b$` | | $\frac{a}{b}$ | `$\frac{a}{b}$` | 显示效果： 显示效果 代码 a+ba+ba+b $a+b$ a−ba-ba−b $a-b$ a∗ba*ba∗b $a*b$ a/ba/ba/b $a/b$ ab\frac{a}{b}ba​ $\frac{a
Markdown语法(三)——列表&表格
qq_36749906的博客
05-13 2682
前言：为了让我们的文章写作思路更容易被读者所理解，我们需要使用列表或者表格来表达自己的思想。同时，为了加深读者对某些概念的印象，我们可以使用一些文本样式对某些名词进行重点强调。这篇文章就来介绍下，如何让我们的文章思路更清晰以及加深读者印象的相关工具：列表、表格以及文本样式。 ...
CSDN博客中Markdown 编辑器编写博文——插入表格
phchaveadream的博客
07-05 2844
由于是新手，所以在使用CSDN平台撰写博文时，出现了不少问题，现针对插入表格问题进行简单整理。 问题描述：点击插入表格只能插入两行两列的表格。 问题效果图： 如果我们想插入自己想要的表格效果该如何处理呢？？ 首先可以百度Markdown 编辑器语法进行相关研究（由于自己基础薄弱，所以我就偷个懒，直接试验，得出想要的结果） 直接输入英文的符号| ，上下对齐输入等量的|，初建n行n列的表格。 ...
Markdown使用笔记（三）——进阶之表格
Liu Feng's Blog
08-07 2426
Markdown中的表格 我个人很少在Markdown中使用表格来记录，因为记笔记需要非常高效，而我感觉使用markdown中的语法来写一遍效率不高（个人操作不太熟练的原因吧！） 1、原生表格样式 常规的用法如下，使用竖线作为每一栏的分割线，第一行为表头，第二行可以设置格式 -: 设置内容和标题栏居右对齐 :- 设置内容和标题栏居左对齐 :-: 设置内容和标题栏居居中对齐 使用一下巨人中的人物信息作为例子： | 人物 | 性别 | 经典 | | --------
Markdown 文档基础语法大全
2303_80556719的博客
07-20 929
Markdown 致力于使阅读和创作文档变得容易。Markdown是一种轻量级的标记语言，设计初衷是让人们可以使用简单的文本格式来书写和编辑文档，同时具有一定的格式化效果。通过使用Markdown语法，用户可以快速地将纯文本转换为格式化的文档，例如标题、列表、链接、图片等。Markdown语法简单直观，易于学习和使用，逐渐成为了各种平台上书写文档的常用格式，甚至还可以实现Markdown文档对PDF、Word等格式的快速转换。Markdown的文件通常以.md或.markdown为扩展名。
Markdown - 表格
quanwei的博客
05-13 858
简单表格 直接使用Markdown自带的表格可以快速建立，但是对表格缺少设置，如果需要设置比较复杂的表格建议使用table。 |表头1|表头2| |-|-| |1|2| 表头1 表头2 1 2 HTML table 表格 &lt;tabel&gt;：表格声明 &lt;tbody&gt;：整个表格加载结束以后显示 &lt;th&gt;：表头 ...
altium designer 高级 覆铜 布线
12-23
Altium Designer是一款强大的PCB设计软件，拥有先进的覆铜布线功能。在进行覆铜布线时，Altium Designer可以实现多层板之间的高级引脚连接和信号传输。通过其灵活的引脚连接技术，用户可以轻松地创建复杂的电路布线，并且确保信号的良好传输质量。 Altium Designer的高级覆铜布线功能还可以帮助用户实现高速信号的传输、阻抗匹配和信号完整性的保证。用户可以通过设置不同的布线规则，灵活地控制信号的传输路径和布线层次，以满足不同电路设计的需要。同时，Altium Designer还提供了多种覆铜布线样式和布线模式，用户可以根据实际需求选择最合适的布线方式。 此外，Altium Designer还支持多种覆铜布线技术，包括差分对、匹配长度和控制阻抗布线等。用户可以通过这些高级技术，确保高速信号的传输稳定性和数据完整性，从而提高设计的可靠性和性能。 综上所述，Altium Designer拥有高级的覆铜布线功能，可以帮助用户实现复杂电路设计的布线需求，并且支持多种覆铜布线技术，以确保高速信号的稳定传输。因此，对于需要进行高级覆铜布线设计的用户来说，Altium Designer无疑是一个强大而实用的工具。
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值