Markdown Tables

Tables and blockquotes are important content organization tools in Markdown.

Tables can clearly display structured data, while blockquotes are used to highlight important information or cite others' opinions.

Markdown uses|to separate different cells, and uses-to separate the header from other rows.

The syntax format is as follows:

| Header | Header |
| ---- | ---- |
| Cell | Cell |
| Cell | Cell |

The above code displays the following result:

Syntax Key Points：

  • There must be a separator line between the header and data rows
  • The separator line needs at least three hyphens---
  • The vertical bars at both ends|are optional, but it is recommended to keep them for better readability
  • Strict alignment is not required, but it looks better when aligned

Alignment

We can set the alignment of the table:

  • ---:Set the content and title bar to align right.
  • :---Set the content and title bar to align left.
  • :---:Set the content and title bar to align center.

Examples are as follows:

| Left align | Right align | Center align |
| :-----| ----: | :----: |
| Cell | Cell | Cell |
| Cell | Cell | Cell |

The above code displays the following result:

Tips for Handling Complex Tables

Cell Content Formatting

Most Markdown syntax can be used inside table cells:

| 功能 | 描述 | 状态 |
|------|------|:----:|
| **用户登录** | 支持邮箱和手机号登录 | ✅ |
| *密码重置* | 通过邮箱重置密码 | ⚠️ |
| `API接口` | RESTful API 设计 | ✅ |
| [文档链接](https://example.com) | 查看详细文档 | 📖 |

Handling Long Text

When cell content is long, you can use the following techniques:

Line Break Handling：

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

Abbreviations and Links:

| 技术栈 | 说明 | 官网 |
|--------|------|------|
| React | 用户界面库 | [链接](https://reactjs.org) |
| Vue.js | 渐进式框架 | [链接](https://vuejs.org) |
| Angular | 完整的框架 | [链接](https://angular.io) |

Special Characters in Tables

Some characters have special meanings in tables and need to be escaped:

| 字符 | 转义方法 | 示例 |
|------|----------|------|
| 竖线 | `\|` | 显示 \| 符号 |
| 反斜杠 | `\\` | 显示 \\ 符号 |
| HTML | 直接使用 | <code>&lt;div&gt;</code> |

Table Beautification Suggestions

Using Emoji and Symbols

| 状态 | 图标 | 说明 |
|:----:|:----:|------|
| 完成 | &#x2705; | 任务已完成 |
| 进行中 | &#x1f504; | 正在处理 |
| 待处理 | &#x23f3; | 等待开始 |
| 错误 | &#x274c; | 出现问题 |
| 警告 | &#x26a0;&#xfe0f; | 需要注意 |

Best Practices for Data Tables

Financial Data Table:

| 月份 | 收入 | 支出 | 利润 | 增长率 |
|:----:|-----:|-----:|-----:|-------:|
| 1月 | ¥50,000 | ¥35,000 | ¥15,000 | - |
| 2月 | ¥55,000 | ¥38,000 | ¥17,000 | +13.3% |
| 3月 | ¥62,000 | ¥42,000 | ¥20,000 | +17.6% |
| **总计** | **¥167,000** | **¥115,000** | **¥52,000** | **+31.1%** |

Technology Comparison Table:

| 特性 | React | Vue.js | Angular | 评分 |
|------|:-----:|:------:|:-------:|:----:|
| 学习曲线 | 中等 | 简单 | 复杂 | Vue &#x2b50;&#x2b50;&#x2b50; |
| 性能表现 | 优秀 | 优秀 | 良好 | 平分 &#x2b50;&#x2b50;&#x2b50; |
| 生态系统 | 丰富 | 成长中 | 完整 | React &#x2b50;&#x2b50;&#x2b50; |
| 企业支持 | Facebook | 社区 | Google | Angular &#x2b50;&#x2b50;&#x2b50; |

Responsive Table Handling

For complex tables, consider breaking them down into multiple simple tables.

Mobile-Friendly Design:

### 基本信息
| 项目 | 值 |
|------|-----|
| 姓名 | 张三 |
| 年龄 | 25 |
| 职业 | 工程师 |

### 联系方式
| 类型 | 信息 |
|------|------|
| 邮箱 | zhang@example.com |
| 电话 | 138-0013-8000 |
| 地址 | 北京市朝阳区 |

Other Extensions