How to Use WordPress Table Block (Step-by-Step Tutorial for Beginners)

Creating tables in WordPress using the Gutenberg built-in Table Block is simple and straightforward. Just select the Table Block, define the number of rows and columns, and start adding your content like text, images, or links. You can then customize the appearance using the toolbar and sidebar settings to adjust typography, striped rows, colors, borders, dimensions, alignment, and more.

It’s that easy. However, while the default Table Block is user-friendly for basic needs, it comes with several limitations especially if you’re looking to add rich styling, interactive features, or ensure full responsiveness on mobile and tablet devices.

In this guide, I’ll walk you through:

• Table setup options using WordPress’s default Table Block
• How to create a basic table with built-in features
• How to build an advanced table, all within the Gutenberg editor

So, let’s dive in.

Step 1: Insert Table Block

To add a table block, open your post or page in your WordPress site. Click the plus (+) icon to open the block inserter, search for “Table,” and click to add it to your content area. 

A pop-up will appear and simply choose the number of rows and columns you need in your table. You can begin with a simple layout, such as 2 rows by 2 columns, or expand it as needed. Then, hit on “Create table”.

However, you can add/delete rows/columns anytime further. Once created, you can click inside each cell to start entering your content. 

Step 2: Customize Table layout with Toolbar

After inserting your table, you can customize its structure using the toolbar and settings panel. When you select the Table block, you’ll see formatting controls appear above it, along with more advanced options in the right sidebar. 

Let’s first discuss the upper toolbar. It gives you quick access to essential controls for editing both the block itself and the content inside the cells.

From left to right, the Table block toolbar includes several custom options.

• Change Table Block Type:

In this option, you can convert the Table block into a different type of block such as a Group block to edit the entire table altogether with custom background, spacing, or width. 

And, to change the table’s style, you can select from Default to Stripes if you want to add alternating row colors for enhanced readability.

Note: If you choose the group block, then, you’ll get some other table layout blocks like row, stack, grid, columns, cover.  These are all the different variations of group blocks.

Each block offers specific custom features to manage your table more easily and quickly. You have to choose these blocks based on your needs. 

To make it clear about which table block is for which case, check out the table below:

Block	What It’s for
Row	Arranges inner blocks horizontally in a single row with equal or custom spacing. You can use it for buttons, images, or text side by side.
Stack	Arrange inner blocks vertically, one after another. Use it for linear content like heading, paragraph, etc.
Column	Adds one or more vertical sections side by side, each acting like a container. You can place multiple blocks in each column.
Grid	Creates a responsive grid layout with flexible rows and columns. Great for advanced layouts like galleries, product cards, or feature sections.
Cover	Wraps content in a background image or color, optionally with overlay and text. Commonly used for hero banners or call-to-action sections.

And, for each of these blocks you’ll get unique toolbar options. For example, when you select cover, the toolbar options are like below, 

• Drag the Block:

This option lets you drag the entire table block to a different part of the page. So, you can quickly reposition the block manually, especially in long-form content or multi-block layouts.

• Block Up or Down:

These arrow buttons are for moving the block one position up or down in the content structure without using drag-and-drop.

• Table Alignment:

With this option, you can align the entire Table block to the left, center, or right of the page. If your theme supports it, you may also see Wide Width or Full Width options to expand the table’s horizontal space for better layout control.

• Column Alignment:

This option controls how your table content inside each column is aligned. You can set the alignment to left, center, or right, which helps with readability and formatting especially when dealing with numeric data or headings.

• Caption

To add the caption of your table, hit the option “add caption” in the toolbar. And, a new section will be enabled under the table to write the caption.

• Bold the Text:

If you want to bold any selected text within a table cell, just select the text and hit on the “B”. It’s perfect for highlighting headers, labels, or important values inside your table.

• Italicize the Text:

Use this option to apply italic styling to selected text in a cell. This Italic style is useful for notes, disclaimers, book titles, scientific names, etc.

• Add Link to Text:

With this feature, you can insert a hyperlink into selected text within a cell. It’s helpful when referencing related pages, downloadable files, external resources or product affiliates directly from your table content.

Simply select the text where you want to link and simply place the link in the “search or type URL” box.

• More Text Formatting Options:

