Gutenberg Table Block

Here are examples of tables made with WordPress Gutenberg editor. 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

Default Table Block

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

Striped Table Block

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

Table with Header and Footer Sections

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

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

Gradient Background and Colored Text

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

Fixed Width Table – Striped and Colored

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

Content Center Aligned Table

You can adjust the content alignment in each column independently.

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

Code for Table

Copy and paste the below code on your editor to create a simple default table as shown in the above example.

<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>

Gutenberg Table Customizing Options

When you click on the table block, you can find a pop-up showing additional options. It is possible to align the entire table or adjust the alignment of only particular column of the table. You can hyperlink, highlight, add/delete rows, add/delete columns and insert an inline image inside a cell. Click on the three dots options icon on your table block and select “Show more settings”.

You will see additional options in the right sidebar document panel. If you see “Hide more settings” then already the sidebar settings should be visible. From the available options, you can customize the appearance of your table.

Note: You can use the Custom HTML element block to create your custom table by using HTML table tags.