# 表格

- Human documentation: [https://docs.univer.ai/zh-TW/guides/boards/features/tables](https://docs.univer.ai/zh-TW/guides/boards/features/tables)

- Agent Markdown: [https://docs.univer.ai/zh-TW/guides/boards/features/tables.md](https://docs.univer.ai/zh-TW/guides/boards/features/tables.md)

- Requested language: `zh-TW`

- Content language: `zh-TW`

- Documentation version: `1.2.0`

- Source: [boards/features/tables.zh-TW.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/boards/features/tables.zh-TW.mdx)

---

#### Package metadata

```json
{
  "mobile": true,
  "preset": [],
  "plugins": [
    {
      "client": "@univerjs-pro/boards-table",
      "facade": "@univerjs-pro/boards-table/facade"
    },
    {
      "client": "@univerjs-pro/boards-table-ui",
      "locale": "@univerjs-pro/boards-table-ui/locale/zh-TW",
      "style": "@univerjs-pro/boards-table-ui/lib/index.css"
    }
  ],
  "license": true,
  "server": false
}
```

Board 的表格支援分為模型套件與 UI 套件。若瀏覽器編輯器需要在 Board 畫布上編輯表格元素，請同時註冊這兩個套件。

## 註冊表格支援

```ts
import { UniverBoardsTablePlugin } from '@univerjs-pro/boards-table'
import { UniverBoardsTableUIPlugin } from '@univerjs-pro/boards-table-ui'
import BoardsTableUIEnUS from '@univerjs-pro/boards-table-ui/locale/en-US'

import '@univerjs-pro/boards-table/facade'
import '@univerjs-pro/boards-table-ui/lib/index.css'

univer.registerPlugin(UniverBoardsTablePlugin)
univer.registerPlugin(UniverBoardsTableUIPlugin)
```

## 行動裝置支援

先設定[行動版編輯器](https://docs.univer.ai/zh-TW/guides/boards/getting-started/installation.md#mobile-support)。在本頁外掛模式的初始化程式碼中，將下列桌面版註冊替換為同一套件匯出的行動版外掛，並在**開啟文件前**完成。保留模型外掛、樣式、語言套件與 Facade 匯入，請勿同時註冊兩個版本。

| 套件                              | 桌面版註冊                       | 行動版註冊                             |
| ------------------------------- | --------------------------- | --------------------------------- |
| `@univerjs-pro/boards-table-ui` | `UniverBoardsTableUIPlugin` | `UniverBoardsTableMobileUIPlugin` |

## 套件職責

* `@univerjs-pro/boards-table` 將表格元素整合至 Board 模型。
* `@univerjs-pro/boards-table-ui` 在 Board 畫布上加入表格的渲染與編輯 UI，並為瀏覽器編輯器提供 `@univerjs-pro/boards-table-ui/locale/*` 和 `@univerjs-pro/boards-table-ui/lib/index.css`。

## 快照資料

Board 表格元素會儲存 `tableId` 與 Board 元素的共用欄位。表格資料由表格外掛管理，並透過 Board 資源加以參照。

```ts
const table = board.insertTable({
  left: 120,
  top: 120,
  width: 480,
  height: 280,
  rows: 3,
  columns: 4,
})
if (!table) throw new Error('Cannot insert Board table')
```

開啟含有 `table` 元素的快照前，請先註冊表格支援。

## 穩定的表格色彩

插入 Board 表格或變更其樣式時，外掛會將解析後的主題色盤與該表格一併儲存。因此，即使全域 Univer 主題發生變化，既有表格仍會保留原本的色彩；選取其他樣式時則會建立該表格自有的新主題快照。