• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
NameHero® Blog

NameHero® Blog

Web Hosting Tips & Resources From NameHero

  • Hosting
    • Web Hosting
    • VPS Hosting
    • WordPress Hosting
    • WooCommerce Hosting
  • Reseller
  • Enterprise
  • Domains
  • Account
  • Blog Home
  • Categories
  • Authors

How To Create Reusable Table Formats In WordPress

Bhagwad Park

Published on: February 27, 2019

Categories: WordPress 0

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:

Data Table in Editor

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

Generated Table HTML

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:

Custom HTML Block

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

Rendered Table

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:

New Reusable Table Block

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:

Save Table Template

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!

Bhagwad Park Profile Picture
Bhagwad Park

I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!

Related Posts

NameHero’s Recommended WordPress Plugin and Theme Setup (2023)

Figuring out what WordPress plugins and themes are actually necessary can be confusing. Check out our recommendations to get started!

Using Jetpack Protect For Free Site Scans

Jetpack has broken up its monolithic plugin into smaller pieces. Here's how to use the Jetpack Protect plugin for free site scans.

Two Filters That No Longer Work In Gutenberg (And Workarounds)

Even though I like the Gutenberg editor, here are two filters that no longer work as expected. You can still use the Classic editor, though.

3 Best Property Management WordPress Themes (2023)

If you own a property management business, you must know that having a website is no longer optional in 2023. Because in today’s digital world, having an online presence makes a massive difference to the success of your business. A well-built website helps you attract potential clients and stand out from the competition. Not only […]

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow & Subscribe

Exclusive promos, content and more!

Most Popular Posts

NameHero’s Recommended WordPress Plugin and Theme Setup (2023)

WordPress Hosting vs. Web Hosting – What’s The Difference?

How To Increase The InnoDB Buffer Pool Size

How To Fix A Stuck All-in-One WP Migration Import

How To Add A Subdomain In Cloudflare

Top Categories

  • WordPress
  • WordPress Tutorials
  • Enterprise Hosting
  • WooCommerce
  • Web Hosting
  • Resellers
  • Website Security
  • Website Development
  • Website Performance
  • VPS Hosting
  • SEO Tips
  • Announcements
  • Domain Registration
NameHero

NameHero® proudly provides web hosting to over 40,000 customers with 99.9% uptime to over 750,000 websites.

  • Master Card
  • Visa
  • American Express
  • Discover
  • Paypal
Products
  • Web Hosting
  • VPS Hosting
  • WordPress Hosting
  • WooCommerce Hosting
  • Reseller Hosting
  • Enterprise Hosting
  • Domains
Help & Support
  • NameHero Blog
  • Support
  • Help Center
  • Migrations
  • Affiliates
  • Call 1-855-984-6263
Company
  • About Us
  • Contact Sales
  • Reviews
  • Uptime
  • We're Hiring

Copyright © 2023 Name Hero, LLC. All rights reserved.
NameHero® is a registered trademark.

  • Privacy Policy
  • Terms of Use
  • Acceptable Use Policy
  • Payment Policy
  • DMCA