This opens additional formatting tools like footnote, highlight, strikethrough, inline code, inline image, subscript, language, keyboard input, and superscript. It gives you more control over how the content appears inside each table cell.

However, the most used and primary item is “Inline image”. You can add images in the table with this option. Simply hit on it and a pop up will appear from where you can choose images from your device or media.

• Edit Table rows & columns:

To edit the rows/columns of your table, this “edit table”option lets you add or remove rows and columns. You can insert a row above or below the current one, add a new column, or delete existing rows/columns. 

• More Options:

This final icon opens up a menu with general block settings, such as copying, duplicating, locking, or locking the table. You can also add the table to Reusable Blocks, inspect block HTML, or manage other block-level settings.

Step 3: Style the Table with Sidebar

To begin styling your Table block in WordPress, first select the Table block that you’ve inserted into your page or post. Once selected, a right sidebar panel will open and from there, you can style the table block with colors, typography, dimensions, and other advanced settings.

• Cell width with header/footer

First, in the Settings section, you can enhance the table’s structure. You have the option to enable Fixed width table cells, which makes all columns have equal width regardless of the content inside them. 

You can also toggle the Header section, which will add a bold first row typically used for column titles. Similarly, you can enable the Footer section, which adds a bottom row for totals or summary information.

• Style table elements

Within the styles tab,you can choose between two preset styles for your table; Default and Stripes. These are the same styling options which you can do with the toolbar as well. However, keep in mind that the final appearance may vary depending on your theme’s design.

• Colors:

Moving on to the Color settings, this section allows you to change the text color and background color of your table. Though there are some default colors to choose, still you can also enter any color code in the color box and the color will be selected. Same goes for your table background too. But, for background, you can choose gradient colors as well.

Note: However, you can’t choose multiple colors in your table. For example, one color for headers, one color for rows/columns. So, whatever color you choose, it will be applied to the entire table.

• Typography:

From the Typography panel, you can modify the font family, adjust the size, set font weight or appearance, fine-tune the line height and letter spacing. You can also set the letter case (like uppercase or lowercase) and add text decorations such as underlines. But, just like colors, you can’t set different typography settings for your table.

The typography panel gives you options for,

• Size: S,M,L,XL
• Font: Default, Inter, Cardo
• Appearance: Default, regular, bold, regular italic, bold italic
• Line height: Default 1.5 and editable
• Letter spacing: set via px,%, em, rem, vw, vh
• Decoration: None, underline, strikethrough
• Latter case: None, uppercase, lowercase, capitalize

• Dimension:

Under the Dimensions section, you can control the spacing around your content. Adjusting the padding will change the space inside each table cell, while modifying the margin adjusts the spacing around the entire table block. 

• Border:

Netx, the Border settings allow you to define the look and feel of your table’s edges. You can change the border color, style (like solid, dashed, dotted), increase or decrease the width of the borders. 

And, you can set different border weights for different sides. Again, you can round the corner radius of the table for a softer look. 

• Additional CSS:

Lastly, if you’re comfortable working with more advanced settings, the Advanced panel lets you add an HTML anchor so you can link directly to this specific table from anywhere else on your page. 

You can also add one or more additional CSS classes with custom CSS to style your table block.

This is particularly helpful for users who want to add custom styles like hover effects, border customizations, or responsive behaviors via CSS. While not necessary for simple tables, these options make the Table block more flexible for developers or design-savvy users who need tighter visual or layout control.

Well, till now, I’ve discussed the different table options and how you can make a table block in wordpress. So, here’s a demo table I’ve created using the default wordpress settings:

This table displays all the necessary data, and I’ve also included pricing links so users can easily access more detailed information about the costs.

But, when I want to create an advanced table with more styling elements like bullet points, enhanced heading, star rating, etc, this default gutenberg table block won’t let me do so.

Again, some of my previous tables are large enough, when I try to edit the table, I have to manually do it, as there is no bulk editing option.

There is no way to make the Gutenberg Table Block responsive. So, your table will probably show broken or missing columns in phones or tablets.

How to Create an Advanced Table within WordPress Gutenberg?

You may feel the limitations in the previous version. 

But, how to create tables in wordpress with advanced toolbars?

