---
title: 表格
slug: docs/cn/qTaiPaZIoN5xVd_eNCvaB
createdAt: 2026-06-05T14:31:06.806Z
---

[表格](docId\:FLhBydIHwZ5MUWuiM99wT) 块将结构化信息组织为行和列。Archbee 支持用于简单数据的标准 Markdown 表格，以及用于高级格式和样式的 HTML 表格。

## 语法

您可以使用 Markdown 或 MDX 来添加此组件。

::::Tabs
:::Tab{title="Markdown"}
```markdown
| Column 1 | Column 2 |
|----------|----------|
| Cell 1   | Cell 2   |
```
:::

:::Tab{title="MDX"}
```html
<table isTableHeaderOn="true" columnWidths="200,200">
  <tr>
    <td align="center"><p><strong>Name</strong></p></td>
    <td align="center"><p><strong>Value</strong></p></td>
  </tr>
  <tr>
    <td><p>Item</p></td>
    <td><p>123</p></td>
  </tr>
</table>
```
:::
::::

Markdown 表格非常适合显示简单的结构化数据。当您需要额外的格式选项（例如自定义颜色、对齐方式、列宽或合并单元格）时，请使用 HTML 表格。

HTML 表格支持以下属性：

- `isTableHeaderOn`
- `列宽`
- `lightBackgroundColor`
- `darkBackgroundColor`
- `对齐`
- `colSpan`
- `行跨度`

## 示例

以下示例展示了两种受支持的表格格式。

### Markdown 表格

```markdown
| Feature | Free | Pro | Enterprise |
|---------|------|-----|------------|
| Spaces | 3 | 20 | Unlimited |
| API Access | - | Yes | Yes |
| Custom Domain | - | - | Yes |
| SSO/SAML | - | - | Yes |
```

### 带颜色的 HTML 表格

```html
<table isTableHeaderOn="true" columnWidths="200,200,200">
  <tr>
    <td darkBackgroundColor="#1E40AF" lightBackgroundColor="#3B82F6" align="center">
      <p><strong>Service</strong></p>
    </td>
    <td darkBackgroundColor="#1E40AF" lightBackgroundColor="#3B82F6" align="center">
      <p><strong>Status</strong></p>
    </td>
    <td darkBackgroundColor="#1E40AF" lightBackgroundColor="#3B82F6" align="center">
      <p><strong>Uptime</strong></p>
    </td>
  </tr>
  <tr>
    <td align="left">
      <p>API</p>
    </td>
    <td darkBackgroundColor="#166534" lightBackgroundColor="#86EFAC" align="center">
      <p>Operational</p>
    </td>
    <td align="center">
      <p>99.99%</p>
    </td>
  </tr>
  <tr>
    <td align="left">
      <p>CDN</p>
    </td>
    <td darkBackgroundColor="#166534" lightBackgroundColor="#86EFAC" align="center">
      <p>Operational</p>
    </td>
    <td align="center">
      <p>99.98%</p>
    </td>
  </tr>
  <tr>
    <td align="left">
      <p>Search</p>
    </td>
    <td darkBackgroundColor="#9A3412" lightBackgroundColor="#FED7AA" align="center">
      <p>Degraded</p>
    </td>
    <td align="center">
      <p>99.2%</p>
    </td>
  </tr>
</table>
```

