Home » WordPress Tutorials » Basics » How to Create Tables in WordPress Using Gutenberg Editor

How to Create Tables in WordPress Using Gutenberg Editor

Creating a table in WordPress with the Gutenberg Block Editor is a straightforward task.

Should you need to add one or several tables to your pages, the following paragraphs explain how to do so.


How to Create Tables in WordPress using Gutenberg Editor


To add a table with the Block editor, the first thing you should do is enter your WordPress dashboard.

Once you have entered your admin panel, make sure that Gutenberg is selected as your default editor. To do so, head to Settings->Writing:

WordPress Gutenberg Block Editor Settings


Once you do, WordPress should open a page such as this:

WordPress Gutenberg Block Editor Settings Page


Once there, have a look at the Default editor for all users option and make sure to select Block editor:

WordPress Gutenberg Block Editor Enable Options


Once you select Block editor, click on the blue Save Changes button, so WordPress applies and saves your preferences:

WordPress Gutenberg Block Editor Save Settings


After you have selected Gutenberg as your preferred editor, open the page or blog post to which you wish to add a table to.

Also, keep in mind that the process of adding a table with Gutenberg is the same whether you wish to work on a blog post or a static page.

For this demonstration, we will add a table to a static page. Once we create a webpage, Gutenberg will automatically be activated:

WordPress Gutenberg Block Editor Interface


Now, click the black + sign, so you can browse the list of suggested Gutenberg blocks:

WordPress Gutenberg Block Editor Insert Block


Clicking the button will open a menu such as this one:

WordPress Gutenberg Block Editor Block Library


To find the Table block, simply type down “table block” in the search area, and find the Table icon:

WordPress Gutenberg Block Editor Table Block Icon


Now, click on the Table icon, so you insert the element in the content area:

WordPress Gutenberg Block Editor Table Block Settings


Once you click on the Table icon, notice that a new box with options will appear. Via the options within the box, you can decide the number of columns and rows:

WordPress Gutenberg Block Editor Columns and Rows Settings


Add as many columns and rows as you wish and then click the blue Create Table button:

WordPress Gutenberg Block Editor Create Table Button


Clicking this button will create a table with the parameters you just entered:

WordPress Gutenberg Block Editor Table Layout


Now you have managed to insert a table in your blog post/web page.

In the following paragraphs, you will read how to customize the table, so it best fits your site design and your personal preferences.


How to Customize Tables in WordPress Using Gutenberg Editor


Now that you have inserted a table in your site content, it is time to see all the options that help you customize it just the way you want.

To see the customization options, click on the Table block and have a look at the sidebar located at the right of the screen:

WordPress Gutenberg Block Editor Sidebar Settings


Then, have a look at the top of the sidebar and see that there are two sets of options that you can browse – Page options and Block options:

WordPress Gutenberg Block Editor Sidebar Page and Block Settings


To be able to tweak the options of your table, click on Block:

WordPress Gutenberg Block Editor Sidebar Block Settings


This will open the options that are available for each Gutenberg block. In the case of a Table block, the options look like this:

WordPress Gutenberg Block Editor Table Settings


In detail, these options are:

  • Fixed width table cell – engaging this will stop the cell from expanding once the text reaches the right corner of the cell.
  • Header Section – Adds a set of cells at the top of your table that can be used as headings for your table rows.
  • Footer Section – When engaged, add an additional row of cells at the bottom of your table.
  • HTML Anchor – This field allows you to create hyperlinks that point directly to this cell.
  • Additional CSS Class – This field allows you to add CSS code snippets, so you can further customize your table.


You can also change the color palette of the table, along with text colors and text typography. To access these settings, simply click on the Styles icon:

WordPress Gutenberg Block Editor Table Style Settings


Clicking this icon will open the various color and typography options for your page. With these settings, you can format your text any way you want:

WordPress Gutenberg Block Editor Table Style Settings


With these options, you can add various colors to the texts and cells, along with choosing text size, typography, and border size and colors:

  • Color: this option allows you to browse and select colors for your text and cells.
  • Typography: Allows you to change text font and text size
  • Border: Allows you to select the width and color of the border between cells.



Inserting tables in your WordPress website is quite easy when using Gutenberg. With a few simple steps, you can add various types of tables on your web pages and customize them any way you want with the numerous built-in Gutenberg styling options.


Was this article useful?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

Newest Articles:

10 Best WordPress Themes for Gutenberg

If you craft your WordPress website by using Gutenberg, then it is likely that you have thought about working with a block editor-compatible theme. If that is the case, then you should know that there are numerous WordPress themes that are meant to be a perfect fit...

How to Copy a Page with WordPress Gutenberg Editor

Looking for ways to copy your WordPress web pages? The Gutenberg block editor got you covered. In this article, you will read about 3 different methods you can instantly apply when crafting your WordPress website.   How to Copy a Page with WordPress Gutenberg...

How to Add Tabs to Your WordPress Site with Gutenberg

Tabs are quite useful in numerous situations and can be a fresh addition to your WordPress websites. Massively used to showcase content categories, news, and various other types of posts in a very structured manner, tabs contribute to making your site content more...

5 Best WordPress Slider Plugins for Gutenberg

When crafting your WordPress website, it is not only important to publish informative and well-structured content, but it is also crucial to make your web pages as aesthetically appealing as possible. An effective way of making your site more beautiful is by inserting...

How to Use the Navigation Block in Gutenberg

With the Gutenberg Navigation block, you can add various types of navigation on any page or within any blog post on your website. Similar to the classic WordPress menu, the Navigation block can be modified in numerous ways and become a handy tool in many situations....

Ready to Create Your Website?