Skip to content

表格语法

表格是 Markdown 扩展语法的重要组成部分,用于以结构化方式展示数据。

基本表格语法

简单表格

使用管道符 | 分隔列,使用 - 创建表头分隔行:

markdown
| 姓名 | 年龄 | 职业 |
|------|------|------|
| 张三 | 25 | 工程师 |
| 李四 | 30 | 设计师 |
| 王五 | 28 | 产品经理 |

渲染效果

姓名年龄职业
张三25工程师
李四30设计师
王五28产品经理

表格对齐

使用冒号 : 控制列的对齐方式:

markdown
| 左对齐 | 居中对齐 | 右对齐 |
|:-------|:--------:|-------:|
| 内容1  | 内容1    | 内容1  |
| 内容2  | 内容2    | 内容2  |
| 内容3  | 内容3    | 内容3  |

渲染效果

左对齐居中对齐右对齐
内容1内容1内容1
内容2内容2内容2
内容3内容3内容3

对齐方式详解

对齐语法

语法对齐方式示例
---左对齐(默认)`
:--:居中对齐`
--:右对齐`

数字数据表格

适合用右对齐显示数字:

markdown
| 产品 | 价格 | 销量 | 收入 |
|:-----|-----:|-----:|-----:|
| 产品A | ¥99 | 1,250 | ¥123,750 |
| 产品B | ¥199 | 856 | ¥170,344 |
| 产品C | ¥299 | 432 | ¥129,168 |
| **总计** | | **2,538** | **¥423,262** |

渲染效果

产品价格销量收入
产品A¥991,250¥123,750
产品B¥199856¥170,344
产品C¥299432¥129,168
总计2,538¥423,262

表格中的格式化

内联格式

表格单元格支持 Markdown 内联格式:

markdown
| 功能 | 状态 | 描述 |
|------|------|------|
| **登录** | ✅ 完成 | 用户可以使用邮箱登录 |
| *注册* | 🚧 进行中 | 支持第三方注册 |
| `重置密码` | ❌ 待开发 | 通过邮件重置密码 |
| [用户中心](/) | ⏳ 计划中 | 用户信息管理 |

渲染效果

功能状态描述
登录✅ 完成用户可以使用邮箱登录
注册🚧 进行中支持第三方注册
重置密码❌ 待开发通过邮件重置密码
用户中心⏳ 计划中用户信息管理

表格中的代码

markdown
| 命令 | 功能 | 示例 |
|------|------|------|
| `ls` | 列出文件 | `ls -la` |
| `cd` | 切换目录 | `cd /home/user` |
| `mkdir` | 创建目录 | `mkdir new-folder` |
| `rm` | 删除文件 | `rm -rf folder/` |

渲染效果

命令功能示例
ls列出文件ls -la
cd切换目录cd /home/user
mkdir创建目录mkdir new-folder
rm删除文件rm -rf folder/

复杂表格示例

技术对比表

markdown
| 特性 | React | Vue | Angular |
|:-----|:-----:|:---:|:-------:|
| **学习难度** | 中等 | 简单 | 困难 |
| **性能** | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ |
| **生态系统** | 丰富 | 良好 | 完整 |
| **企业支持** | Facebook | 独立 | Google |
| **TypeScript** | ✅ | ✅ | ✅ 内置 |
| **社区活跃度** | 非常高 | 高 | 中等 |

渲染效果

特性ReactVueAngular
学习难度中等简单困难
性能⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
生态系统丰富良好完整
企业支持Facebook独立Google
TypeScript✅ 内置
社区活跃度非常高中等

API 文档表格

markdown
| 参数 | 类型 | 必需 | 默认值 | 描述 |
|------|------|:----:|--------|------|
| `id` | `number` | ✅ | - | 用户唯一标识符 |
| `name` | `string` | ✅ | - | 用户姓名 |
| `email` | `string` | ✅ | - | 用户邮箱地址 |
| `age` | `number` | ❌ | `null` | 用户年龄 |
| `avatar` | `string` | ❌ | `"/default.jpg"` | 头像URL |
| `status` | `enum` | ❌ | `"active"` | 账户状态:`active` \| `inactive` |

渲染效果

参数类型必需默认值描述
idnumber-用户唯一标识符
namestring-用户姓名
emailstring-用户邮箱地址
agenumbernull用户年龄
avatarstring"/default.jpg"头像URL
statusenum"active"账户状态:active | inactive

表格格式化技巧

使用表情符号

markdown
| 操作系统 | 支持状态 | 备注 |
|----------|:--------:|------|
| Windows | ✅ | 完全支持 |
| macOS | ✅ | 完全支持 |
| Linux | ⚠️ | 部分支持 |
| iOS | ❌ | 不支持 |
| Android | 🚧 | 开发中 |

渲染效果

操作系统支持状态备注
Windows完全支持
macOS完全支持
Linux⚠️部分支持
iOS不支持
Android🚧开发中

使用徽章

markdown
| 项目 | 状态 | 版本 |
|------|------|------|
| React | ![Stable](https://img.shields.io/badge/status-stable-green) | `v18.2.0` |
| Vue | ![Stable](https://img.shields.io/badge/status-stable-green) | `v3.3.0` |
| Angular | ![Beta](https://img.shields.io/badge/status-beta-orange) | `v16.0.0` |

空单元格处理

空内容表示

markdown
| 项目 | Q1 | Q2 | Q3 | Q4 |
|------|:--:|:--:|:--:|:--:|
| 收入 | 100万 | 120万 | - | - |
| 支出 | 80万 | 90万 | 95万 | - |
| 利润 | 20万 | 30万 | | |

渲染效果

项目Q1Q2Q3Q4
收入100万120万--
支出80万90万95万-
利润20万30万

常见错误和解决方案

1. 管道符不对齐

markdown
❌ 错误:
| 姓名 | 年龄|职业|
|------|-----|-----|
|张三|25|工程师|

✅ 正确:
| 姓名 | 年龄 | 职业 |
|------|------|------|
| 张三 | 25 | 工程师 |

2. 缺少分隔行

markdown
❌ 错误:
| 姓名 | 年龄 | 职业 |
| 张三 | 25 | 工程师 |

✅ 正确:
| 姓名 | 年龄 | 职业 |
|------|------|------|
| 张三 | 25 | 工程师 |

3. 列数不匹配

markdown
❌ 错误:
| 姓名 | 年龄 | 职业 |
|------|------|------|
| 张三 | 25 |  ← 缺少第三列

✅ 正确:
| 姓名 | 年龄 | 职业 |
|------|------|------|
| 张三 | 25 | 工程师 |

4. 特殊字符处理

markdown
❌ 问题:
| 价格 | 描述 |
|------|------|
| $100|含税 |  ← 管道符被误用

✅ 解决:
| 价格 | 描述 |
|------|------|
| $100 | 含税 |
| $200 | 价格\|含税 |  ← 转义管道符

高级表格功能

使用 HTML 增强

markdown
<table>
  <tr>
    <th colspan="2">合并列标题</th>
    <th>普通列</th>
  </tr>
  <tr>
    <td rowspan="2">合并行</td>
    <td>数据1</td>
    <td>数据2</td>
  </tr>
  <tr>
    <td>数据3</td>
    <td>数据4</td>
  </tr>
</table>

渲染效果

合并列标题普通列
合并行数据1数据2
数据3数据4

表格样式定制

markdown
<table style="width: 100%; border-collapse: collapse;">
  <tr style="background-color: #f0f0f0;">
    <th style="border: 1px solid #ddd; padding: 8px;">产品</th>
    <th style="border: 1px solid #ddd; padding: 8px;">价格</th>
  </tr>
  <tr>
    <td style="border: 1px solid #ddd; padding: 8px;">产品A</td>
    <td style="border: 1px solid #ddd; padding: 8px; color: red;">¥99</td>
  </tr>
</table>

实际应用场景

1. 项目管理

markdown
## 任务进度表

| 任务 | 负责人 | 开始时间 | 截止时间 | 状态 | 完成度 |
|------|--------|----------|----------|:----:|:------:|
| 需求分析 | 张三 | 2023-10-01 | 2023-10-07 | ✅ | 100% |
| UI设计 | 李四 | 2023-10-08 | 2023-10-15 | 🚧 | 75% |
| 前端开发 | 王五 | 2023-10-16 | 2023-10-30 | ⏳ | 0% |
| 后端开发 | 赵六 | 2023-10-16 | 2023-11-05 | ⏳ | 0% |
| 测试 | 孙七 | 2023-11-06 | 2023-11-12 | ⏳ | 0% |

2. 产品对比

markdown
## 订阅方案对比

| 功能 | 免费版 | 专业版 | 企业版 |
|------|:------:|:------:|:------:|
| **用户数量** | 5人 | 50人 | 无限制 |
| **存储空间** | 1GB | 100GB | 1TB |
| **API调用** | 1000/月 | 10万/月 | 无限制 |
| **技术支持** | 社区 | 邮件 | 专属客服 |
| **SLA保证** | - | 99.9% | 99.99% |
| **价格** | 免费 | ¥99/月 | ¥999/月 |
| | [选择](/) | [选择](/) | [联系销售](/) |

3. 财务报表

markdown
## 月度财务报表

| 项目 | 1月 | 2月 | 3月 | 总计 |
|------|----:|----:|----:|-----:|
| **收入** | | | | |
| 产品销售 | 50,000 | 55,000 | 60,000 | 165,000 |
| 服务收入 | 20,000 | 22,000 | 25,000 | 67,000 |
| 其他收入 | 2,000 | 1,500 | 3,000 | 6,500 |
| *小计* | *72,000* | *78,500* | *88,000* | *238,500* |
| **支出** | | | | |
| 员工工资 | 30,000 | 30,000 | 30,000 | 90,000 |
| 办公租金 | 8,000 | 8,000 | 8,000 | 24,000 |
| 营销费用 | 10,000 | 12,000 | 15,000 | 37,000 |
| *小计* | *48,000* | *50,000* | *53,000* | *151,000* |
| **净利润** | **24,000** | **28,500** | **35,000** | **87,500** |

最佳实践

1. 保持简洁

markdown
✅ 推荐:简洁明了
| 项目 | 状态 |
|------|------|
| A | 完成 |
| B | 进行中 |

❌ 不推荐:信息过载
| 项目名称 | 当前状态 | 详细描述信息 | 负责人姓名 | 开始时间 | 结束时间 | 备注说明 |

2. 使用有意义的标题

markdown
✅ 推荐:描述性标题
| 编程语言 | 学习难度 | 应用领域 |

❌ 不推荐:模糊标题
| 项目1 | 项目2 | 项目3 |

3. 适当使用对齐

markdown
✅ 推荐:数字右对齐
| 产品 | 价格 | 数量 |
|:-----|-----:|-----:|
| A | ¥100 | 50 |

✅ 推荐:文本左对齐
| 姓名 | 部门 | 职位 |
|:-----|:-----|:-----|
| 张三 | 技术部 | 工程师 |

HTML 输出

Markdown 表格转换为 HTML:

markdown
| 姓名 | 年龄 |
|------|------|
| 张三 | 25 |

转换为:

html
<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

相关语法

练习

尝试创建以下表格:

  1. 一个团队成员介绍表格
  2. 一个产品价格对比表格
  3. 一个项目进度跟踪表格
  4. 一个技术栈评估表格

工具推荐

表格生成器

  • 在线工具:Tables Generator、Markdown Tables Generator
  • 编辑器插件:VS Code Markdown Table、Typora表格编辑
  • 转换工具:Excel to Markdown、CSV to Markdown

表格美化

  • CSS框架:Bootstrap、Tailwind CSS
  • 表格库:DataTables、AG Grid
  • Markdown扩展:markdown-it-table、remark-gfm

由 Markdownlang.com 整理创建