WordPress Gutenberg Table Block Tutorial

Earlier days you need a third-party plugin with Classic Editor to create tables in WordPress. However, Gutenberg offers a default Table block to insert responsive tables that looks beautiful. Here is how you can create tables in WordPress Gutenberg editor along with various examples. These tables use default “Table” block and do not use any other third-party plugin. If you are looking for creating tables with a plugin, checkout TablePress tutorial and how to create comparison table in WordPress.

Type of Tables You Can Create with Gutenberg

You can create the following type of tables using table block.

• Simple default table
• Striped table
• Colored table
• Table with header and footer sections
• Fixed width table

At this moment, you can’t create data tables with filters, search and pagination features using default Gutenberg Table block. Learn more about various other Gutenberg blocks and how to use them in your site.

Adding Default Table Block in WordPress

Simply type /table to insert a table block wherever you want when editing a post or page in Gutenberg editor.

You will be prompted to select number of rows and columns for your table. Select rows / columns count and click on “Create Table” button.

This will insert a basic table which will look like below (dummy data is filled to showcase).

Default Table	Default Table
Cell 1	Cell 2
Cell 3	Cell 4

Click on the table block to see a toolbar additional block options. You can use the options to align the entire table or adjust the alignment of only particular column in the table. You can also insert hyperlink to content inside the cell, highlight, add/delete rows, add/delete columns and insert an inline image inside a cell.

Remember that you can adjust the content alignment in each column independently. Below example table shows the first column aligned center while the second column aligned right.

Default Table	Default Table
Cell 1	Cell 2
Cell 3	Cell 4

Creating Different Types of Tables

There are also block settings available on the right sidebar. There you can find additional options for customizing the appearance of your table under “Settings” and “Styles” sections.

Using the sidebar settings for Table block, you can create different types of tables as explained below.

Striped Table Block

From the right sidebar, select “Stripes” option under “Styles” section to create a striped table like below. Uppercase typography option is used to change all text content inside the table to use capital letters.

Default Table	Default Table
Cell 1	Cell 2
Cell 3	Cell 4

Table with Header and Footer Sections

Select “Header Section” and “Footer Section” options under “Settings” section to add the header/footer to your table.

Header Label 1	Header Label 2
Default Table	Default Table
Cell 1	Cell 2
Cell 3	Cell 4
Footer Label 1	Footer Label 2

Table with Colors

Under “Styles” section, you have options to change the text and background colors. In addition to solid background, you can also create gradient background as shown in the below example.

Fixed Width Table – Striped and Colored

Use the “Fixed width table cells” option under “Settings” to fix the table column’s width regardless of the content inside the cells. You can combine the stripe, colors and fixed width to create a custom table like below.

Header Label 1	Header Label 2
Default Table	Default Table
Cell 1	Cell 2
Cell 3	Cell 4

Code Block for Gutenberg Table

You can copy the table code from code editor in Gutenberg (Options > Code Editor) and paste in anywhere on your site. For example, simple copy and paste the below code in your editor to create a simple default table as shown in the above example (default table block). Otherwise, you can create a reusable block for your custom table design to insert it anywhere on your site. After inserting the reusable table block, you can convert to regular block to edit and update the content on that particular post.

<!-- wp:table {"className":"is-style-regular"} -->
<figure class="wp-block-table is-style-regular"><table><tbody><tr><td>Default Table</td><td>Default Table</td></tr><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td>Cell 3</td><td>Cell 4</td></tr></tbody></table></figure>
<!-- /wp:table -->

Note that you can also use the Custom HTML element block to create your custom table by using HTML table tags.

Problems in Using Table Block

Gutenberg Table block is ideal for having a small table inside your content. Foe example, you can easily create a responsive table with 15 to 30 rows. However, it is impossible to edit large tables and the editor will be very slow or even crash when you try to copy paste large table data from Excel or other spreadsheet app. In addition, Table block also does not support data tables.

So, if you have large table with hundreds of rows, then it is best to use a plugin like TablePress. The advantage is that you can manage all tables centrally in one place and edit them without going to Gutenberg editor. The edited content will be automatically applied in all the places where you have inserted that table. Otherwise, you need to go to each instance and edit with default table block.

Learn 4 different ways to insert tables in WordPress along with their advantages and disadvantages.