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.

 

Conclusion

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.

Related:

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:

How to Add a Site Logo Block in WordPress with Gutenberg

Adding a site logo in WordPress with Gutenberg is straightforward and requires only a few mouse clicks and just several minutes of your time. In the following paragraphs, you will read how to add a site logo to your WordPress website via the Gutenberg editor step by...

How to Add Images to WordPress with Gutenberg

Adding images with Gutenberg is quite simple. The block editor is very user-friendly and allows you to add images in several ways. In the following paragraphs, you will read about 4 methods you can instantly use to upload the media files you want.   How to Add...

How to Disable Gutenberg in WordPress

If Gutenberg is not suitable for your needs and wish to switch back to the Classic Editor, continue reading, as in this article we will show you 3 simple methods of how to disable the block editor. In the following sections, you will read how to disable Gutenberg by:...

5 Best Gutenberg Plugins for WordPress

One of the fastest and most convenient ways of enhancing the functionalities of Gutenberg is by using various WordPress plugins. Although Gutenberg is very versatile and feature-rich by itself, the open-source nature of WordPress has inspired developers all around the...

How to Add a Contact Form with WordPress Gutenberg Editor

If you are using Gutenberg to craft your WordPress website, then you should know that the process is very easy, especially by using the block editor. In the following paragraphs, you will read how to add one to your pages.   How to Add a Contact Form with...

Ready to Create Your Website?