垦荒学园
  • 中文

      • Markdown 表格

      表格是展示结构化数据的重要工具。Markdown 提供了简洁的表格语法，可以轻松创建格式整齐的表格。本章将详细介绍 Markdown 表格的各种用法。

      基本表格语法

      语法格式

      使用 | 分隔列，用 - 分隔表头和内容：

      | 列1 | 列2 | 列3 |
|-----|-----|-----|
| 内容1 | 内容2 | 内容3 |
| 内容4 | 内容5 | 内容6 |

      效果：

      列1列2列3
      内容1内容2内容3
      内容4内容5内容6

      最简写法

      表头分隔符的 - 数量不影响效果，至少需要一个：

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

      效果：

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

      对齐方式

      左对齐

      | 左对齐 | 居中 | 右对齐 |
|:-------|:----:|------:|
| 左     | 中   | 右     |

      效果：

      左对齐居中右对齐
      左中右

      居中对齐

      | 列1 | 列2 | 列3 |
|:---:|:---:|:---:|
| 居中 | 居中 | 居中 |

      效果：

      列1列2列3
      居中居中居中

      右对齐

      | 左 | 中 | 右 |
|---|---|---:|
| 左 | 中 | 右 |

      效果：

      左中右
      左中右

      混合对齐

      | 姓名 | 年龄 | 分数 |
|:-----|:----:|----:|
| 张三 |  25  |  95  |
| 李四 |  30  |  88  |

      效果：

      姓名年龄分数
      张三2595
      李四3088

      表格内容

      文本内容

      | 姓名 | 职位 | 部门 |
|------|------|------|
| 张三 | 工程师 | 技术部 |
| 李四 | 设计师 | 设计部 |

      效果：

      姓名职位部门
      张三工程师技术部
      李四设计师设计部

      数字内容

      | 编号 | 数量 | 价格 |
|------|------|------|
| 001 | 100 | 99.00 |
| 002 | 200 | 198.00 |

      效果：

      编号数量价格
      00110099.00
      002200198.00

      链接内容

      | 网站 | 链接 |
