How to Insert an Image to a Table Cell in Gutenberg WordPress

How to Insert an Image to a Table Cell in Gutenberg WordPress - How to Insert an Image to a Table Cell in Gutenberg WordPress 3

The Gutenberg editor is the new default editor in WordPress. It allows you to build WordPress pages and posts using blocks, which are modular content elements you can add and arrange to create your content.

One useful feature in Gutenberg is the ability to add images directly into table cells. This allows you to create more visually engaging tables by including graphics and photos within your data.

Note: Images can be resource-intensive. Use a fast hosting like Cloudways to slash your WordPress load time without breaking the bank.

How to insert a picture to a cell

1. Open a Gutenberg editor and insert a table.

Image 005 - How to Insert an Image to a Table Cell in Gutenberg WordPress 5

2. Then, place the cursor to the cell where you want to insert an image.

Image 006 - How to Insert an Image to a Table Cell in Gutenberg WordPress 7

3. Open the dropdown menu and select Inline image.

Image 007 - How to Insert an Image to a Table Cell in Gutenberg WordPress 9

4. From here, you can select an image from Media Library or upload a new one. Click the image and then Save.

Image 008 - How to Insert an Image to a Table Cell in Gutenberg WordPress 11

5. The image will be inserted to the cell.

Image 009 - How to Insert an Image to a Table Cell in Gutenberg WordPress 13

For those who are comfortable with HTML, you can also add images to table cells using the <img> HTML tag. This method involves editing the HTML source of the table and manually inserting the img tag where you want the image to appear.

A few things to note

Inserting an image to a table cell in Gutenberg seems to be a half-baked feature. There are some caveats to keep in mind:

  • The image can only be displayed at full resolution which may be slower and inefficient. Enable lazy load and use a faster hosting to boost the speed.
  • You can use the alignment tool to align the image to the left, center, and right.
  • Captions won’t appear on the image.
  • Changing the image width will adjust the length automatically.
  • Use custom CSS to override default styles if needed.

Using graphics can significantly improve otherwise boring tables full of text or data. Just be aware that tables have limitations, especially on mobile devices.

Best plugins for adding a picture to a table

Image 010 - How to Insert an Image to a Table Cell in Gutenberg WordPress 15

If you are fancy, there are some free plugins that can create much better visual compared to the default Gutenberg table. Here are some of them:

There you have it! I hope this guide helps you.