And no, I haven’t forgotten about the new block editor. While it certainly does make creating and displaying tables easier overall, it is still not a perfect solution, especially for large datasets.
Anyway, since tables are something we’ve been using a lot in our posts here at CodeinWP, I want to share some of our top strategies with you today.
In this guide, I’ll present some creative ideas on how you can use HTML tables / data tables in WordPress, make them look pristine ✨, and also make sure that they’re optimized for mobile and are SEO-friendly at the same time.
Our three-pronged approach to data tables in WordPress
To summarize our approach quickly, we’ve been working with data tables in WordPress in three different ways:
(a) Using simple responsive and good-looking tables to present basic data and make parts of our posts easier to digest.
(b) Using something we might call “mid-tier tables” to allow for some extra features like user sorting and row highlighting on mouse hover.
(c) Using auto-refreshing tables that allow for much more advanced inner workings that are not quite visible to the user on the frontend. For example, the table over here is built based on a Google Sheet, and it updates automatically (that is, whenever we update the sheet, the table updates as well).
Here’s how you can emulate our approach and build yourself some cool data tables in WordPress:
Strategy #1: Use Visualizer to bring your tables to life
Let’s start big with probably the most advanced approach of the bunch! Then we’re going to make things simpler as we go further down this post.
- 🗒️ What is Visualizer? It’s a plugin that lets you create charts, graphs, and tables, and then include them in your blog posts via shortcodes or blocks. It’s simple to use if you need just the basic set of features, but also very powerful if you want to tinker under the hood a bit more.
One of the cool things about Visualizer is that you can load your data – for tables as well as charts – from multiple sources. When creating a new table, for instance, you can import from:
- a CSV file,
- a URL (including Google Sheets),
- another chart,
- WordPress (by creating filters/workflows, which then browse through the WordPress database and bring up the data you want),
- the database directly (using raw SQL queries),
- plus, you can also enter data manually.
The difficult thing about tables, in general, is that creating them by hand takes basically the same amount of time as updating them later on. We’d all rather make tables a one-off task and have everything kept up to date automatically.
With Visualizer, you can choose to fetch data for your table from a URL and then set the import to repeat every hour / 12 hours / day / three days.
What this effectively means is that you get a table that refreshes itself automatically based on the changes of the source. Read: there’s no need to come back to it and update it by hand.
Here are four creative ways you can take advantage of that:
Keep your case studies or analysis posts up to date (automatically)
We’ve been heavy into the WordPress hosting market. We have a number of posts on the topic, and most of them require ongoing updates.
One of the versions of our main hosting comparison includes a live table that highlights the load times of the hosts featured. It looks like this (live table):
(You might not see it in action if you go to that post now; we change that one around pretty frequently, testing a lot of things.)
This whole table is fetched automatically from Google Sheets. Even the logos and links are stored inside Google Sheets (as raw HTML). Whenever we update the load times, for example, they get updated in the table as well. Not to mention, the user can sort the table.
Setting this up isn’t difficult at all:
Again, with this setup, you can fetch data for tables automatically and then also have those tables update automatically.
Keep multiple tables up to date across multiple posts (automatically)
This is related to the previous scenario, but the angle is a bit different.
Basically, nothing’s stopping you from using the same Google Sheet as the source of data for multiple tables.
What this means is that you can include similar tables across multiple posts/pages and not have to worry that they’re going to drift out of sync over time (say, you’ll update one but forget to update the other, etc.).
When setting up your table in Visualizer, you can go into advanced settings and adjust various things like pagination, number of rows, disable/enable user sorting, enable search, and so on. This means that your tables can still look different even though they use the same data source.
Keep your traffic/users/sales numbers up to date (automatically)
There’s been a trend among web businesses to share various numbers/indicators such as traffic, sales, number of users served, etc. on their websites.
However, not everyone wants to embed external services and thus not be able to moderate them in any way.
Ideally, even if you’re very transparent, you still don’t want to wake up and find out that an embed from your shopping cart or traffic tool is showing a huge drop – while your headline might still say “look how well we’re doing!”
If you add another layer and import the data to a Google Sheet first, then you can moderate all changes before they get fetched into a traffic/sales table and go live on the site.
The setup is the same as in the previous scenarios. Just create a new Google Sheet, import or enter your numbers, and then hook it up to a Visualizer table or chart.
Query your database (automatically)
Visualizer has one more cool feature up its sleeve; it can import table data right from your WordPress database via a raw SQL query.
Fairly advanced stuff, yes, but also gives you a lot of possibilities if you’re willing to experiment.
Some quick ideas:
First, you can easily showcase your most commented-on posts. You can use such a list not only in transparency reports but also on your archives page. Example:
To build a table like that, simply go into Visualizer, create a new table, and select Import from database.
In the query window, you can put something like this:
SELECT post_title AS Post, COUNT(DISTINCT c.comment_ID) AS Comments FROM wp_posts p LEFT JOIN wp_comments c ON p.id = c.comment_post_ID GROUP BY p.ID ORDER BY Comments DESC LIMIT 10
This will showcase a table of your top 10 most commented-on posts.
You can complicate the query to also get the URL, so that you can make those post titles live. This is just an example. Here are some other things you can do:
- list all your posts from a certain category or written by an author
- look into tables that other plugins use to store their data, fetch relevant data from them
- display your bestselling products from WooCommerce, along with the number of sales, links, prices, whatever else you wish
- do the same with Easy Digital Downloads; here are some ready-made queries
That’s about it when it comes to Visualizer and how we’re using it. But there are also other solutions if you don’t need this sort of advanced automation:
Use TablePress for reliable sorting and table edits
We’re also big fans of TablePress and been using it in a number of our posts.
For example, there’s a big table here – listing the top 100 players in the WordPress themes market. Preview:
What we like about TablePress is that we can realign the rows easily, hide rows, duplicate rows, and also give the user some controls to sort the table.
For example, for that specific table, we have some more columns in the backend that we don’t display (the red ones). TablePress doesn’t force us to delete them – we can just hide them from display.
Use Shortcodes Ultimate to pimp your HTML tables
Personally, Shortcodes Ultimate (SU) is one of my all-time favorite plugins.
Among its many shortcodes, there’s also one you can use to make your standard HTML tables look a lot nicer.
Here’s a table in our post comparing the top VPN services:
It was built via raw HTML, and then just got an SU shortcode added around it. This one:
[ su_table][ /su_table]
All the row styles and borders you see are SU’s.
In other words, if your theme doesn’t have particularly nice CSS for handling tables, use SU.
I encourage you to experiment with these three plugins. We love Visualizer since it’s our own creation, but we have to admit that the other two are pretty neat as well for specific tasks!
Versión actual: 3.4.7
Última actualización: 21 de septiembre de 2020
Versión actual: 5.9.3
Última actualización: 14 de septiembre de 2020
¿Utiliza tablas de datos en WordPress?
¿Qué piensa de las tablas y su lugar en la UI moderna de WordPress ?
El editor de bloques de Gutenberg ha hecho que la creación de tablas sea mucho más fácil de usar, por lo que los usuarios ocasionales probablemente estarán más dispuestos a experimentar con ellas ahora. Después de todo, las tablas son una de esas cosas clásicas con las que todos los que han usado MS Word están bastante familiarizados. Entonces, ¿por qué no podría “simplemente agregarlos” a WordPress, verdad?
¿Utiliza mucho las tablas de datos en WordPress? Si es así, ¿cómo los crea?
No olvide unirse a nuestro curso intensivo sobre cómo acelerar su sitio de WordPress. Con algunas correcciones simples, puede reducir su tiempo de carga hasta en un 50-80%: