Markdown 表格(十)

10.表格

涵盖基础语法、对齐方式、单元格格式化、特殊字符转义及美化建议。

一、基础语法

使用竖线 |​ 分隔单元格,连字符 - 分隔表头与数据行。

| 表头1 | 表头2 |
|-------|-------|
| 单元格 | 单元格 |
| 单元格 | 单元格 |

要点

  • 分隔线至少需要 三个连字符 ---
  • 两端的竖线可选,但建议保留
  • 不需要严格对齐,但对齐后更易读

二、对齐方式

对齐 语法
左对齐 :---
右对齐 ---:
居中对齐 :---:

示例

| 左对齐 | 右对齐 | 居中对齐 |
| :----- | -----: | :------: |
| 单元格 | 单元格 |  单元格  |

三、单元格内容格式化

单元格内可使用大部分 Markdown 语法:

功能 语法示例 效果
粗体 **粗体** 粗体
斜体 *斜体* 斜体
行内代码 `code` code
链接 [文字](URL) [链接]
换行 <br> 换行分隔
列表/代码块 不推荐(会破坏表格结构)

示例

| 功能 | 描述 | 状态 |
|------|------|:----:|
| **用户登录** | 支持邮箱登录 | ✅ |
| `API接口` | RESTful 设计 | ✅ |
| [文档](https://example.com) | 详细说明 | 📖 |

四、长文本与换行

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

| 项目 | 详细说明 |
|------|----------|
| 需求分析 | 1. 收集用户需求<br>2. 分析业务场景<br>3. 确定功能范围 |
| 技术选型 | 前端:React<br>后端:Node.js<br>数据库:MongoDB |

五、特殊字符转义

字符 转义方式
竖线 | ​`\
反斜杠 \ \\
HTML 标签 直接使用

六、表格美化建议

6.1 使用 Emoji 或符号

状态 符号 说明
完成 已完成
进行中 🔄 处理中
待处理 等待开始
错误 出现问题
警告 ⚠️ 需要注意

6.2 财务数据表格(右对齐数字)

| 月份 | 收入 | 支出 | 利润 | 增长率 |
|:----:|-----:|-----:|-----:|-------:|
| 1月 | ¥50,000 | ¥35,000 | ¥15,000 | - |
| 2月 | ¥55,000 | ¥38,000 | ¥17,000 | +13.3% |
| **总计** | **¥105,000** | **¥73,000** | **¥32,000** | — |

6.3 技术对比表格

| 特性 | React | Vue.js | Angular |
|------|:-----:|:------:|:-------:|
| 学习曲线 | 中等 | 简单 | 复杂 |
| 性能 | 优秀 | 优秀 | 良好 |
| 生态系统 | 丰富 | 成长中 | 完整 |

七、响应式与复杂表格处理

7.1 避免过宽表格

若列数过多,可拆分为多个小表格。

7.2 移动端友好设计

将宽表格分解为若干“键值对”表格:

### 基本信息
| 项目 | 值 |
|------|-----|
| 姓名 | 张三 |
| 年龄 | 25 |

### 联系方式
| 类型 | 信息 |
|------|------|
| 邮箱 | zhang@example.com |
| 电话 | 138-0000-0000 |

总结速查表

用途 语法
基础表格 | 头1 | 头2 |
| | |
| 数据1 | 数据2 |
左对齐 :---
右对齐 ---:
居中对齐 :---:
单元格内换行 <br>
转义竖线 ​`\
Emoji 直接复制或使用 HTML 实体

核心原则

  • 表头与数据行之间必须有分隔线
  • 保持对齐风格一致
  • 复杂内容优先用 HTML 或拆解成多个表格