|------|------|
| Google | [Google](https://google.com) |
| GitHub | [GitHub](https://github.com) |

      效果：

      网站链接
      GoogleGoogle
      GitHubGitHub

      图片内容

      | 项目 | 截图 |
|------|------|
| 项目A | ![图A](./images/a.jpg) |
| 项目B | ![图B](./images/b.jpg) |

      效果：

      项目截图
      项目A图A
      项目B图B

      代码内容

      | 语言 | 代码示例 |
|------|----------|
| Python | `print("Hello")` |
| JavaScript | `console.log("Hello")` |

      效果：

      语言代码示例
      Pythonprint("Hello")
      JavaScriptconsole.log("Hello")

      HTML 内容

      | 功能 | 操作 |
|------|------|
| 提交 | <button>提交</button> |
| 取消 | <button>取消</button> |

      效果：

      功能操作
      提交
      取消

      复杂表格

      多行内容

      在单元格内使用 <br> 换行：

      | 姓名 | 描述 |
|------|------|
| 张三 | 软件工程师<br>负责前端开发 |
| 李四 | 产品经理<br>负责需求分析 |

      效果：

      姓名描述
      张三软件工程师
      负责前端开发
      李四产品经理
      负责需求分析

      包含特殊字符

      特殊字符不需要转义：

      | 符号 | 含义 |
|------|------|
| `#` | 井号 |
| `*` | 星号 |
| `|` | 竖线 |

      效果：

      符号含义
      #井号
      *星号
      ``

      空单元格

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

      效果：

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

      表格样式

      添加标题

      表格上方添加标题：

      ### 员工信息表

| 姓名 | 年龄 | 部门 |
|------|------|------|
| 张三 | 25 | 技术部 |
| 李四 | 30 | 市场部 |

      效果：

      员工信息表

      姓名年龄部门
      张三25技术部
      李四30市场部

      表格说明

      表格下方添加说明：

      | 项目 | 进度 |
|------|------|
| 项目A | 80% |
| 项目B | 60% |

*表 1：项目进度统计*

      效果：

      项目进度
      项目A80%
      项目B60%

      表 1：项目进度统计

      表格分组

      #### 基本信息

| 姓名 | 年龄 | 性别 |
|------|------|------|
| 张三 | 25 | 男 |
| 李四 | 30 | 女 |

#### 联系方式

| 电话 | 邮箱 |
|------|------|
| 138-0000-0000 | zhangsan@example.com |
| 139-0000-0000 | lisi@example.com |

      效果：

      基本信息

      姓名年龄性别
      张三25男
      李四30女

      联系方式

      电话邮箱
      138-0000-0000zhangsan@example.com
      139-0000-0000lisi@example.com

      表格最佳实践

      1. 保持简洁

      ✅ 简洁清晰
| 姓名 | 年龄 |
|------|------|
| 张三 | 25 |

❌ 过于复杂
包含过多列和行的表格

      2. 有意义的列名

      ✅ 清晰的列名
| 姓名 | 部门 | 职位 |
|------|------|------|
| 张三 | 技术部 | 工程师 |

❌ 模糊的列名
| A | B | C |
|---|---|---|
| 张三 | 技术部 | 工程师 |

      3. 对齐数字

      ✅ 数字右对齐
| 姓名 | 年龄 | 分数 |
|:-----|-----:|-----:|
| 张三 |  25  |  95  |
| 李四 |  30  |  88  |

❌ 数字左对齐（不易比较）
| 姓名 | 年龄 | 分数 |
|:-----|:----:|:----:|
| 张三 |  25  |  95  |
| 李四 |  30  |  88  |

      4. 合理使用空行

      ## 章节标题

| 表格1 |
|-------|
| 内容1 |

---

| 表格2 |
|-------|
| 内容2 |

      5. 限制列数

      ✅ 合理列数
| 姓名 | 年龄 | 城市 |
|------|------|------|

❌ 列数过多
| 列1 | 列2 | 列3 | 列4 | 列5 | 列6 | ... |
|-----|-----|-----|-----|-----|-----|-----|

      不同平台的表格支持

      GitHub

      • 完整支持
      • 支持 HTML 内容
      • 自动格式化

      GitLab

      • 完整支持
      • 支持更多功能
      • 支持合并单元格（扩展）

      Typora

      • 实时预览
      • 可视化编辑
      • 支持表格样式自定义

      VS Code

      • 需要插件支持
      • 支持基本表格
      • 自动对齐功能

      实战示例

      产品对比表

      ## 产品对比

| 特性 | 产品A | 产品B | 产品C |
|------|-------|-------|-------|
| 价格 | 99元 | 199元 | 299元 |
| 功能 | 基础功能 | 标准功能 | 高级功能 |
| 支持 | 邮件 | 邮件+电话 | 邮件+电话+专属 |
| 推荐 | ⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ |

      效果：

      产品对比

      特性产品A产品B产品C
      价格99元199元299元
      功能基础功能标准功能高级功能
      支持邮件邮件+电话邮件+电话+专属
      推荐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐

      API 参数表

      ## API 参数说明

| 参数名 | 类型 | 必填 | 说明 | 示例 |
|--------|------|------|------|------|
| `userId` | string | 是 | 用户ID | "123456" |
| `name` | string | 是 | 用户名 | "张三" |
| `age` | number | 否 | 年龄 | 25 |
| `email` | string | 否 | 邮箱 | "test@example.com" |

**表 1**：用户创建 API 参数说明

      进度跟踪表

      ## 项目进度

| 任务 | 负责人 | 进度 | 状态 |
|------|--------|------|------|
| 需求分析 | 张三 | 100% | ✅ 已完成 |
| 系统设计 | 李四 | 100% | ✅ 已完成 |
| 前端开发 | 王五 | 80% | 🔄 进行中 |
| 后端开发 | 赵六 | 70% | 🔄 进行中 |
| 测试 | 钱七 | 0% | ⏳ 待开始 |

*更新时间：2024-01-15*

      价格表

      ## 套餐价格

| 套餐 | 价格 | 存储 | 流量 | 备注 |
|------|------|------|------|------|
| 基础版 | 免费 | 10GB | 10GB/月 | 适合个人使用 |
| 标准版 | ¥99/月 | 100GB | 100GB/月 | 适合小团队 |
| 专业版 | ¥299/月 | 1TB | 1TB/月 | 适合大团队 |
| 企业版 | 定制 | 不限 | 不限 | 包含专属服务 |

      数据统计表

      ## 数据统计

| 月份 | 访问量 | 转化率 | 收入 |
|------|--------|--------|------|
| 1月 | 10,000 | 2.5% | ¥5,000 |
| 2月 | 12,000 | 2.8% | ¥6,500 |
| 3月 | 15,000 | 3.0% | ¥8,000 |
| 4月 | 18,000 | 3.2% | ¥10,000 |
| **总计** | **55,000** | **2.9%** | **¥29,500** |

*数据来源：系统统计*

      常见问题

      Q: 如何在表格中使用竖线 |？

      A: 使用 HTML 实体 &#124;：

      | 符号 | 表示 |
|------|------|
| 竖线 | &#124; |

      效果：

      符号表示
      竖线|

      Q: 如何合并单元格？

      A: 标准 Markdown 不支持，使用 HTML：

      <table>
  <tr>
    <td>单元格1</td>
    <td colspan="2">合并两列</td>
  </tr>
  <tr>
    <td>单元格3</td>
    <td>单元格4</td>
    <td>单元格5</td>
  </tr>
</table>

      Q: 表格显示混乱怎么办？

      A: 检查以下几点：

      • 列分隔符 | 是否对齐
      • 表头分隔符 --- 是否正确
      • 特殊字符是否需要转义

      Q: 如何添加表格边框？

      A: 使用 HTML + CSS：

      <table style="border: 1px solid black;">
  <tr>
    <th style="border: 1px solid black;">表头</th>
  </tr>
  <tr>
    <td style="border: 1px solid black;">内容</td>
  </tr>
</table>

      小结

      本章详细介绍了 Markdown 表格的使用方法：

      • 基本语法：使用 | 和 - 创建表格
      • 对齐方式：左对齐、居中、右对齐
      • 表格内容：文本、数字、链接、图片、代码
      • 复杂表格：多行内容、特殊字符、空单元格
      • 最佳实践：保持简洁、有意义的列名、合理对齐
      • 实战应用：产品对比、API 参数、进度跟踪等

      掌握表格的用法，可以有效地展示结构化数据，让你的文档更加清晰易懂。

      下一步： 学习 Markdown 分割线 的使用方法。