Overview

The default table functionality in Markdown is relatively basic. However, in practical usage scenarios, it is often necessary to add additional information to tables, such as a table title, or extra features like the ability to copy table content.

Without breaking the table syntax, the theme provides a ::: table container to conveniently extend table capabilities.

The table enhancement container is under continuous development.

If you have suggestions for other features, please provide feedback via an Issue.

Configuration

This feature is disabled by default. You need to enable it in your theme configuration.

.vuepress/config.ts

export default defineUserConfig({
  theme: plumeTheme({
    markdown: {
      // table: true, // Enable default features
      table: {
        // Default table alignment: 'left' | 'center' | 'right'
        align: 'left',
        // Whether the table width is the max-content width
        // Inline elements will not wrap automatically; a scrollbar is displayed when the content exceeds the container width.
        maxContent: false,
        /**
         * Copy as HTML/Markdown
         * `true` is equivalent to `'all'`, enabling both HTML and Markdown copying.
         */
        copy: true, // true | 'all' | 'html' | 'md'
      }
    },
  })
})

Syntax

Simply wrap the table within a :::table block.

:::table title="Title" align="center" max-content copy="all"
| xx | xx | xx |
| -- | -- | -- |
| xx | xx | xx |
:::

Props

titleOptionalstring

Table title, displayed below the table.

alignOptional'left' | 'center' | 'right'

'left'

Table alignment.

copyOptionalboolean | 'all' | 'html' | 'md'

true

Displays a copy button in the top-right corner of the table for copying as HTML or Markdown.

• true is equivalent to 'all'.
• false hides the copy button.
• 'all' enables both 'html' and 'md' copying.
• 'html' enables copying as HTML.
• 'md' enables copying as Markdown.

maxContentOptionalboolean

false

Inline elements will not wrap automatically; a scrollbar is displayed when the content exceeds the container width.

hl-rowsOptionalstring

Configures row highlighting within the table.

The value uses the format type:row1,row2. Multiple type-row pairs can be combined using ;.

Examples:

• hl-rows="warning:1": Sets the first row to the warning color.
• hl-rows="danger:1,2": Sets the first and second rows to the danger color.
• hl-rows="warning:1,2;danger:3,4": Sets the first and second rows to the warning color, and the third and fourth rows to the danger color.

Built-in type support: tip, note, info, success, warning, danger, caution, important.

row counting starts from 1.

hl-colsOptionalstring

Configures column highlighting within the table.

The value uses the format type:col1,col2. Multiple type-column pairs can be combined using ;.

Examples:

• hl-cols="warning:1": Sets the first column to the warning color.
• hl-cols="danger:1,2": Sets the first and second columns to the danger color.
• hl-cols="warning:1,2;danger:3,4": Sets the first and second columns to the warning color, and the third and fourth columns to the danger color.

Built-in type support: tip, note, info, success, warning, danger, caution, important.

col counting starts from 1.

hl-cellsOptionalstring

Configures cell highlighting within the table.

The value uses the format type:(row,col). Multiple type-cell pairs can be combined using ;.

Examples:

• hl-cells="warning:(1,1)": Sets the cell at row 1, column 1 to the warning color.
• hl-cells="danger:(1,1)(2,2)": Sets the cells at (1,1) and (2,2) to the danger color.
• hl-cells="warning:(1,1)(2,2);danger:(3,3)(4,4)": Sets the cells at (1,1) and (2,2) to the warning color, and the cells at (3,3) and (4,4) to the danger color.

Built-in type support: tip, note, info, success, warning, danger, caution, important.

row counting starts from 1, col counting starts from 1.

Examples

Table Title

Input:

::: table title="This is the Table Title"
| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Cell 1   | Cell 2   | Cell 3   |
| Row 2    | Data     | Info     |
:::

Output:

Header 1	Header 2	Header 3
Cell 1	Cell 2	Cell 3
Row 2	Data	Info

This is the Table Title

Table Alignment

Input:

::: table title="This is the Table Title" align="center"
| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Cell 1   | Cell 2   | Cell 3   |
| Row 2    | Data     | Info     |
:::

Output:

Header 1	Header 2	Header 3
Cell 1	Cell 2	Cell 3
Row 2	Data	Info

This is the Table Title

Table Max Content Width

Input:

:::table title="This is the Table Title" max-content

| ID | Description                                                                 | Status       |
|----|-----------------------------------------------------------------------------|--------------|
| 1  | This is an extremely long description that should trigger text wrapping in most table implementations. | In Progress  |
| 2  | Short text                                                                  | ✅ Completed |
:::

Output:

ID	Description	Status
1	This is an extremely long description that should trigger text wrapping in most table implementations.	In Progress
2	Short text	✅ Completed

This is the Table Title

Table Row Highlighting

Input:

::: table title="This is the Table Title" hl-rows="tip:1;warning:2;important:3,4"
| row1 | row1 | row1 |
| ---- | ---- | ---- |
| row2 | row2 | row2 |
| row3 | row3 | row3 |
| row4 | row4 | row4 |
:::

Output:

row1	row1	row1
row2	row2	row2
row3	row3	row3
row4	row4	row4

This is the Table Title

Table Column Highlighting

Input:

::: table title="This is the Table Title" hl-cols="success:1;warning:2;danger:3,4"
| col1 | col2 | col3 | col4 |
| ---- | ---- | ---- | ---- |
| col1 | col2 | col3 | col4 |
| col1 | col2 | col3 | col4 |
| col1 | col2 | col3 | col4 |
:::

Output:

col1	col2	col3	col4
col1	col2	col3	col4
col1	col2	col3	col4
col1	col2	col3	col4

This is the Table Title

Table Cell Highlighting

Input:

::: table title="This is the Table Title" hl-cells="danger:(1,1)(2,2);success:(3,3)(4,4);warning:(1,4)(2,3);important:(3,2)(4,1)"
| (1,1) | (1,2) | (1,3) | (1,4) |
| ----- | ----- | ----- | ----- |
| (2,1) | (2,2) | (2,3) | (2,4) |
| (3,1) | (3,2) | (3,3) | (3,4) |
| (4,1) | (4,2) | (4,3) | (4,4) |
:::

Output:

(1,1)	(1,2)	(1,3)	(1,4)
(2,1)	(2,2)	(2,3)	(2,4)
(3,1)	(3,2)	(3,3)	(3,4)
(4,1)	(4,2)	(4,3)	(4,4)

This is the Table Title

Custom Highlight Types

In Custom CSS Styles, custom highlight types can be defined using the following format:

.vp-table table th.type,
.vp-table table td.type {
  color: #000;
  background-color: #fff;
}

For example, to add a blue highlight type:

.vp-table table th.blue,
.vp-table table td.blue {
  color: #4a7cb9;
  background-color: #a3c6e5;
}

This custom type can then be used in tables:

::: table hl-rows="blue:1" hl-cols="blue:1" hl-cells="blue:(3,3)"
| Header 1 | Header 2 | Header 3 |
| -------- | -------- | -------- |
| Cell 1   | Cell 2   | Cell 3   |
| Cell 4   | Cell 5   | Cell 6   |
:::

Header 1	Header 2	Header 3
Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6

Contributors

pengzhanbo

Changelog

10/13/25, 7:27 AM

View All Changelog

• fffff-docs: update docson 10/13/25