跳到主要内容

表格

表格是展示结构化数据的重要方式。Markdown 表格是 GitHub Flavored Markdown 的扩展语法,现在已被广泛支持。

基本语法

表格由表头、分隔行和数据行组成。

简单表格

| 姓名 | 年龄 | 城市 |
| --- | --- | --- |
| 张三 | 25 | 北京 |
| 李四 | 30 | 上海 |
| 王五 | 28 | 广州 |

渲染效果:

姓名年龄城市
张三25北京
李四30上海
王五28广州

语法规则

表格语法规则:

  • 使用竖线 | 分隔列
  • 表头与数据之间用分隔行分开
  • 分隔行使用三个或更多减号 ---
  • 表格前后需要空行

对齐方式

在分隔行中使用冒号指定对齐方式:

| 左对齐 | 居中对齐 | 右对齐 |
| :--- | :---: | ---: |
| 内容 | 内容 | 内容 |
| 较长内容 | 较长内容 | 较长内容 |

渲染效果:

左对齐居中对齐右对齐
内容内容内容
较长内容较长内容较长内容

对齐语法说明:

  • :--- 左对齐
  • :---: 居中对齐
  • ---: 右对齐
  • --- 默认(通常为左对齐)

表格格式化

列宽调整

Markdown 表格的列宽由内容自动决定,无法直接指定宽度。可以通过以下方式调整:

添加空格对齐:

| 姓名   | 年龄 | 城市   |
| ------ | ---- | ------ |
| 张三 | 25 | 北京 |
| 李四 | 30 | 上海 |
| 王五 | 28 | 广州 |

添加空格不影响渲染结果,但使源码更整齐。

省略边缘竖线

表格两侧的竖线可以省略:

姓名 | 年龄 | 城市
--- | --- | ---
张三 | 25 | 北京
李四 | 30 | 上海

渲染效果与完整写法相同。

单列表格

创建只有一列的表格:

| 项目 |
| --- |
| 内容 |
| 内容 |

表格中的内容

文本格式化

表格单元格内可以使用文本样式:

| 功能 | 状态 | 说明 |
| --- | --- | --- |
| **核心功能** | `已完成` | *基础实现* |
| 扩展功能 | `进行中` | ~~计划中~~ |

渲染效果:

功能状态说明
核心功能已完成基础实现
扩展功能进行中计划中

链接和图片

单元格内可以包含链接和图片:

| 资源 | 链接 |
| --- | --- |
| GitHub | [访问](https://github.com) |
| Logo | ![Icon](https://github.githubassets.com/favicons/favicon.svg) |

代码

单元格内可以包含行内代码:

| 方法 | 说明 |
| --- | --- |
| `toString()` | 转换为字符串 |
| `valueOf()` | 返回原始值 |

换行

单元格内换行使用 <br> 标签:

| 项目 | 描述 |
| --- | --- |
| 项目一 | 第一行<br>第二行 |

列表

标准 Markdown 表格不支持直接包含列表,但可以使用 HTML 实现:

<table>
<tr>
<td>功能列表</td>
<td>
<ul>
<li>功能一</li>
<li>功能二</li>
<li>功能三</li>
</ul>
</td>
</tr>
</table>

表格的限制

不支持的功能

标准 Markdown 表格不支持:

  • 单元格合并(跨行或跨列)
  • 直接设置列宽
  • 多行内容(需使用 <br>
  • 嵌套表格

复杂表格解决方案

对于复杂表格,建议使用 HTML:

<table>
<thead>
<tr>
<th rowspan="2">类别</th>
<th colspan="2">数据</th>
</tr>
<tr>
<th>数量</th>
<th>金额</th>
</tr>
</thead>
<tbody>
<tr>
<td>A类</td>
<td>100</td>
<td>1000</td>
</tr>
<tr>
<td>B类</td>
<td>200</td>
<td>2000</td>
</tr>
</tbody>
</table>

表格最佳实践

保持简洁

表格应简洁明了,避免过多列:

推荐:

| 属性 | 类型 | 说明 |
| --- | --- | --- |
| name | string | 名称 |
| age | number | 年龄 |

不推荐:

| 属性 | 类型 | 说明 | 示例 | 默认值 | 是否必填 | 版本 |
| --- | --- | --- | --- | --- | --- | --- |
| ... | ... | ... | ... | ... | ... | ... |

合理对齐

根据内容类型选择对齐方式:

  • 文字:左对齐
  • 数字:右对齐
  • 状态/标签:居中对齐
| 项目 | 数量 | 状态 |
| :--- | ---: | :---: |
| 产品A | 1000 | 正常 |
| 产品B | 500 | 缺货 |

使用表头

始终使用表头,让表格结构清晰:

推荐:

| 名称 ||
| --- | --- |
| 参数一 | 值一 |
| 参数二 | 值二 |

不推荐:

| 参数一 | 值一 |
| --- | --- |
| 参数二 | 值二 |

空单元格

空单元格应保留格式:

| 项目 || 说明 |
| --- | --- | --- |
| 项目一 | 100 | 正常 |
| 项目二 | | 暂无数据 |
| 项目三 | 200 | |

表格生成工具

手动编写大型表格容易出错,可以使用工具辅助:

在线工具

编辑器插件

  • VS Code:Markdown Table、Markdown All in One
  • JetBrains IDE:内置表格格式化

从 Excel 转换

许多工具支持从 Excel/CSV 转换为 Markdown 表格。

小结

本章学习了 Markdown 表格的使用方法:

  1. 基本语法:竖线分隔,减号分隔表头
  2. 对齐方式:使用冒号指定左、中、右对齐
  3. 单元格内容:支持文本样式、链接、代码
  4. 表格限制:不支持合并单元格等复杂功能
  5. 最佳实践:保持简洁、合理对齐、使用表头

练习

  1. 创建一个包含三列的表格,分别设置不同的对齐方式
  2. 在表格中包含链接和代码
  3. 创建一个展示 API 参数的表格
  4. 尝试使用 HTML 创建一个合并单元格的表格