Markdown 表格
GFM 表格语法:管道与分隔行、对齐控制、单元格内行内元素、边界规则与 HTML 复杂表格。
认知导入(Layer 1 进阶层) 前置知识:003 段落与换行(表格是”块级元素”,行结构依赖换行)。 边界说明:表格是 GFM 扩展而非 CommonMark 核心,纯 CommonMark 渲染器会把它当普通文本;单元格内只能放行内元素,放不了列表和代码块。 强制练习:写一个三列表格,把分隔行少写一列,观察缺列的单元格如何被填空。
1. 基本语法
表格由表头行 + 分隔行 + 数据行组成,单元格用竖线 | 分隔:
| 姓名 | 年龄 | 城市 |
| ---- | ---- | ---- |
| 张三 | 25 | 北京 |
| 李四 | 30 | 上海 |
渲染效果:
| 姓名 | 年龄 | 城市 |
|---|---|---|
| 张三 | 25 | 北京 |
| 李四 | 30 | 上海 |
构成规则(GFM 规范):
- 第一行是表头;第二行是分隔行,每个单元格由至少一个短横线构成(
---),它是表格的识别标志; - 两侧的竖线可以省略(
姓名 | 年龄的写法也合法),但为了源码可读性建议保留; - 表头单元格必填:分隔行上面必须有表头文字,只有分隔行的表格不成立;
- 表格从空行或前一个块级元素结束后开始,表格写到第一个空行或下一个块级元素为止。
2. 对齐控制
分隔行中用冒号声明整列的对齐方式:
| 左对齐 | 居中对齐 | 右对齐 |
| :------- | :------: | -------: |
| 内容 1 | 内容 2 | 内容 3 |
渲染效果:
| 左对齐 | 居中对齐 | 右对齐 |
|---|---|---|
| 内容 1 | 内容 2 | 内容 3 |
:---左对齐(默认);:---:居中对齐;---:右对齐。
约定俗成:文本列左对齐、数字列右对齐。表头源码里的空格只影响源码美观,不影响渲染与对齐。
3. 列数不匹配的行为
数据行的单元格数不必与表头一致,GFM 规范有明确定义(这也是表格比”手写 HTML”友好的地方):
| A | B | C |
| - | - | - |
| 1 | 2 |
| 3 | 4 | 5 | 6 |
- 数据行少列:缺的单元格按空单元格补齐(上面的第二行 C 列为空);
- 数据行多列:多余单元格被丢弃(6 不会显示)。
4. 单元格内可以放什么
单元格按行内语法解析,行内元素全部可用:
| 项目 | 链接 | 代码 | 状态 |
| ---- | ---- | ---- | ---- |
| 文档 | [GitHub](https://github.com) | `npm run build` | **已完成** |
需要注意的边界:
- 不能放块级元素:列表、代码块、标题、表格都无法放进单元格。想要”多行效果”只能用
<br>:
| 姓名 | 地址 |
| ---- | ---- |
| 张三 | 北京市朝阳区<br>建国路 88 号 |
- 单元格里的
- 红色不是列表:它只是以减号开头的字面文本,配合<br>排列仅能模拟视觉分行,没有列表语义。 - 竖线必须转义:内容含竖线时写成
\|(即使在代码跨度内也一样,详见markdown/080-EscapeCharacter):
| 命令 | 说明 |
| -------------- | -------- |
| `grep \| file` | 管道操作 |
- 任务复选框不渲染:
| [x] |在 GitHub 上显示为字面文本[x],表格里表达状态请用文字。
5. 复杂表格:HTML 兜底
GFM 表格做不到合并单元格与复杂表头。确有需要时退回 HTML 表格,注意 HTML 块前后各留一个空行(详见 markdown/230-HtmlEmbed):
<table>
<thead>
<tr>
<th>模块</th>
<th colspan="2">配置项</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">数据库</td>
<td>host</td>
<td>localhost</td>
</tr>
<tr>
<td>port</td>
<td>5432</td>
</tr>
</tbody>
</table>
取舍提醒:HTML 表格维护成本高、部分严格渲染环境会过滤属性,能用 GFM 表格就不要用 HTML。
6. 常见问题排查
6.1 表格没被识别
- 分隔行缺失或写法错误(分隔行是识别标志,
| --- |至少一个横线); - 表头行与分隔行之间插入了其他内容;
- 用了全角竖线
|而非半角|; - 分隔行列数与表头不一致(列错位由此产生)。
6.2 内容被竖线切断
内容含 | 时必须写 \|;URL 查询参数里罕见的竖线同样处理。
6.3 表格在移动端溢出
- 减少列数,或把次要列合并为”备注”列;
- 单元格内容尽量短,长说明移到表格外的正文;
- 站点层面对宽表格启用横向滚动。
7. 工具与规范
- 在线生成器(Tables Generator 等)可以可视化拖列、对齐后导出 Markdown;
- 编辑器插件(VS Code 的 Markdown 表格增强、Prettier 的表格格式化)会自动对齐源码列宽——纯美观,不影响渲染;
- markdownlint 的 MD055/MD056/MD058 等规则可约束表格风格(分隔行样式、列数一致、表格前后空行)。
小结
- 初学者要点:表格 = 表头行 +
| --- |分隔行 + 数据行;冒号控制对齐;单元格内换行用<br>;竖线内容用\|转义。 - 进阶注意:表格是 GFM 扩展,纯 CommonMark 渲染器不识别;单元格只能装行内元素,列表/代码块放不进去(任务复选框在表格内也不渲染);少列补空、多列丢弃是规范行为;合并单元格需退回 HTML 表格并谨慎使用。