How to Add an Image to a Table in WordPress

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!

美しいテーブルを作る
ブロックエディター付き

方法1:デフォルトのテーブルブロックを使う

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.

Add the Table Block to the Editor

Define the number of rows and columns.

Define the number of rows and columns

The table will be created in a few seconds.

Default table is created

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.

をクリックする。 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.

Select and Add an Image

The image will be added in a second. Now, you can increase its size by changing its width.

Set width for the Inline Image

Similarly, add a new image to the other column using the same Inline Image option.

Add inline image to a table

Method 2: Using the Tableberg Block

テーブルバーグ 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 テーブルバーグ・ブロック to the editor. The block works the same way as the default Table block as shown above.

TableBergブロックを見つけて、Gutenbergエディタに追加します。

Define the row and column number.

The table outline is ready.

The table outline is ready

Step 02: Add the Image Block to the Table

TableBerg includes the イメージブロック. It works similarly to the Gutenberg Image block. Add the Image block to the cell.

Add the Image Block to the Table

Select the option to upload your desired image from the respective source. For this tutorial, we’ll upload the image from the Media Library.

Select the image uploading option

Step 03: Select and Upload an Image

Hope you know what you have to do here. Choose an image and click the Select button.

Select and Upload an Image

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.

The image will be added to the table

Step 04: Customize and Stylize the Image

に来てほしい。 設定タブ 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.

に行く。 スタイルタブ. You can add a border and the border-radius using options from this tab.

Stylize the image on the table

Thus, you can add images to the table in WordPress.

フィニッシング・ノート

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:



テーブルバーグ・チーム