How To Create Reusable Table Formats In WordPress

Tables are always a BIG problem for any layout. I’m not talking about using tables for design elements, but for displaying data. They come with the following issues:

1. Rendering on mobile is always a problem
2. No easy to way to create them in WordPress
3. Not always easy to create complex layouts with merged fields etc.

This explains the plethora of WordPress table plugins. They all require you to create the table in a separate editor, and then use something like a shortcode to past into your WordPress posts. However, this doesn’t always get the job done.

Most Tables Don’t Have “Caption” Tags

We want search engines like Google to understand the context of our table, so it can show up in featured snippets. However, all the table plugins I’ve tried, don’t render the <caption> tag under the <table> tag, and so we lose a valuable opportunity to specify the purpose of our table.

Mobile Rendering is Problematic with Google’s “Mobile First” Indexing

There are many ways to “shrink” a table so that it displays on mobile. However, there’s a problem. Google’s new “mobile first” indexing ends up picking the mobile version of the table to display as a search snippet, which is very annoying since it doesn’t really look that good, and Google doesn’t do a good job of figuring out which are the important headers.

So for now, my suggestion is to simply use horizontal scrolling tables for mobile layouts. It’s not very ideal, but it’s what gives consistent results.

Solution: Creating your Own Table HTML

In light of these issues, I’ve reverted to creating my own tables using this HTML table generator. It allows you to create the table you want, with the formatting you want, and also gives you the tools to merge cells together.

For example, here’s a table I created displaying NameHero’s shared hosting features:

Once you have the table you want, you can copy the HTML that it generates below like this:

Make sure to uncheck the box “Do not generate CSS”. This allows you to copy the inline styles along with the table.

Now open WordPress in the Gutenberg editor, choose a new “Custom HTML” block, and paste the table HTML into it like this:

And now the table renders exactly as it did in the table creator:

Making it Reusable

Just like with normal table plugins, we can reuse this table over and over. Just click the options for the custom HTML and click “Add to Reusable Blocks”, and give it a name like this:

And now whenever you need to use the same table again in Gutenberg, just type slash (/) followed by the name of the block and you can insert it wherever you want! Here are some more Gutenberg tips if you’re interested!

Creating a Template for a Table

Often you don’t want to reuse a table exactly, but merely create a template with the right formatting that you can fill in later with different data. On the site where you created the table HTML, you can save the table you generated by clicking “File -> Save Table” as shown here:

This will download a file onto your PC. Now whenever you need to use the same template, just use the same menu to “load” the file, make the changes you want, and generate the new HTML code to paste into your custom HTML block. This way, you can maintain a consistent look and feel on your site across pages, and across tables.

I hope these table tools help you with creating data tables in a consistent manner, like they’ve helped me!