Table block

Go to the List of Blocks

Use the Table block to easily create a table in any post or page. 

Add a Table block

To add the Table block to a page, click the Add block button to open the block inserter pop-up window and choose the Table block.

You can also use the keyboard shortcut /table to quickly insert a Table block. Remember that tables are best used for tabulated data rather than page design. For example, if you want columns, you can use the Columns block.

Detailed instructions on adding blocks can be found here.

Block toolbar

Each block has its own block-specific controls that allow you to manipulate the block right in the editor. If you hover over the buttons, tooltips will tell you what is behind the buttons, and also show you keyboard shortcuts when available.

The block toolbar for the paragraph block shows these buttons:

• Transform to
• Block-moving tools
• Align
• Change column alignment
• Add or remove caption
• Bold and Italics
• Link
• More Rich Text controls
• Edit table
• Options

Transform to

Click on the “Transform” button to convert the Table block into a “Group”, “Details”, or “Columns” block. It’s also possible to change the style of a table to “Default” or “Stripes”.

Block-moving tools

Use the block-moving tools to move the Table block.

The drag or six dots icon allows you to freely reposition the block anywhere within the editor by holding the icon and dragging it to the new location.

You can also use the arrow icons to move the block up or down within the group of nested blocks or when there are multiple blocks.

Detailed instructions on moving a block within the editor can be found here

Align

Use the change alignment tool to align the Table block. Choose one of the following options:

• None – leaves the block the current size.
• Wide width – increase the width of the block beyond the content size.
• Full width – extend the block to cover the full width of the screen.
• Align left – aligns the block left.
• Align center – aligns the block to the center.
• Align right – aligns the block right.

The “Wide width” and “Full width” alignment settings must be enabled by your WordPress theme. 

Change column alignment

Use the change column alignment tool to align the columns of a Table block. Choose one of the following options:

• Align column left – aligns the column left.
• Align column center – aligns the column to the center.
• Align column right – aligns the column right.

Add or remove caption

Use the add or remove caption option to toggle the caption of the Table block. You can apply bold or italic formatting to captions, or create a link.

Bold and italics

The Bold and Italics formatting options are used to customize the text in the Table block. You can also use keyboard shortcuts to enable these text formatting:

• Ctrl + B or Command + B to bold the text.
• Ctrl + I or Command + I to italicize the text.

Link

Use the link option to add a link to the table. It’s also possible to set it to open the link in a new tab.

Read about more link editing options.

More rich text options

The drop-down menu to the left of the More options menu contains a range of additional rich text editing options such as highlighting, inline code, strikethrough, and more.

Read about more rich text editing options.

Edit table

Use the edit table option to quickly manage rows and columns. It’s possible to insert a row or column before, insert a row or column after, and delete a row or a column. 

More options

The Options menu represented by three vertical dots on the far right of the toolbar gives you more features such as the ability to duplicate or remove the block.

Read about these and other settings.

Block settings

The block settings panel contains customization options specific to the block. To open it, select the block and click the Settings button next to the Publish or Save button.

Here are the options for the Table block:

Settings

The settings section provides three possible options:

Fixed width table cells – means rather than adapting the column widths to the content of the table, all columns will be equal width. This option is also available when the Table block is still in the placeholder state. As of version 6.6, this option is turned on by default.

Header section – adds a header section to the table.

Footer section – adds a footer section to the table.

Advanced

HTML anchor allows you to make a unique web address for a particular Table block. Then, you’ll be able to link directly to a Table block of your page. The Additional CSS class(es) lets you add CSS class(es) to your block, allowing you to write custom CSS and style the block as you see fit.

Styles

Choose between the “Default” and “Stripes” styles for your table. The “Default” style has a plain background and borders around the cells. The “Stripes” style has alternating row background colors.

The final appearance of the table may vary depending on your theme.

Color

The Table block provides Color settings options to change the text and background colors.

See this guide for more information about changing colors.

Typography

The Table block provides typography settings to change the font family, size, appearance, line height, letter case, letter spacing, and decoration.

Get more details about changing typography settings.

Dimensions

The Table block provides dimension settings options to change padding and margin size.

For details refer to this support article: Dimension settings overview

Border

The Table block provides border settings options to add border color, width, and radius.

For details refer to this support article: Border settings overview

Demo