最基础的表格语法
一个 Markdown 表格由三部分组成:表头行、分隔行、数据行。用竖线 | 分列,分隔行用三个及以上的连字符 -:
| 姓名 | 年龄 | 城市 |
| --- | --- | --- |
| 小明 | 28 | 上海 |
| 小红 | 31 | 北京 |
渲染出来就是一张普通表格。竖线前后空格只是为了好看,不写也行,但写了更易读、改起来不容易出错。
小提示:分隔行里每列至少 3 个 -(如 ---),前后可以加 : 来指定对齐方式,这就是下面要讲的重点。
表头对齐:左 / 中 / 右(重点)
很多人写表格时发现:明明想把「金额」那一列右对齐,渲染出来却全是左对齐。原因就是分隔行没有加冒号。对齐方式由分隔行里的冒号位置决定:
:---—— 左对齐(冒号在左):---:—— 居中(左右都有冒号)---:—— 右对齐(冒号在右)---—— 不写冒号,默认左对齐
一个完整的例子,四列分别用四种对齐:
| 商品 | 单价 | 数量 | 小计 |
| :--- | :---: | ---: | ---: |
| 笔记本 | 12.5 | 3 | 37.5 |
| 订书机 | 28 | 1 | 28 |
注意:对齐方式是按列生效的,表头和该列所有单元格都会一起对齐。所以「单价」列写了 :---:,表头「单价」和下面的数字都会居中。
为什么我的对齐没生效?冒号必须是半角英文冒号 :,不能是中文全角「:」;连字符也必须是半角 -。从别的文档复制粘贴过来时最容易踩这个坑。mdview 在 v1.0.104 专门修过这个对齐语法不生效的问题,遇到对齐失效,先检查是不是全角符号。
实际该用哪种对齐
一个实用的对齐约定,能让表格一眼看清:
- 文字列(姓名、商品名、说明):左对齐
:---,阅读最自然; - 数字列(金额、数量、百分比):右对齐
---:,小数位上下对齐,方便比较大小; - 状态 / 标签列(是/否、状态):居中
:---:,视觉上更整齐。
尤其是数字列右对齐——这是 Excel、财务报表的惯例,照着做准没错。
列宽与单元格换行
Markdown 表格不能直接指定列宽,列宽由内容和渲染器自动决定。源码里把某一列的 - 写很长(比如 ----------)不会让那列变宽,它只影响源码的观感。
如果某个单元格里文字太长,想要手动换行,可以写 HTML 的 <br> 标签:
| 地址 |
| --- |
| 上海市<br>浦东新区<br>张江高科 |
大多数 Markdown 渲染器(包括 mdview)都支持在单元格里写这类行内 HTML。
单元格里也能写富文本
表格单元格里可以正常使用行内格式——加粗、行内代码、链接都行:
| 字段 | 类型 | 说明 |
| --- | --- | --- |
| **id** | `number` | 主键,[详见设计文档](#) |
| name | `string` | 用户名 |
需要注意:单元格里不能直接换行(一个回车会破坏表格结构),要换行就用上面的 <br>;也不能直接写整段段落或多级列表,太复杂的内容建议拆成普通段落或改用 HTML 表格。
合并单元格怎么办(HTML 兜底)
这是 Markdown 表格最大的短板:原生语法不支持合并单元格(没有 colspan / rowspan)。如果你必须做跨列、跨行合并,直接写 HTML 表格:
<table>
<tr><th>类别</th><th>项目</th></tr>
<tr><td rowspan="2">水果</td><td>苹果</td></tr>
<tr><td>香蕉</td></tr>
</table>
HTML 表格能和 Markdown 混排,mdview 也能正常渲染。代价是源码没那么好读,所以建议:能用 Markdown 表格就别上 HTML,只有遇到合并单元格这类需求时才兜底。
表格太宽怎么办
列太多、内容太长时,表格会撑得很宽。几个实用办法:
- 精简列:把不重要的列删掉,或者拆成两张表;
- 缩短内容:长说明改用链接或脚注,单元格里只留关键词;
- 横向滚动:mdview 渲染的宽表格会自动出现横向滚动条,不会把页面撑爆,电脑上拖动查看即可。
在 mdview 里快速插入表格
如果用 mdview 阅读时想顺手改两笔,按 F3 进入内置编辑器,有几种快速建表的方式:
- 输入
table再按Tab,自动展开成一个 2×2 的表格模板,光标停在第一个标题等你填; - 按
Ctrl + T,效果同上,直接插入表格片段。
展开后的模板已经带好了分隔行,改改文字和冒号就能调对齐。更多编辑器快捷键见这篇速查。
速查小结
| 想要的效果 | 分隔行写法 |
|---|---|
| 左对齐(默认) | :--- 或 --- |
| 居中 | :---: |
| 右对齐 | ---: |
| 单元格内换行 | 用 <br> |
| 合并单元格 | 改用 HTML <table> |
记住一句话:对齐看分隔行的冒号,数字右对齐、文字左对齐,你的表格就会立刻专业很多。