---
title: "表格扩展"
description: "在 Tiptap 中使用表格扩展将表格添加到你的文档中，提供各种自定义选项。请在我们的文档中了解更多信息！"
canonical_url: "https://tiptap.zhcndoc.com/editor/extensions/nodes/table"
---

# 表格扩展

在 Tiptap 中使用表格扩展将表格添加到你的文档中，提供各种自定义选项。请在我们的文档中了解更多信息！

没有什么比一个老派的 HTML 表格更有趣了。`Table` 扩展使您能够将这个 WYSIWYG 编辑的圣杯添加到您的编辑器中。

别忘了添加一个 `spacer.gif`。 （开玩笑。如果您不知道那是什么，请忽略。）

> **Interactive demo:** [Table](https://embed.tiptap.dev/preview/Nodes/Table)

## 安装

```bash
npm install @tiptap/extension-table
```

这个扩展在 `TableKit` 扩展中默认安装，所以你不需要单独安装它。

```ts
import { Editor } from '@tiptap/core'
import { TableKit } from '@tiptap/extension-table'

new Editor({
  extensions: [TableKit],
})
```

## 设置

### HTMLAttributes

要添加到渲染的 HTML 标签中的自定义 HTML 属性。

```js
Table.configure({
  HTMLAttributes: {
    class: 'my-custom-class',
  },
})
```

### resizable

默认值: `false`

### renderWrapper

Controls whether a wrapper `<div>` is rendered around the table when the table is not resizable or the editor is not editable, maintaining layout consistency with the node view used for resizable tables.

Default: `false`

### handleWidth

默认值: `5`

### cellMinWidth

默认值: `25`

### View

默认值: `TableView`

### lastColumnResizable

默认值: `true`

### allowTableNodeSelection

默认值: `false`

## 命令

### insertTable()

默认情况下创建一个三乘三的表格，包括一个表头行。您可以指定自定义的行、列和表头设置：

```js
editor.commands.insertTable()
editor.commands.insertTable({ rows: 3, cols: 3, withHeaderRow: false })
```

### addColumnBefore()

在当前列之前添加一列。

```js
editor.commands.addColumnBefore()
```

### addColumnAfter()

在当前列之后添加一列。

```js
editor.commands.addColumnAfter()
```

### deleteColumn()

删除当前列。

```js
editor.commands.deleteColumn()
```

### addRowBefore()

在当前行上方添加一行。

```js
editor.commands.addRowBefore()
```

### addRowAfter()

在当前行下方添加一行。

```js
editor.commands.addRowAfter()
```

### deleteRow()

删除当前行。

```js
editor.commands.deleteRow()
```

### deleteTable()

删除整个表格。

```js
editor.commands.deleteTable()
```

### mergeCells()

将所有选定的单元格合并为一个单元格。

```js
editor.commands.mergeCells()
```

### splitCell()

拆分当前单元格。

```js
editor.commands.splitCell()
```

### toggleHeaderColumn()

将当前列设为表头列。

```js
editor.commands.toggleHeaderColumn()
```

### toggleHeaderRow()

将当前行设为表头行。

```js
editor.commands.toggleHeaderRow()
```

### toggleHeaderCell()

将当前单元格设为表头单元格。

```js
editor.commands.toggleHeaderCell()
```

### mergeOrSplit()

如果选择了多个单元格，则将其合并。如果选择了单个单元格，则将其拆分为两个单元格。

```js
editor.commands.mergeOrSplit()
```

### setCellAttribute()

为当前单元格设置指定属性。可以是您在 [`TableCell`](https://tiptap.zhcndoc.com/editor/extensions/nodes/table-cell.md) 扩展中定义的任何内容，例如背景颜色。确保首先注册 [您的自定义属性](https://tiptap.zhcndoc.com/editor/extensions/custom-extensions/extend-existing.md#attributes)。

```js
editor.commands.setCellAttribute('customAttribute', 'value')
editor.commands.setCellAttribute('backgroundColor', '#000')
```

### goToNextCell()

转到下一个单元格。

```js
editor.commands.goToNextCell()
```

### goToPreviousCell()

转到上一个单元格。

```js
editor.commands.goToPreviousCell()
```

### fixTables()

检查文档中的所有表格，并在必要时修复它们。

```js
editor.commands.fixTables()
```

## 源代码

[packages/extension-table/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-table/)

## 最小安装

```js
import { Editor } from '@tiptap/core'
import { Table } from '@tiptap/extension-table/table'

new Editor({
  extensions: [Table],
})
```