前置知识: Markdown

Markdown 表格

4 min中级

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 表格并谨慎使用。