Markdown表格——复杂表格

袁小萌同学

83321人浏览 · 2020-12-07 17:37:01

袁小萌同学 · 2020-12-07 17:37:01 发布

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

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

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


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

结果：

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

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

2. 单元格中带有竖线 |

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

例如：

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

结果如下：

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

3. 斜体，粗体

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

项目     | Value
-------- | -----
电脑&#124;平板  | $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

GitCode 开源社区

新一代开源开发者平台 GitCode，通过集成代码托管服务、代码仓库以及可信赖的开源组件库，让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

混元世界模型 1.1 在 GitCode 开源！秒级生成 3D 世界，开发者速来体验！

GitCode 开源社区

华为盘古 Ultra-MoE-718B-V1.1 正式开放下载！

👉Int8量化版本也同步开源：https://gitcode.com/ascend-tribe/openPangu-Ultra-MoE-718B-V1.1-Int8还记得9月底刷屏的「华为盘古718B」吗？当时凭借的训练哲学，在 SuperCLUE 榜单中一举冲至开源模型第三，成为业界焦点。openPangu-Ultra-MoE-718B-V1.1 是基于昇腾 NPU 训练的大规模混合专家（Mo