Skies.ui Table：語意化表格與列／欄樣式，主題邊框與列背景；資料列表版面範例。

Table 表格

Table 外層包一層 overflow-x-auto 的容器，內為原生 <table>。TableHeader / TableBody / TableFooter 對應 <thead> / <tbody> / <tfoot>，TableRow、TableHead、TableCell、TableCaption 對應語意標籤，樣式與 border-border、muted 一致。

基本用法

季度概覽（示意）
專案	進度
Skies.ui	72%
文件站	100%

import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@skies-ui/ui";

export function Example() {
  return (
    <Table>
      <TableCaption>說明文字</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>欄 A</TableHead>
          <TableHead>欄 B</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>資料</TableCell>
          <TableCell>資料</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

not-prose 可避免 Fumadocs 的 typography 覆寫表格字級與邊距。

選取列（選用）

在 TableRow 上使用 data-state="selected" 可套用選取底色（與 Checkbox 同頁表單時常用）。

API 摘要

元件	對應標籤	備註
`Table`	`table`	外層捲動容器
`TableHeader`	`thead`	底部分隔線
`TableBody`	`tbody`	最後列無底框
`TableFooter`	`tfoot`	頂部分隔 + `muted/50` 底
`TableRow`	`tr`	hover、`data-[state=selected]`
`TableHead`	`th`	小字、`text-muted-foreground`
`TableCell`	`td`	`p-3`
`TableCaption`	`caption`	下方說明、muted

除需互動的儲存格外，Table 可在 Server Component 使用。

Table 表格

Table 表格

基本用法

選取列（選用）

API 摘要

On this page