表格
表格是展示结构化数据的重要方式。Markdown 表格是 GitHub Flavored Markdown 的扩展语法,现在已被广泛支持。
基本语法
表格由表头、分隔行和数据行组成。
简单表格
| 姓名 | 年龄 | 城市 |
| --- | --- | --- |
| 张三 | 25 | 北京 |
| 李四 | 30 | 上海 |
| 王五 | 28 | 广州 |
渲染效果:
| 姓名 | 年龄 | 城市 |
|---|---|---|
| 张三 | 25 | 北京 |
| 李四 | 30 | 上海 |
| 王五 | 28 | 广州 |
语法规则
表格语法规则:
- 使用竖线
|分隔列 - 表头与数据之间用分隔行分开
- 分隔行使用三个或更多减号
--- - 表格前后需要空行
对齐方式
在分隔行中使用冒号指定对齐方式:
| 左对齐 | 居中对齐 | 右对齐 |
| :--- | :---: | ---: |
| 内容 | 内容 | 内容 |
| 较长内容 | 较长内容 | 较长内容 |
渲染效果:
| 左对齐 | 居中对齐 | 右对齐 |
|---|---|---|
| 内容 | 内容 | 内容 |
| 较长内容 | 较长内容 | 较长内容 |
对齐语法说明:
:---左对齐:---:居中对齐---:右对齐---默认(通常为左对齐)
表格格式化
列宽调整
Markdown 表格的列宽由内容自动决定,无法直接指定宽度。可以通过以下方式调整:
添加空格对齐:
| 姓名 | 年龄 | 城市 |
| ------ | ---- | ------ |
| 张三 | 25 | 北京 |
| 李四 | 30 | 上海 |
| 王五 | 28 | 广州 |
添加空格不影响渲染结果,但使源码更整齐。
省略边缘竖线
表格两侧的竖线可以省略:
姓名 | 年龄 | 城市
--- | --- | ---
张三 | 25 | 北京
李四 | 30 | 上海
渲染效果与完整写法相同。
单列表格
创建只有一列的表格:
| 项目 |
| --- |
| 内容 |
| 内容 |
表格中的内容
文本格式化
表格单元格内可以使用文本样式:
| 功能 | 状态 | 说明 |
| --- | --- | --- |
| **核心功能** | `已完成` | *基础实现* |
| 扩展功能 | `进行中` | ~~计划中~~ |
渲染效果:
| 功能 | 状态 | 说明 |
|---|---|---|
| 核心功能 | 已完成 | 基础实现 |
| 扩展功能 | 进行中 |
链接和图片
单元格内可以包含链接和图片:
| 资源 | 链接 |
| --- | --- |
| GitHub | [访问](https://github.com) |
| Logo |  |
代码
单元格内可以包含行内代码:
| 方法 | 说明 |
| --- | --- |
| `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 表格的使用方法:
- 基本语法:竖线分隔,减号分隔表头
- 对齐方式:使用冒号指定左、中、右对齐
- 单元格内容:支持文本样式、链接、代码
- 表格限制:不支持合并单元格等复杂功能
- 最佳实践:保持简洁、合理对齐、使用表头
练习
- 创建一个包含三列的表格,分别设置不同的对齐方式
- 在表格中包含链接和代码
- 创建一个展示 API 参数的表格
- 尝试使用 HTML 创建一个合并单元格的表格