---
title: "表头扩展"
description: "使用 Tiptap 的表头扩展改进表格。轻松控制表格头部。文档中的源代码和使用示例！"
canonical_url: "https://tiptap.zhcndoc.com/editor/extensions/nodes/table-header"
---

# 表头扩展

使用 Tiptap 的表头扩展改进表格。轻松控制表格头部。文档中的源代码和使用示例！

该扩展补充了 [`Table`](https://tiptap.zhcndoc.com/editor/extensions/nodes/table.md) 扩展，并添加了… 你猜对了… 表格头部。

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

## 安装

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

此扩展需要安装 [`Table`](https://tiptap.zhcndoc.com/editor/extensions/nodes/table.md) 扩展。

此扩展随 `TableKit` 扩展默认安装，因此您无需单独安装它。

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

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

## 使用

表头是可选的。但来吧，你想要它们，对吧？如果你不想要它们，可以像这样更新 [`TableRow`](https://tiptap.zhcndoc.com/editor/extensions/nodes/table-row.md) 扩展的 `content` 属性：

```js
// 不带表头的表格行
TableRow.extend({
  content: 'tableCell*',
})
```

这是默认设置，允许表头：

```js
// 带表头的表格行（默认）
TableRow.extend({
  content: '(tableCell | tableHeader)*',
})
```

## 源代码

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

## 最小安装

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

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