[JavaScript知识库]Markdown (CSDN) MD编辑器（四）- 漂亮表格(表格背景色、跨行、跨列)

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

一、markdown表格

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

• markdown格式文本

| 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 内嵌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>

2.3 显示效果

在内嵌html的markdown格式文本中，可以看到还使用了前面文章说过的 <font> 标签，可以使表格的字体更丰富。关于内嵌html表格有不清楚的可以复制2.2的文本结合着2.1一起理解。

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

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

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