Well, the easiest and most effective way to make WordPress advanced tables is using table plugins. There are several options for it, but after using some of the most popular ones. However, the best Gutenberg native table plugin, Rio Vizual, stands out here even with all the powerful customization you need.

I’ve also tried out some other table plugins like tablepress, Ninja table, wp data table, but none of these plugins are as solely gutenberg based as Rio Vizual. If you’re well familiar with the gutenberg editor and want to make an advanced table using blocks, this plugin will be the best choice.

Well, before going to into details, first just look at what you actually can make with Rio Vizual vs default table block:

Feature / Capability	Rio Vizual	Default Table Block
Custom styles for each cell(color, font size)	✅	❌
Nested blocks (like list, buttons, star rating, icons and more)	✅19 elements	❌
Pre-designed templates	✅52 templates	❌
Responsive on all devices	✅	❌
Bulk editing capabilities	✅	❌
Built-in sorting/filtering options	✅	❌

Well, now, let’s create a table with Rio Vizual and see how it transforms your basic table into an enhanced and fully customizable table.

Actually, it takes me 3 steps to build the table.

1. Install Rio Vizual to your wordpress
2. Choose the table type and template
3. Customize the table template

So, let me give you a quick overview of these steps to create an advanced wordpress table within the gutenberg block editor.

1. Simply install Rio Vizual in your wordpress site from Plugin >> Add New Plugin. Search with the name to install and activate the plugin.

Again, wordpress itself also recommended Rio Vizual in the block editor when you search for table blocks.

2. Now, once you install this plugin, you’ll find 3 different table blocks (table builder, pros and cons, pricing) with the default one. Choose which table type and then import the template you like. 

The thing I like about Rio Vizual is that it has plenty of templates for every table type and maximum of them are completely free. But, you can always make your table from scratch.

And, to make this table, I’ve chosen a phone comparison table template to match the concept of the previous gutenberg table.

3. Now, our template is imported and let’s start customizing the table. Again, I don’t have to do much customization as the main structure is already done.

So, I’m keeping the text as it is and adding the custom features to make it a more enhanced table. Again, Rio Vizual also offers a gutenberg like toolbar upper the table and right sidebar as well.

But, the elements are far more advanced and many compared to the gutenberg table toolbar. However, you’ll also get the basic editor table toolbar combined with it.

Now, from the upper toolbar, you can add different elements in your table. And, from the right sidebar, you’ll get all the customization options for each element.

Here, I’ve done the following customization for this table:

• Font of body: 16
• Heading color: F7F425E8
• Header font: 20
• Star ratings: FFFB00D6
• Button color: FFFB00D6

And, now, the demo table block looks like as follows:

It looks more professional, eye-catching than before. But, surprisingly, I only need a few minutes to customize it as with quick features in hand and of course for the bulk editing option. And, I’ve also made this table responsive for all devices using the table responsive option.

That’s it.

FAQs about WordPress Table Block

1. How to insert an image in a WordPress Gutenberg table?

To insert an image in a Gutenberg table, click inside a cell, then use the “/image” block command or click the “+” icon to add an Image Block directly inside the table cell. And, select image from your device or media library.

2. How can I use code to add tables to a WordPress site?

You can add tables using HTML in a Custom HTML Block or directly in a theme file. Use <table>, <tr>, and <td> tags to structure the content, then style it with custom CSS if needed.

3. How do I add a custom table in WordPress?

Gutenberg supports basic customizations through its block settings, such as adjusting column width, text alignment, and colors. However, for more advanced custom tables, you can either use a native Gutenberg plugin like Rio Vizual, or build one manually using HTML and CSS.

Conclusion

Tables are essential for organizing and presenting data clearly on your WordPress site. While the default Gutenberg Table Block works well for simple layouts, it has limitations when it comes to advanced styling, responsiveness, and dynamic content.

For users who want more control, flexibility, and visually rich designs, plugins like Rio Vizual offer an ideal solution. It also offers blocks and toolbar within the Gutenberg editor, again offer advanced custom features like pre-designed templates, star ratings, nested blocks, and mobile-friendly layouts.

So, if you just need to organize simple data, the default WordPress Table Block will do the job. But if you’re looking to create fully customized, styled tables, all within the same block-based interface, Rio Vizual is the way to go.