HTML tables offer a great way for you to share tabulated data with readers.
But how do you easily add HTML tables to your WordPress posts or pages?
You could handcraft your tables inside your page or post, but it takes long. Not good for the psyche.
Another option is to use a dedicated HTML tables plugin.
It works well, but it’s not my preferred method of adding a table. I’ll explain why, later.
There’s one more option. It’s a plugin, but not a dedicated HTML tables plugin. I consider this the superior option. Read on to see why.
This article assumes you’re familiar with installing WordPress plugins. If not, read my article on how to install a WordPress plugin.
In my opinion, using an HTML tables plugin is the WRONG way to add tables to your article.
Here’s why:
That means all your hard work flies out the window.
But if you insist on using an HTML tables plugin, TablePress is the number one option.
It makes it easy to add an HTML table to your WordPress posts or pages and it comes with a bunch of great features.
Let’s add a table to a page using TablePress. The process will be the same when you add a table to a post.
Follow these steps to add a new table using TablePress.
The next step depends on the number of columns and rows your table requires.
For this tutorial I’m adding only two columns and two rows.
When you click the Add Table button, the page reloads and opens to the newly created table where you can add your data and choose display settings.
Let’s add some content to give the table something to display.
Scroll down to the Table Content section for your new table.
Under the Table Manipulation section you can do a number of things, like:
The Table Options section lets you make further adjustments to the table, like:
We’ll leave those settings as is for this tutorial.
The last box reads Features of the DataTables JavaScript library.
The DataTables library lets you enable visitors to sort the table. It also lets you enable pagination, as well as horizontal scrolling.
To add the table to a page or post, we first have to create a page or post.
I’ve opened my WordPress admin panel in another tab and created a page for the sole purpose of displaying the tables used in this tutorial: table page. The modus operandi for adding a table to a post would be exactly the same.
So now there are two windows of the same WordPress admin panel open in two tabs inside the same browser: one is the TablePress table we’ve just created, the other the new page we’ve created.
Follow along to display the table inside a page.
Now open the tab where the page is you want the table to appear on.
In my opinion, the Classic Editor is still the best way to add content to a WordPress post or page.
This is how to add a TablePress table to your page using Gutenberg block editor.
You can search for the appropriate block, but in this case, the shortcode block came up right at the top.
This is what the table looks like that’s added using the TablePress plugin.
Another great option is to create HTML tables using an online HTML table generator.
The Tables Generator website comes to mind.
It’s a great tool that works like a table builder for a typical document creation program (like Microsoft’s Word), and comes with all the features you need to quickly glue together an HTML table, the code of which you can copy and paste into your WordPress post or page.
Let’s add a table using the Tables Generator website.
The next step is probably only necessary if you’ve used this website before. That’s because the website saves any table you’ve created previously, which is the case with me, since I’ve used this tool for creating HTML tables before.
A box pops open.
I’ll add the exact content I added to the TablePress table.
To add content, simply click inside the cell you want to add content to and start typing.
You need to paste the table’s HTML code into the page or post of your choice.
The Tables Generator website generates the code for you. That’s what makes it enjoyable to use.
The code is now copied to your clipboard and ready to be pasted into a page or post.
Now it’s time to paste the code into your editor.
You must have the page open in the back office.
Since this is raw HTML, you CAN NOT paste it into your page just any ol’ way.
Read on to see how to do it.
Here’s how to add the HTML table if you’re using the WordPress classic editor.
Here’s how to add the HTML table if you’re using the WordPress Gutenberg block editor.
You now have a table that was created using an online HTML table generator.
This method is superior to using a WordPress HTML tables plugin.
Your table won’t go anywhere if the plugin is deleted. And moving a table to another site is easier, because your table forms part of your content (it’s “hardcoded” into your content), as opposed to being displayed using a shortcode.
The best plugin for adding an HTML table to your WordPress post or page is called Advanced Editor Tools and used to be known as TinyMCE Advanced.
This tool adds a host of extra functions to your WordPress TinyMCE editor, but for the purpose of this post we’ll focus on the HTML tables generator that comes with it.
There are two reasons why Advance Editor Tools is the best way to add an HTML table to your WordPress page or post:
It’s the best of the TablePress plugin and the online HTML table generator, rolled into one.
Let’s create an HTML table using Advanced Editor Tools.
Install and activate the plugin if you haven’t yet, then continue.
Once you install Advanced Editor Tools, your WordPress TinyMCE editor gets a serious boost. The plugin adds plenty of functionality, making the WordPress classic editor far better.
One of the extras you’ll notice is the HTML tables icon.
Let’s use it to add a table to the page. (It’ll work the same inside a post.)
Click inside the table’s cells and start typing your content.
You can bold content and add links, just like you’re able to do with content outside of the table.
As always, remember to save your changes.
The process for adding an HTML table using Advanced Editor Tools inside Gutenberg is the same as inside the classic editor. The interface just looks different.
Let’s add a table inside Gutenberg.
This adds the TinyMCE editor to the screen with the Advanced Editor Tools upgrade.
You add content exactly the same way as you would when using the classic editor.
The final step is to ensure your work is saved.
You can view the third table I’ve added using Advanced Editor Tools at test.minibigthing.com/table.
You won’t notice major differences between the three tables, but there are slight differences. For instance, TablePress automatically gives their headings a light blue background.
Although there are plenty of plugins that allow you to add HTML tables to your WordPress pages or posts using shortcodes, I don’t think it’s a good idea to use shortcodes to display HTML tables.
Rather install the Advanced Editor Tools plugin and “hardcode” your tables into your pages or posts. That way your tables won’t stop displaying when you disable or delete the plugin you used to generate the tables with.