Markdown (CSDN) MD编辑器（四）- 漂亮表格(表格背景色、跨行、跨列、多行)

目录
一、markdown表格
二、HTML表格
 2.1 标签属性
 2.2 跨列单元格（合并单元格）
 2.3 跨行单元格（合并单元格）
 2.4 单元格内换行
 2.5 单元格背景色
 2.6 单元格的字体(颜色、大小、字体)
 2.7 单元格的里的<、>字符
 2.8 html表格的其他属性

Markdown是一种轻量级标记语言，排版语法简洁，让人们更多地关注内容本身而非排版。它使用易读易写的纯文本格式编写文档，可与HTML混编，可导出 HTML、PDF 以及本身的 .md 格式的文件。因简洁、高效、易读、易写，Markdown被大量使用，如Github、Wikipedia、简书等。

---

一、markdown表格

markdown 的表格语法简单，使用三个或以上的连字符(---)创建每列的标题；使用管道(|)分隔每列；创建标题时在连字符两侧使用冒号(:)表示靠哪一侧对齐；使用反引号(`)可以强调文本，直接看例子：

• markdown格式文本

| Align `left`   | center align |   Align right |
| :------------- | :----------: | ------------: |
| `left`-aligned |   centered   | right-aligned |
| `左`对齐        |    中对齐     |         右对齐 |

• 显示效果

Align left	center align	Align right
left-aligned	centered	right-aligned
左对齐	中对齐	右对齐

---

二、HTML表格

markdown的表格语法简单，功能也简单，有时表格需要设置背景色、跨行、跨列，markdown支持内嵌HTML的语法，所以可以用 HTML 表格来实现这样的需求。

HTML表格由 <table> 标签来定义，
表格的表头由<th>标签定义，
表格的每一行由 <tr> 标签定义，
每行被分割的单元格由 <td> 标签定义。
这几个标签都有一些自带的属性用来最终改变表格的整体风格，下面先看看这些属性，然后结合例子看看怎样制作精美的表格。

2.1 标签属性

• <table>标签的属性
  border属性用于设置表格的边框大小

• <th>、<td>标签的属性
  colspan属性表示一个格子可以跨几列
  rowspan属性表示一个格子可以跨几行
  bgcolor属性定义单元格的背景色，用十六进制rgb表示颜色
  width 属性表示单元格的宽度，可以用百分比表示，也可以用数值表示
  height属性表示单元格的高度，用数值表示
  align 属性表示对齐方式，取值有left、right、center

2.2 跨列单元格（合并单元格）

下面创建一个表格，使第一行的格子跨两格，只需要在第一行的单元格加属性colspan="2"，
markdown代码如下：

<table border="2" >
	<tr >
		<td colspan="2">跨两个单元格</td>
	</tr>
	<tr >
		<td>第一格</td>
		<td>第二格</td>
	</tr>
</table>

显示效果如下：

跨两个单元格
第一格	第二格

2.3 跨行单元格（合并单元格）

下面创建一个表格，使第一列的格子跨两行，只需要在第一个的单元格加属性rowspan="2"，
markdown代码如下：

<table border="2" >
	<tr >
		<td rowspan="2">跨两行的单元格</td>
		<td>第一格</td>
	</tr>
	<tr >
		<td>第二格</td>
	</tr>
</table>

显示效果如下：

跨两行的单元格	第一格
	第二格

2.4 单元格内换行

下面创建一个表格，在第二个单元格里写入多行文字，只需要在每一行文字后面加入<br>就可以换行了
markdown代码如下：

<table border="2" >
	<tr >
		<td>只有一行</td>
		<td>
			这是第一行<br>
			这是第二行<br>
			这是第三行<br>
		</td>
	</tr>
</table>

显示效果如下：

只有一行	这是第一行 这是第二行 这是第三行

2.5 单元格背景色

下面创建一个表格，给每个格子设置不同的背景色，只需要修改单元格的bgcolor属性，可以用系统识别的颜色，也可以使大写或小写的十六进制。
markdown代码如下：

<table border="2" >
	<tr >
		<td bgcolor="red">红色</td>
		<td bgcolor="orange">橙色</td>
		<td bgcolor=#FFFF00>黄色</td>
		<td bgcolor=#00FF00>绿色</td>
		<td bgcolor=#0000ff>蓝色</td>
		<td bgcolor=#00ffff>靛色</td>
		<td bgcolor=#ff00ff>紫色</td>
	</tr>
</table>

显示效果如下：

红色

橙色

黄色

绿色

蓝色

靛色

紫色

颜色对照表可以看这篇文章：HTML颜色码对照表-英文代码、中文描述、十六进制、rgb值

2.6 单元格的字体(颜色、大小、字体)

下面创建一个表格，使用font标签改变字体，第一个格子用4号红色楷体，第二个格子同时使用三种颜色字体，关于字体的更多内容可以看这篇文章：https://blog.csdn.net/wkd_007/article/details/124253243
markdown代码如下：

<table border="2" >
	<tr >
		<td width="50%"><font face="楷体" color=red size=4>4号红色楷体</font></td>
		<td>
			<font color=red>红</font><font color=green>绿</font><font color=blue>蓝</font>
		</td>
	</tr>
</table>

显示效果如下：

4号红色楷体

红绿蓝

2.7 单元格的里的<、>字符

下面创建一个表格，在第二个表格需要输入<、>，直接输入会有语法错误，需要使用html的转义字符代替，&lt表示<，&gt表示>，更多转义字符相关内容可以看这篇文章：HTML转义字符对照表
markdown代码如下：

<table border="2" >
	<tr >
		<td >关闭设备</td>
		<td align=left>
			<font face="courier New" font color=red>#include &ltunistd.h&gt</font><br/>
			<font face="courier New" font color=blue>close(framebuf_fd);</font><br/>
		</td>
	</tr>
</table>

显示效果如下：

关闭设备	#include <unistd.h> close(framebuf_fd);

2.8 html表格的其他属性

markdown代码如下：

<table border="2" >
	<tr>
		<th colspan="2" align="center">markdown表格</th>
		<th colspan="2" >html表格</th>
	</tr>
	<tr>
		<td width="10%" rowspan="4">语法</td>
		<td width="40%" align=left>标题->连字符(---)</td>
		<td  width="10%" rowspan="4" bgcolor=#FAEBD7>语法</td>
		<td align=right bgcolor=#FFB6C1>表格-><font color=red>table</font>标签</td>
	</tr>
	<tr>
		<td align=left>分隔每列->管道(|)</td>
		<td align=right bgcolor=#D8BFD8>标题-><font color=red>th</font>标签</td>
	</tr>
	<tr>
		<td align=left>对齐->冒号(:)</td>
		<td align=right bgcolor=#B0C4DE>行-><font color=red>tr</font>标签</td>
	</tr>
	<tr>
		<td align =left>强调->反引号(`)</td>
		<td align=right bgcolor=#AFEEEE>列-><font color=red>td</font>标签</td>
	</tr>
</table>

显示效果:

markdown表格		html表格
语法	标题->连字符(---)	语法	表格->table标签
	分隔每列->管道(|)		标题->th标签
	对齐->冒号(:)		行->tr标签
	强调->反引号(`)		列->td标签

在上面markdown代码中，可以看到还使用了前面文章说过的 <font> 标签，可以使表格的字体更丰富。关于内嵌html表格有不清楚的可以结合上面的例子，复制markdown代码到markdown编辑器去看看效果，自己改一改有助于理解。

参考资料：
Markdown 官方教程
Markdown样式自定义及详解

---

相关文章：
Markdown编辑器(一) - 实现页内跳转
Markdown编辑器(二) - 文本样式(更改字体、字体大小、字体颜色、加粗、斜体、高亮、删除线)
Markdown编辑器(三) - 图片缩放、指定尺寸、居中、左对齐、右对齐