# 表格

用于呈现数据的语义表格元素。

```jsx
<Table.Root>
  <Table.Header>
    <Table.Row>
      <Table.ColumnHeaderCell>全名</Table.ColumnHeaderCell>

      <Table.ColumnHeaderCell>邮箱</Table.ColumnHeaderCell>

      <Table.ColumnHeaderCell>组</Table.ColumnHeaderCell>
    </Table.Row>
  </Table.Header>

  <Table.Body>
    <Table.Row>
      <Table.RowHeaderCell>Danilo Sousa</Table.RowHeaderCell>

      <Table.Cell>danilo@example.com</Table.Cell>

      <Table.Cell>开发者</Table.Cell>
    </Table.Row>

    <Table.Row>
      <Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>

      <Table.Cell>zahra@example.com</Table.Cell>

      <Table.Cell>管理员</Table.Cell>
    </Table.Row>

    <Table.Row>
      <Table.RowHeaderCell>Jasper Eriksson</Table.RowHeaderCell>

      <Table.Cell>jasper@example.com</Table.Cell>

      <Table.Cell>开发者</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table.Root>
```

## [API 参考](#api-参考)

### [Root](#root)

将 `Header` 和 `Body` 部分分组。该组件基于 `table` 元素，并支持 [常见的边距属性](/themes/docs/overview/layout#margin-props)。

| Prop      | Type                            | Default          |
| --------- | ------------------------------- | ---------------- |
| `size`    | `Responsive<"1" \| "2" \| "3">` | `"2"`            |
| `variant` | `"surface" \| "ghost"`          | `"ghost"`        |
| `layout`  | `Responsive<"auto" \| "fixed">` | No default value |

### [Header](#header)

包含表格的列标题，基于 `thead` 元素。

### [Body](#body)

显示表格数据。该组件基于 `tbody` 元素。

### [Row](#row)

一行表格单元格。基于 `tr` 元素。

| Prop    | Type                                                     | Default          |
| ------- | -------------------------------------------------------- | ---------------- |
| `align` | `Responsive<"start" \| "center" \| "end" \| "baseline">` | No default value |

### [Cell](#cell)

一个基本的表格单元格。该组件基于 `td` 元素，但使用 `justify` 而不是 `align` 来控制表格单元格内的水平空间分配。

| Prop       | Type                                       | Default          |
| ---------- | ------------------------------------------ | ---------------- |
| `justify`  | `Responsive<"start" \| "center" \| "end">` | No default value |
| `width`    | `Responsive<string>`                       | No default value |
| `minWidth` | `Responsive<string>`                       | No default value |
| `maxWidth` | `Responsive<string>`                       | No default value |
| `p`        | `Responsive<enum \| string>`               | No default value |
| `px`       | `Responsive<enum \| string>`               | No default value |
| `py`       | `Responsive<enum \| string>`               | No default value |
| `pt`       | `Responsive<enum \| string>`               | No default value |
| `pr`       | `Responsive<enum \| string>`               | No default value |
| `pb`       | `Responsive<enum \| string>`               | No default value |
| `pl`       | `Responsive<enum \| string>`               | No default value |

### [ColumnHeaderCell](#columnheadercell)

表格列的标题。基于 `th` 元素，并提供与 `Cell` 部分相同的属性接口。

| Prop       | Type                                       | Default          |
| ---------- | ------------------------------------------ | ---------------- |
| `justify`  | `Responsive<"start" \| "center" \| "end">` | No default value |
| `width`    | `Responsive<string>`                       | No default value |
| `minWidth` | `Responsive<string>`                       | No default value |
| `maxWidth` | `Responsive<string>`                       | No default value |
| `p`        | `Responsive<enum \| string>`               | No default value |
| `px`       | `Responsive<enum \| string>`               | No default value |
| `py`       | `Responsive<enum \| string>`               | No default value |
| `pt`       | `Responsive<enum \| string>`               | No default value |
| `pr`       | `Responsive<enum \| string>`               | No default value |
| `pb`       | `Responsive<enum \| string>`               | No default value |
| `pl`       | `Responsive<enum \| string>`               | No default value |

### [RowHeaderCell](#rowheadercell)

表格行的标题。基于 `th` 元素，并提供与 `Cell` 部分相同的属性接口。

| Prop       | Type                                       | Default          |
| ---------- | ------------------------------------------ | ---------------- |
| `justify`  | `Responsive<"start" \| "center" \| "end">` | No default value |
| `width`    | `Responsive<string>`                       | No default value |
| `minWidth` | `Responsive<string>`                       | No default value |
| `maxWidth` | `Responsive<string>`                       | No default value |
| `p`        | `Responsive<enum \| string>`               | No default value |
| `px`       | `Responsive<enum \| string>`               | No default value |
| `py`       | `Responsive<enum \| string>`               | No default value |
| `pt`       | `Responsive<enum \| string>`               | No default value |
| `pr`       | `Responsive<enum \| string>`               | No default value |
| `pb`       | `Responsive<enum \| string>`               | No default value |
| `pl`       | `Responsive<enum \| string>`               | No default value |

## [示例](#示例)

### [尺寸](#尺寸)

使用 `size` 属性控制表格单元格中文本和内边距的大小。

```jsx
<Flex direction="column" gap="5" maxWidth="350px">
  <Table.Root size="1">
    <Table.Header>
      <Table.Row>
        <Table.ColumnHeaderCell>全名</Table.ColumnHeaderCell>

        <Table.ColumnHeaderCell>邮箱</Table.ColumnHeaderCell>
      </Table.Row>
    </Table.Header>

    <Table.Body>
      <Table.Row>
        <Table.RowHeaderCell>Danilo Sousa</Table.RowHeaderCell>

        <Table.Cell>danilo@example.com</Table.Cell>
      </Table.Row>

      <Table.Row>
        <Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>

        <Table.Cell>zahra@example.com</Table.Cell>
      </Table.Row>
    </Table.Body>
  </Table.Root>

  <Table.Root size="2">
    <Table.Header>
      <Table.Row>
        <Table.ColumnHeaderCell>全名</Table.ColumnHeaderCell>

        <Table.ColumnHeaderCell>邮箱</Table.ColumnHeaderCell>
      </Table.Row>
    </Table.Header>

    <Table.Body>
      <Table.Row>
        <Table.RowHeaderCell>Danilo Sousa</Table.RowHeaderCell>

        <Table.Cell>danilo@example.com</Table.Cell>
      </Table.Row>

      <Table.Row>
        <Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>

        <Table.Cell>zahra@example.com</Table.Cell>
      </Table.Row>
    </Table.Body>
  </Table.Root>

  <Table.Root size="3">
    <Table.Header>
      <Table.Row>
        <Table.ColumnHeaderCell>全名</Table.ColumnHeaderCell>

        <Table.ColumnHeaderCell>邮箱</Table.ColumnHeaderCell>
      </Table.Row>
    </Table.Header>

    <Table.Body>
      <Table.Row>
        <Table.RowHeaderCell>Danilo Sousa</Table.RowHeaderCell>

        <Table.Cell>danilo@example.com</Table.Cell>
      </Table.Row>

      <Table.Row>
        <Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>

        <Table.Cell>zahra@example.com</Table.Cell>
      </Table.Row>
    </Table.Body>
  </Table.Root>
</Flex>
```

### [带有背板](#带有背板)

使用 `variant="surface"` 为表格添加一个视觉上封闭的背板。

```jsx
<Table.Root variant="surface">
  <Table.Header>
    <Table.Row>
      <Table.ColumnHeaderCell>全名</Table.ColumnHeaderCell>

      <Table.ColumnHeaderCell>邮箱</Table.ColumnHeaderCell>

      <Table.ColumnHeaderCell>组</Table.ColumnHeaderCell>
    </Table.Row>
  </Table.Header>

  <Table.Body>
    <Table.Row>
      <Table.RowHeaderCell>Danilo Sousa</Table.RowHeaderCell>

      <Table.Cell>danilo@example.com</Table.Cell>

      <Table.Cell>开发者</Table.Cell>
    </Table.Row>

    <Table.Row>
      <Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>

      <Table.Cell>zahra@example.com</Table.Cell>

      <Table.Cell>管理员</Table.Cell>
    </Table.Row>

    <Table.Row>
      <Table.RowHeaderCell>Jasper Eriksson</Table.RowHeaderCell>

      <Table.Cell>jasper@example.com</Table.Cell>

      <Table.Cell>开发者</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table.Root>
```

<!--$-->

<!--/$-->