Plume Theme

English

简体中文

English

简体中文

Appearance

Star on GitHubCreate IssuesBuy me a Bubble Tea

Table Enhancement New

Copy page

About 1547 wordsAbout 5 min

2025-10-13

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,
        // The table width defaults to occupying the entire row.
        fullWidth: 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.

fullWidthOptionalboolean

false

The table width defaults to occupying the entire row.

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 1Header 2Header 3
Cell 1Cell 2Cell 3
Row 2DataInfo

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 1Header 2Header 3
Cell 1Cell 2Cell 3
Row 2DataInfo

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:

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

This is the Table Title

Input:

::: table full-width
| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Cell 1   | Cell 2   | Cell 3   |
| Row 2    | Data     | Info     |
:::

Output:

Header 1Header 2Header 3
Cell 1Cell 2Cell 3
Row 2DataInfo

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:

row1row1row1
row2row2row2
row3row3row3
row4row4row4

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:

col1col2col3col4
col1col2col3col4
col1col2col3col4
col1col2col3col4

This is the Table Title

Table Cell Highlighting

Method One

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

Method Two

Using the Attribute Support syntax

Input:

::: table title="This is the Table Title"
| (1,1) {.danger}    | (1,2)              | (1,3)            | (1,4)  {.warning} |
| ------------------ | ------------------ | ---------------- | ----------------- |
| (2,1)              | (2,2) {.danger}    | (2,3) {.warning} | (2,4)             |
| (3,1)              | (3,2) {.important} | (3,3) {.danger}  | (3,4)             |
| (4,1) {.important} | (4,2)              | (4,3)            | (4,4) {.danger}   |
:::

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 1Header 2Header 3
Cell 1Cell 2Cell 3
Cell 4Cell 5Cell 6

Table Cell Merging

Table cell merging is implemented through the attribute syntax supported by markdown-it-attrs. Therefore, it does not need to be used within the :::table container; you can use it in any table.

Inside a table cell, add rowspan=rows or colspan=cols (or a combination) using the attribute syntax {} at the end of the cell content to achieve table cell merging.

Input:

| A                       | B   | C   | D                |
| ----------------------- | --- | --- | ---------------- |
| 1                       | 11  | 111 | 1111 {rowspan=3} |
| 2 {colspan=2 rowspan=2} | 22  | 222 | 2222             |
| 3                       | 33  | 333 | 3333             |

Output:

ABCD
1111111111
2222
333

Contributors

pengzhanbo

Changelog

12/1/25, 3:30 AM
View All Changelog
  • db8a4-docs: optimize and completion docs (#766)on
  • 0e382-feat(plugin-md-power): add full-width support for table container, close #740 (#741)on
  • fffff-docs: update docson