Table Block

The Table Block lets you add a table to WordPress with columns and rows to display data in tabular form …

WordPress Gutenberg Blocks – Table

WordPress Gutenberg - Table Block

This tutorial is part of our WordPress Gutenberg: The Ultimate Guide For Non-Technical WordPress Users series.

***

Table Block Description

The Table Block lets you add a table to WordPress with columns and rows to display data in tabular form.

Add Tables to WordPress using the Table Block

(Add Tables to WordPress using the Table Block)

How To Use The Table Block

To add a Table Block:

  • Either:
    • Click on the ‘Add Block’ tool in the Editing Toolbar section and select a ‘Table’ block (in Most Used or Formatting section), or
    • Add the ‘Table’ block in the Content Area.
  • Set a number of columns and rows for your table.
  • Create your table.
  • Add your table content.
  • Use the tools in the Table Block Editor or Block Settings section to edit and format your Table.

Let’s go through the above steps:

First, create a new post or page or open an existing post or page and either:

Click on the ‘Add Block’ tool and select a ‘Table’ block …

'Add Block' Tool - Add Table Block

(‘Add Block’ Tool – Add Table Block)

Or, select a Table Block in the Content Area

Add a Table Block from the Content Area

(Add a Table Block from the Content Area)

After adding a Table Block and creating a table, type or paste your content into the columns and rows …

Edit a Table Block

(Add content to your table)

After adding content to your table:

  • Edit and configure block settings,
  • Save, publish, or update your post or page.

How To Edit A Table Block

To edit a Table Block:

  • Click inside the Table Block to select it.
  • Use the Block Editor tools to:
    • Change table alignment (float tabe left, center, or right).
    • Add/Remove columns and rows.
    • Format table text (bold, italics, strikethrough).
    • Add a hyperlink to table content.
  • Use the Block Settings to:
    • Change the style of the table.
    • Fix table cell width.

Use the ‘Alignment’ and ‘Width’ tools to float the table in your content and set a width option (wide or full) …

(Edit a Table Block)

Use the ‘Edit Table’ tool to add or delete table columns and rows …

Add and delete columns and rows in your table

(Add and delete columns and rows in your table)

Remember to update and publish your post or page to save your settings.

How To Remove A Table Block

To delete or remove a table block:

  • Click inside the Table Block to select it.
  • Select the ‘More Options’ tool in the Block Editor.
  • Click on ‘Remove Block’.
  • The block will be removed from your post or page.

Remove a Table Block

(Remove a Table Block)

Additionally …

  • You can reposition your block using the ‘Move Up’ and ‘Move Down’ arrows or the Drag and Drop handle tool (see our ‘How To Use Blocks‘ tutorial if you need help with this step).
  • You can also convert Table Blocks into Reusable Blocks.

Table Block Tools, Options & Settings

The Table Block includes tools, options, and settings for:

  • Table Block Editor
  • Table Block Settings

Table Block Editor

Table Block Editor

(Table Block Editor)

The Table Block Editor includes tools that let you perform the following operations:

  • Change Block Type (See ‘Table Block – Additional Info’ section below.)
  • Align Table
    • Align left
    • Align center
    • Align right
  • Table Width
    • Wide width
    • Full width
  • Edit Table
    • Add Row Before
    • Add Row After
    • Delete Row
    • Add Column Before
    • Add Column After
    • Delete Column
  • Format Table Text
    • Bold
    • Italics
    • Strikethrough
  • Add Hyperlinks
    • Paste link URL
    • Type to search and link to existing content
    • Hit ‘Enter’ or click ‘Apply’ button to create link
    • Option to open link in new tab
  • More Options

Table Block Editor

(Table Block Editor)

Table Block Settings

Table Block Settings

(Table Block Settings)

Table Block settings include:

  • Block description area
  • Styles
    • Regular – Plain table with light-colored rows
    • Stripe – Alternating dark & light-colored rows
  • Table Settings
    • Fixed Width Table Cells (On/Off)
  • Advanced Settings
    • Additional CSS Class

Table Block Settings

(Table Block Settings)

Table Block – Additional Info

The Table Block cannot be converted into other block types …

Change Block Type - Table Block

(Change Block Type – Table Block)

Info

Notes:

  • Selecting ‘Change Block Type’ only brings up the ‘Block Styles’ menu allowing you to change the style of your table.

Table Block - Change Block Type

(Table Block – Change Block Type)

Additionally:

Installing plugins or themes on your site may add new functionality, options, or settings to Table Blocks.

***

Congratulations! Now you know how to use the WordPress Gutenberg content editor Table Block.

WordPress Gutenberg - Making WordPress Easier For Non-Techies

***

"I have used the tutorials to teach all of my clients and it has probably never been so easy for everyone to learn WordPress ... Now I don't need to buy all these very expensive video courses that often don't deliver what they promise." - Stefan Wendt, Internet Marketing Success Group