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 1	Column 2	Column 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 表格的制作）、文本的加粗、斜体、换行…如下表所示

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

Chap.III 单元格合并

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

HTML 表格基本语法

<table>
<tbody>
    <tr>
        <th>表头</th><th>表头</th><th>表头</th>
    </tr>
    <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>

可以把每一个标签理解为一个容器，比如 <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>行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

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>

项目	颜色名称	颜色
文本颜色	Hotpink	rgb(240, 248, 255)
文本颜色	AntiqueWhite	rgb(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 表格样式设置（跨行表格，背景色等）