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 或拆解成多个表格