Visual content is undoubtedly crucial for engaging users. Whether you are a blogger, affiliate, eCommerce owner or else, you may need to add graphical content to your content for various reasons.
Images are one such important graphical content. Many users yet don’t know how to add images to WordPress tables. But by adding images to the table, you can easily create various types of tables like comparison, product specification, pricing tables, etc.
In this article, we’ll show you two easy methods of how to add an image to a table in WordPress. Let’s get started!
- Method 1: Using the default Table Block
- Method 2: Using the Tableberg Block
Create Beautiful Tables
With Block Editor
Method 1: Using the Default Table Block
The default Gutenberg block editor comes with the Inline Image option which you will find on the Toolbar. Using the Inline Image option, you can easily add images to your WordPress. Here’s the process.
Step 01: Add the Table Block to the Editor
Open a post or page where you want to add the table. Add the Table block to the editor.
Define the number of rows and columns.
The table will be created in a few seconds.
Step 02: Add the Inline Image Option to the Table
Place your cursor on the cell where you want to add an image. The toolbar will show up.
Click the More option on the toolbar. Find and hit Inline Image on the list.
Step 03: Select and Add an Image
You’ll be allowed to add an image whether from the Media Library or by uploading from your local drive. Choose the image you want. Click the Select button at the end.
The image will be added in a second. Now, you can increase its size by changing its width.
Similarly, add a new image to the other column using the same Inline Image option.
Method 2: Using the Tableberg Block
Tableberg is a feature-rich and beginner-friendly table builder plugin. With this plugin, you can also build tables and add images to their cells. We have explained the process below.
Step 01: Add the Tableberg Block to the Editor
Find and add the TableBerg block to the editor. The block works the same way as the default Table block as shown above.
Define the row and column number.
The table outline is ready.
Step 02: Add the Image Block to the Table
TableBerg includes the Image block. It works similarly to the Gutenberg Image block. Add the Image block to the cell.
Select the option to upload your desired image from the respective source. For this tutorial, we’ll upload the image from the Media Library.
Step 03: Select and Upload an Image
Hope you know what you have to do here. Choose an image and click the Select button.
The image will be added to the table instantly. You can change the size of the image by dragging the edge line as shown in the image below.
Step 04: Customize and Stylize the Image
Come to the Settings tab on the right sidebar. You can add an alternative text, aspect ratio, width, height, and resolution, which aren’t possible with the Inline Image option.
Go to the Styles tab. You can add a border and the border-radius using options from this tab.
Thus, you can add images to the table in WordPress.
Finishing Notes!
Although TableBerg is a new plugin, it’s going to be a game changer. It’s going to take the Gutenberg-based table-building experience to the next level very soon.
With the TableBerg plugin, you can add not only images but also various other types of content like ribbons, ratings, bullet lists, CTA buttons, custom HTML, etc.
Using them you can create multifunctional tables with the plugin. Check some posts: