教程 · Markdown → HTML
Markdown 表格转 HTML 表格
竖线表格是最容易被人看到转坏的那一处 Markdown。在 GitHub 上好好的，换个地方就变成一段全是竖线的文字。
这篇讲哪种写法能转过来、转完的 HTML 长什么样，以及哪三个错误会把表格变回文字。
一张表要满足什么才算表
竖线表格不属于 CommonMark，它来自 GitHub 风格的 Markdown —— 也就是说转换器得专门支持它，有些不支持。这个支持。
三样东西缺一不可：表头行、下面那行连字符、至少一行内容。少任何一样，出来的就是段落。
- 01表头行每格之间打一根竖线。行首和行尾那两根可以不写，但写上更容易看出哪行少了一格。
- 02紧接着写连字符那行，中间不能空行。每列至少三个连字符最保险。
- 03再写内容行。源码里不用对齐 —— 分格看的是竖线，不是列。
| Part | Qty |
| ---- | --- |
| Bolt | 12 |
| Nut | 12 |<table>
<thead>
<tr>
<th scope="col">Part</th>
<th scope="col">Qty</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bolt</td>
<td>12</td>
</tr>
</tbody>
</table>scope 属性是干什么的
表头出来是 <th scope="col">，不是加粗的 <td>。就靠这个属性，读屏软件才能念出「Qty，12」，而不是念一个孤零零的数字、完全不知道它属于哪一列。
它不花什么成本，却是「一张表」和「一堆数字」的分界。用 div 拼出来的表格根本表达不了这件事 —— 这是不该那么拼的最硬的理由。
对齐：带冒号那行
连字符那行里的冒号按列定对齐。左边一个冒号是左对齐，两边都有是居中，右边一个是右对齐 —— 数字列要的就是最后这种。
转出来的是 class，不是行内样式：align-left、align-center、align-right。全站输出都不留行内样式，因为 style 属性正是 CSS 注入进来的那道门。
所以整页模式下对齐是直接生效的 —— <head> 里的样式表定义了这三个类。片段模式把它们留给你自己的 CSS，这正是片段模式的意思：三行样式，它就跟你的站长一样，而不是跟你的站打架。
| Item | Cost |
| :--- | ---: |
| Bolt | 0.40 |<th scope="col" class="align-left">Item</th>
<th scope="col" class="align-right">Cost</th>
...
<td class="align-left">Bolt</td>
<td class="align-right">0.40</td>表格转成了一段文字
三个原因，按出现频率排。
- 01表头和连字符行之间空了一行。表格解析器还没看到它，它就已经被切成两个段落了。
- 02某一格的文字里有竖线。写成 \| 转义掉，否则那一格会被劈成两格，整行就比表头多出一格。
- 03连字符不够。一列一个连字符有的解析器认有的不认，三个是所有解析器都认的写法。
格子里能放的不止文字
行内 Markdown 在格子里是有效的：粗体、斜体、行内代码、链接。块级的不行 —— 列表、段落、围栏代码块都不行。这是表格语法本身的限制，不是这个转换器的。
格子里换行要自己手写一个 <br>。Markdown 里的裸 HTML 在这儿是原样透出去而不是转义掉的，所以它有效，出去的时候和别的东西一样过一遍净化。
竖线表格变成 HTML 之后行为不一样的地方，就这些了。转换器接粘贴的 Markdown，也接拖进来的 .md 文件，什么都不离开你的浏览器。
MD → HTML