Gordon.Guo全栈编程-开发文档

Appearance

Markdown 表格 ​

简介 ​

表格和引用是 Markdown 中重要的内容组织工具。

表格能够清晰地展示结构化数据，而引用则用于突出重要信息或引用他人观点。

Markdown 制作表格使用 | 来分隔不同的单元格，使用 - 来分隔表头和其他行。

语法格式如下：

markdown
|  表头   | 表头  |
|  ----  | ----  |
| 单元格  | 单元格 |
| 单元格  | 单元格 |

显示结果：

表头表头
单元格单元格
单元格单元格

语法要点： ​

  • 表头和数据行之间必须有分隔线
  • 分隔线至少需要三个连字符 ---
  • 两端的竖线 | 是可选的，但建议保留以提高可读性
  • 不需要严格对齐，但对齐后更美观

对齐方式 ​

我们可以设置表格的对齐方式： ​

  • ---: 设置内容和标题栏居右对齐。
  • :--- 设置内容和标题栏居左对齐。
  • :---: 设置内容和标题栏居中对齐。 实例如下：
markdown
| 左对齐 | 右对齐 | 居中对齐 |
| :-----| ----: | :----: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |

显示结果：

左对齐右对齐居中对齐
单元格单元格单元格
单元格单元格单元格

复杂表格的处理技巧 ​

元格内容格式化 ​

表格单元格内可以使用大部分 Markdown 语法：

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

显示结果：

功能描述状态
用户登录支持邮箱和手机号登录✅
密码重置通过邮箱重置密码⚠️
API接口RESTful API 设计✅
文档链接查看详细文档📖

处理长文本 ​

当单元格内容较长时，可以使用以下技巧：

换行处理： ​

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

显示结果：

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

缩写和链接： ​

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

显示结果：

技术栈说明官网
React用户界面库链接
Vue.js渐进式框架链接
Angular完整的框架链接

表格中的特殊字符 ​

某些字符在表格中有特殊含义，需要转义：

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

显示结果：

字符转义方法示例
竖线|显示 | 符号
反斜杠\\显示 \ 符号
HTML直接使用<div>

表格美化建议 ​

使用 Emoji 和符号 ​

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

显示结果：

状态图标说明
完成✅任务已完成
进行中🔄正在处理
待处理⏳等待开始
错误❌出现问题
警告⚠️需要注意

数据表格最佳实践 ​

财务数据表格： ​

markdown
| 月份 | 收入 | 支出 | 利润 | 增长率 |
|:----:|-----:|-----:|-----:|-------:|
| 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%** |

显示结果：

月份收入支出利润增长率
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%

技术对比表格： ​

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

显示结果：

特性ReactVue.jsAngular评分
学习曲线中等简单复杂Vue ⭐⭐⭐
性能表现优秀优秀良好平分 ⭐⭐⭐
生态系统丰富成长中完整React ⭐⭐⭐
企业支持Facebook社区GoogleAngular ⭐⭐⭐

响应式表格处理 ​

对于复杂表格，可以考虑分解为多个简单表格。 移动端友好的设计

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

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

显示结果：

基本信息

项目值
姓名张三
年龄25
职业工程师

联系方式

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

VitePress差异 ​

Markdown 与 VitePress 在表格方面的详细差异 以下是两者在表格功能上的核心区别，结合示例说明：

一、基础语法与渲染效果 ​

1. 标准 Markdown 表格 ​

  • 语法：
markdown
| 姓名 | 年龄 | 职业 |
| ---- | ---- | ---- |
| 张三 | 25   | 工程师 |
| 李四 | 30   | 设计师 |
  • 渲染效果：
    • 简单的文本表格，样式由渲染器决定。
    • 无交互功能，仅用于展示静态数据。

2. VitePress 表格 ​

  • 语法：与 Markdown 完全兼容。
  • 渲染效果：
    • 默认应用主题样式（如边框、间距、背景色）。
    • 支持表格内嵌套 Vue 组件和表达式（见下文示例）。

二、VitePress 特有扩展功能 ​

1. 表格内使用 Vue 表达式 ​

markdown
| 变量 | 值 |
|------|----|
| `count` | {{ count }} |
| `message` | {{ message }} |

<script setup>
import { ref } from 'vue';
const count = ref(0);
const message = ref('Hello VitePress');
</script>

显示结果：

效果： 表格单元格会动态显示 Vue 变量的值。

变量值
count0
messageHello VitePress

2. 表格内嵌入组件 ​

markdown
| 操作 | 结果 |
|------|------|
| <button @click="count++">增加</button> | {{ count }} |

<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>

显示结果：

效果： 表格内嵌入交互按钮，点击后更新单元格数据。

操作结果
0

3. 表格与代码块结合 ​

markdown
| 语言 | 示例 |
|------|------|
| JavaScript | ```javascript<br>console.log('Hello');<br>``` |
| Python | ```python<br>print('Hello')<br>``` |

显示结果：

语言示例
JavaScriptjavascript<br>console.log('Hello');<br>
Pythonpython<br>print('Hello')<br>

4. 表格对齐方式 ​

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

显示结果：

左对齐居中对齐右对齐
内容内容内容

5. 表格内使用 HTML 标签 ​

markdown
| 功能 | 说明 |
|------|------|
| 颜色 | <span style="color: red">红色文本</span> |
| 图片 | <img src="https://picsum.photos/200/100" alt="示例图片" width="100"> |

显示结果：

功能说明
颜色红色文本
图片示例图片

三、表格样式定制 ​

  1. Markdown
  • 样式完全依赖渲染器，无法自定义。
  1. VitePress
  • 全局配置：
js
// .vitepress/config.js
export default {
  themeConfig: {
    styles: {
      table: {
        border: '1px solid #eaeaea',
        // 更多样式配置...
      }
    }
  }
}
  • 自定义 CSS：
css
/* .vitepress/theme/custom.css */
.vp-doc table {
  width: 100%;
  border-collapse: collapse;
}

.vp-doc th,
.vp-doc td {
  padding: 8px;
  border: 1px solid #ddd;
}

高级功能对比 ​

  1. 表格排序与筛选（VitePress 特有）
markdown
<TableWithSorting :data="tableData" />

<script setup>
import TableWithSorting from '../components/TableWithSorting.vue';
import { ref } from 'vue';

const tableData = ref([
  { id: 1, name: '张三', age: 25 },
  { id: 2, name: '李四', age: 30 },
  // 更多数据...
]);
</script>

效果： 表格支持按列排序和搜索筛选（需自定义组件）。

  1. 表格响应式设计（VitePress 特有）
css
/* .vitepress/theme/custom.css */
@media (max-width: 768px) {
  .vp-doc table {
    display: block;
    overflow-x: auto;
  }
}

效果： 在移动端自动转为可横向滚动的表格。

Copyright © 2025 Gordon.Guo