用于呈现数据的语义化表格元素。
| 全名 | 邮箱 | 组 |
|---|---|---|
| Danilo Sousa | danilo@example.com | 开发者 |
| Zahra Ambessa | zahra@example.com | 管理员 |
| Jasper Eriksson | jasper@example.com | 开发者 |
<Table.Root>
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell>Full name</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>Email</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>Group</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>Developer</Table.Cell>
</Table.Row>
<Table.Row>
<Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>
<Table.Cell>zahra@example.com</Table.Cell>
<Table.Cell>Admin</Table.Cell>
</Table.Row>
<Table.Row>
<Table.RowHeaderCell>Jasper Eriksson</Table.RowHeaderCell>
<Table.Cell>jasper@example.com</Table.Cell>
<Table.Cell>Developer</Table.Cell>
</Table.Row>
</Table.Body>
</Table.Root>
将 Header 和 Body 部分分组。此组件基于 table 元素，并支持通用 margin 属性。
| 属性 | 类型 | 默认值 |
|---|---|---|
size | Responsive<"1" | "2" | "3"> | "2" |
variant | "surface" | "ghost" | "ghost" |
layout | Responsive<"auto" | "fixed"> | 无默认值 |
包含表格的列标题，基于 thead 元素。
显示表格数据。此组件基于 tbody 元素。
表格单元格的行。基于 tr 元素。
| 属性 | 类型 | 默认值 |
|---|---|---|
align | Responsive<"start" | "center" | "end" | "baseline"> | 无默认值 |
基本的表格单元格。此组件基于 td 元素，但使用 justify 而不是 align 来控制水平空间在表格单元格内的分布方式。
| 属性 | 类型 | 默认值 |
|---|---|---|
justify | Responsive<"start" | "center" | "end"> | 无默认值 |
width | Responsive<string> | 无默认值 |
minWidth | Responsive<string> | 无默认值 |
maxWidth | Responsive<string> | 无默认值 |
p | Responsive<enum | string> | 无默认值 |
px | Responsive<enum | string> | 无默认值 |
py | Responsive<enum | string> | 无默认值 |
pt | Responsive<enum | string> | 无默认值 |
pr | Responsive<enum | string> | 无默认值 |
pb | Responsive<enum | string> | 无默认值 |
pl | Responsive<enum | string> | 无默认值 |
表格列的标题。基于 th 元素，并提供与 Cell 部分相同的属性接口。
| 属性 | 类型 | 默认值 |
|---|---|---|
justify | Responsive<"start" | "center" | "end"> | 无默认值 |
width | Responsive<string> | 无默认值 |
minWidth | Responsive<string> | 无默认值 |
maxWidth | Responsive<string> | 无默认值 |
p | Responsive<enum | string> | 无默认值 |
px | Responsive<enum | string> | 无默认值 |
py | Responsive<enum | string> | 无默认值 |
pt | Responsive<enum | string> | 无默认值 |
pr | Responsive<enum | string> | 无默认值 |
pb | Responsive<enum | string> | 无默认值 |
pl | Responsive<enum | string> | 无默认值 |
表格行的标题。基于 th 元素，并提供与 Cell 部分相同的属性接口。
| 属性 | 类型 | 默认值 |
|---|---|---|
justify | Responsive<"start" | "center" | "end"> | 无默认值 |
width | Responsive<string> | 无默认值 |
minWidth | Responsive<string> | 无默认值 |
maxWidth | Responsive<string> | 无默认值 |
p | Responsive<enum | string> | 无默认值 |
px | Responsive<enum | string> | 无默认值 |
py | Responsive<enum | string> | 无默认值 |
pt | Responsive<enum | string> | 无默认值 |
pr | Responsive<enum | string> | 无默认值 |
pb | Responsive<enum | string> | 无默认值 |
pl | Responsive<enum | string> | 无默认值 |
使用 size 属性来控制表格单元格的文本和内边距应该有多大。
| 全名 | 邮箱 |
|---|---|
| Danilo Sousa | danilo@example.com |
| Zahra Ambessa | zahra@example.com |
| 全名 | 邮箱 |
|---|---|
| Danilo Sousa | danilo@example.com |
| Zahra Ambessa | zahra@example.com |
| 全名 | 邮箱 |
|---|---|
| Danilo Sousa | danilo@example.com |
| Zahra Ambessa | zahra@example.com |
<Flex direction="column" gap="5" maxWidth="350px">
<Table.Root size="1">
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell>Full name</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>Email</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>Full name</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>Email</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>Full name</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>Email</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" 为表格添加视觉上封闭的背板。
| 全名 | 邮箱 | 组 |
|---|---|---|
| Danilo Sousa | danilo@example.com | 开发者 |
| Zahra Ambessa | zahra@example.com | 管理员 |
| Jasper Eriksson | jasper@example.com | 开发者 |
<Table.Root variant="surface">
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell>Full name</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>Email</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>Group</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>Developer</Table.Cell>
</Table.Row>
<Table.Row>
<Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>
<Table.Cell>zahra@example.com</Table.Cell>
<Table.Cell>Admin</Table.Cell>
</Table.Row>
<Table.Row>
<Table.RowHeaderCell>Jasper Eriksson</Table.RowHeaderCell>
<Table.Cell>jasper@example.com</Table.Cell>
<Table.Cell>Developer</Table.Cell>
</Table.Row>
</Table.Body>
</Table.Root>