表格对齐 #

概述 #

表格对齐控制列内容的水平对齐方式，通过分隔行中的冒号位置指定。

对齐语法 #

左对齐 #

冒号在左侧：

markdown

| 列名 |
|:------|
| 内容 |

右对齐 #

冒号在右侧：

markdown

| 列名 |
|------:|
| 内容 |

居中对齐 #

冒号在两侧：

markdown

| 列名 |
|:------:|
| 内容 |

默认对齐 #

无冒号，通常为左对齐：

markdown

| 列名 |
|------|
| 内容 |

对齐效果对比 #

markdown

| 左对齐 | 居中对齐 | 右对齐 | 默认 |
|:-------|:--------:|-------:|-------|
| 文字 | 文字 | 文字 | 文字 |
| A | A | A | A |
| 长文本内容 | 长文本内容 | 长文本内容 | 长文本内容 |

渲染效果：

左对齐	居中对齐	右对齐	默认
文字	文字	文字	文字
A	A	A	A
长文本内容	长文本内容	长文本内容	长文本内容

使用场景 #

左对齐 - 文本内容 #

markdown

| 名称 | 描述 |
|:-----|:-----|
| React | 用于构建用户界面的 JavaScript 库 |
| Vue | 渐进式 JavaScript 框架 |
| Angular | 一套完整的前端框架 |

右对齐 - 数字内容 #

markdown

| 产品 | 价格 | 库存 |
|:-----|-----:|-----:|
| 商品A | 99.00 | 100 |
| 商品B | 199.00 | 50 |
| 商品C | 299.00 | 25 |

居中对齐 - 状态/标签 #

markdown

| 项目 | 状态 | 优先级 |
|:-----|:----:|:------:|
| 任务A | 完成 | 高 |
| 任务B | 进行中 | 中 |
| 任务C | 待开始 | 低 |

混合对齐 #

实际应用中常混合使用：

markdown

| 功能 | 状态 | 进度 | 预计完成 |
|:-----|:----:|-----:|:---------|
| 用户登录 | 完成 | 100% | 2024-01-15 |
| 数据导出 | 进行中 | 60% | 2024-01-20 |
| 报表生成 | 待开始 | 0% | 2024-01-25 |

渲染效果：

功能	状态	进度	预计完成
用户登录	完成	100%	2024-01-15
数据导出	进行中	60%	2024-01-20
报表生成	待开始	0%	2024-01-25

对齐与数据类型 #

数据类型	推荐对齐	原因
文本	左对齐	符合阅读习惯
数字	右对齐	便于比较数值
金额	右对齐	对齐小数点
日期	左对齐或居中	保持一致性
状态	居中	视觉平衡
百分比	右对齐	便于比较

实际案例 #

财务报表 #

markdown

| 项目 | Q1 | Q2 | Q3 | Q4 |
|:-----|----:|----:|----:|----:|
| 收入 | 100,000 | 120,000 | 150,000 | 180,000 |
| 成本 | 60,000 | 70,000 | 85,000 | 100,000 |
| 利润 | 40,000 | 50,000 | 65,000 | 80,000 |

API 文档 #

markdown

| 参数 | 类型 | 必填 | 说明 |
|:-----|:----:|:----:|:-----|
| id | string | 是 | 用户唯一标识 |
| name | string | 否 | 用户名称 |
| age | number | 否 | 用户年龄 |
| email | string | 是 | 邮箱地址 |

性能对比 #

markdown

| 框架 | 首次渲染(ms) | 更新(ms) | 内存(MB) |
|:-----|------------:|---------:|---------:|
| React | 45 | 12 | 35 |
| Vue | 38 | 10 | 28 |
| Angular | 65 | 18 | 52 |

对齐符号数量 #

分隔行的 - 数量不影响对齐：

markdown

| 列名 |
|:--|
| 内容 |

| 列名 |
|:----------|
| 内容 |

两者效果相同。

常见问题 #

问题1：对齐不生效 #

检查冒号位置：

markdown

正确：
|:------|  左对齐
|:------:| 居中
|------:|  右对齐

错误：
|------: |  冒号后有空格
| :------|  冒号前有空格

问题2：表头与内容对齐不一致 #

表头和内容使用相同对齐方式：

markdown

好的：
| 名称 | 数量 |
|:------|-----:|

不好的：
| 名称 | 数量 |
|:------|:-----|  （对齐方式不一致）

最佳实践 #

1. 同类数据使用相同对齐 #

markdown

好的：
| 项目 | 数量A | 数量B |
|:-----|------:|------:|

不好的：
| 项目 | 数量A | 数量B |
|:-----|:------|------:|  （同类数据对齐不一致）

2. 保持表格整洁 #

markdown

好的：
| 名称 | 价格 |
|:-----|-----:|
| A | 100 |

不好的：
|名称|价格|
|:-----|-----:|
|A|100|

3. 合理使用居中对齐 #

markdown

适合居中的内容：
- 状态标签
- 是/否
- 短标识符

下一步 #

继续学习分割线！