---
title: 表格
description: 将数据整理为行和列，支持 Markdown 表格和具备排序、高亮及跨行跨列功能的 Table 组件。
---
> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.
表格用于将数据整理为行和列。Jamdesk 支持两种方式：使用 **Markdown 表格**快速创建简单表格，或使用 **Table 组件**实现高亮和对齐等增强功能。
## 用法
```mdx
```
## Markdown 表格
创建表格最快的方法。使用竖线（`|`）分隔列，并使用连字符（`-`）创建表头行：
```markdown
| Name | Type | Description |
|------|------|-------------|
| id | string | Unique identifier |
| email | string | User email address |
```
| 名称 | 类型 | 描述 |
|------|------|------|
| id | string | 唯一标识符 |
| email | string | 用户电子邮件地址 |
Markdown 表格适合简单的参考数据。当需要高亮、对齐或视觉强调时，Table 组件可以提供更多控制。
## Table 组件
如需更多控制，请使用 ``、`` 和 `` 组件：
```mdx
| Name |
Type |
Description |
| id |
string |
Unique identifier |
| email |
string |
User email address |
```
| 名称 |
类型 |
描述 |
| id |
string |
唯一标识符 |
| email |
string |
用户电子邮件地址 |
## 斑马纹行
添加交替的行背景色，提升可读性：
```mdx
| Parameter |
Value |
| timeout | 30s |
| retries | 3 |
| backoff | exponential |
| maxDelay | 60s |
```
| 参数 |
值 |
| timeout | 30s |
| retries | 3 |
| backoff | exponential |
| maxDelay | 60s |
## 边框与紧凑布局
在单元格之间添加边框并减少内边距：
```mdx
```
## 高亮行
高亮整行以吸引注意：
```mdx
| Field |
Required |
Description |
| api_key |
Yes |
Your API authentication key |
| limit |
No |
Maximum results (default: 100) |
```
| 字段 |
必填 |
描述 |
| api_key |
是 |
您的 API 身份验证密钥 |
| limit |
否 |
最大结果数（默认值：100） |
可用的高亮颜色：`primary`、`success`、`warning`、`error`、`info`
## 高亮单元格
高亮单个单元格以显示状态指示：
```mdx
| Service |
Status |
| API |
Operational |
| Database |
Degraded |
| Storage |
Outage |
```
| 服务 |
状态 |
| API |
正常运行 |
| 数据库 |
性能下降 |
| 存储 |
中断 |
## 单元格对齐
控制每个单元格的文本对齐方式：
```mdx
| Left |
Center |
Right |
| Text |
Text |
$99.99 |
```
## 跨列与跨行
合并跨列或跨行的单元格：
```mdx
| Category |
Item |
Price |
| Fruits |
Apple |
$1.00 |
| Banana |
$0.50 |
| Subtotal |
$1.50 |
```
| 类别 |
商品 |
价格 |
| 水果 |
苹果 |
$1.00 |
| 香蕉 |
$0.50 |
| 小计 |
$1.50 |
## 可见标题
在表格上方显示无障碍表格标题：
```mdx
| Region |
Revenue |
| North America |
$1.2M |
```
## 可排序列
使用 `sortable` 属性启用交互式列排序。用户可以点击列标题进行排序：
```mdx
| Name |
Price |
Stock |
| Widget A | $29.99 | 150 |
| Gadget B | $49.99 | 75 |
| Tool C | $19.99 | 200 |
| Device D | $99.99 | 25 |
```
| 名称 |
价格 |
库存 |
| Widget A | $29.99 | 150 |
| Gadget B | $49.99 | 75 |
| Tool C | $19.99 | 200 |
| Device D | $99.99 | 25 |
点击列标题一次按升序排序，再次点击按降序排序，第三次点击重置排序。数字按数值排序，文本按字母顺序排序。
可排序功能可以与斑马纹行等其他功能结合使用：
```mdx
| Team |
Wins |
Losses |
| Eagles | 12 | 4 |
| Bears | 8 | 8 |
| Lions | 10 | 6 |
```
| 队伍 |
胜场 |
负场 |
| Eagles | 12 | 4 |
| Bears | 8 | 8 |
| Lions | 10 | 6 |
## 属性
### Table
| 属性 | 类型 | 默认值 | 描述 |
|------|------|---------|-------------|
| `striped` | boolean | false | 交替的行背景色 |
| `bordered` | boolean | false | 所有单元格之间的边框 |
| `compact` | boolean | false | 减少单元格内边距 |
| `fullWidth` | boolean | true | 表格占满全部宽度 |
| `caption` | string | - | 表格标题文本 |
| `captionVisible` | boolean | false | 以视觉方式显示标题（默认仅屏幕阅读器可见） |
| `stickyHeader` | boolean | false | 滚动时保持表头可见 |
| `sortable` | boolean | false | 启用点击列标题排序 |
### Row
| 属性 | 类型 | 默认值 | 描述 |
|------|------|---------|-------------|
| `header` | boolean | false | 渲染为表头行 |
| `highlight` | boolean | false | 高亮该行 |
| `highlightColor` | string | primary | 颜色：primary、success、warning、error、info |
### Cell
| 属性 | 类型 | 默认值 | 描述 |
|------|------|---------|-------------|
| `align` | string | left | 文本对齐方式：left、center、right |
| `colSpan` | number | - | 要跨越的列数 |
| `rowSpan` | number | - | 要跨越的行数 |
| `highlight` | boolean | false | 高亮该单元格 |
| `highlightColor` | string | primary | 颜色：primary、success、warning、error、info |
| `header` | boolean | false | 强制使用表头样式 |
## 下一步
浏览所有可用组件
了解如何在 MDX 中使用组件
|