WordPress Gutenberg editor allows you to create beautiful and engaging content with blocks. One of the blocks you can use is the Table block, which lets you insert a table with rows and columns into your post or page. But what if you want to add an image to a cell in the table block? How can you do that without using any plugin?
This article will show you two ways to insert an image into a cell in the Gutenberg Table block without the help of any third-party plugins. You can use the Inline Image option, which is the easiest and fastest way, or using the <img> HTML tag. Whatever the method you choose, you can customize the images by adding the custom CSS.
How to Insert Image to a Cell in Gutenberg Table Block
As mentioned earlier, we will show you inserting an image into a cell in Table block in two ways: Inline Image option and HTML.
Before starting the tutorial, please prepare your table. You can create new content (page/post) or select existing content with the Table block inside. Tweak and style up your Table block with your preference.
Method One: Using the Inline Image Option
First, click the cell where you want to add the image, and then click on the More button/dropdown arrow in the toolbar and select the Inline image.
Once you click the Inline image option, the Media library will open, and you can select an existing image or upload a new one.
Once the image is added, you can adjust the size of the image by changing the width value in the WIDTH input field.
You can repeat the process for any other cell where you want to add an image.
Method Two: Using the HTML Code
Next, we’re going to the following method.
Navigate to the block toolbar by clicking the Options button (⋮) -> Edit as HTML.
Afterward, please follow the steps below:
- Assign the cell you want to add the icons.
- Add
<img src="image-url">tag - Replace the “
image-url” with the URL of your image
You can get the image URL from a website that provides free images, such as Unsplash or Pexels, or from your own media library by copying the URL.
Once you’ve finished adding HTML code to your Table block, please return to the visual editor and preview your page by clicking the Preview button. Like the previous method, you can adjust the image size by changing the width value in the WIDTH input field.
Customizing the Images with CSS
Suppose you want to modify or style up the images, such as adding the border and border-radius, padding, margin, etc. You can add custom CSS in Gutenberg via the “Additional CSS” section on the theme customizer.
On your WordPress dashboard, go to Appearance -> Customizer -> Additional CSS. Copy the CSS snippet below and paste it into the input field. If you use a block theme, you may need to enable the theme customizer first. We have a separate post covering how to enable a theme customizer on a block theme you may want to read.
Here is an example of a CSS snippet you can use:
.wp-block-table table td img {
border: 2px solid #000000;
border-radius: 10px;
}
Once you finish adding the CSS snippet, apply it by clicking the PUBLISH button.
That’s it. Don’t forget to save your project or publish it if you want to.
The Bottom Line
In this article, you have learned how to insert an image into a cell in the Gutenberg Table block without the help of any third-party plugins. You have seen two methods: using the inline image option and using the HTML code of the image. Both methods have advantages and disadvantages, so you can choose the one that suits your needs and preferences. Adding images to your tables can make your tables more attractive and engaging for your readers and effectively convey your message.
