How To Add HTML Tables To A WordPress Page Or Post

HTML tables offer a common sense method of sharing tabulated data with your readers. Here are three ways to add them to your WordPress posts or pages. You might think a dedicated HTML tables plugin is the best tool for the job, but the last option in this post is superior.
Categories: Tags:
Our articles are FREE to read. But when you buy through our referral links we earn commission. You don't pay more but we get rewarded for our hard work. It's like a salesman in a shop showing you the goods. Thanks for your support.

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.

Using TablePress

In my opinion, using an HTML tables plugin is the WRONG way to add tables to your article.

Here’s why:

  • If you disable and delete the plugin for whatever reason, you could lose all your tables, leaving your article/s with table shortcodes where there should have been HTML tables.

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.

Add a new table

Follow these steps to add a new table using TablePress.

In The Left Hand Sidebar, Hover Over Tablepress And Click On Add New Table

In The Left Hand Sidebar, Hover Over TablePress And Click On Add New Table.

Add A Name And Description For The Table

Add A Name And Description For The Table.

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.

Choose The Number Of Rows And The Number Of Columns And Click The Add Table Button

Choose The Number Of Rows And The Number Of Columns And Click The Add Table Button.

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.

Add your content

Let’s add some content to give the table something to display.

Scroll down to the Table Content section for your new table.

Add Content To Your Html Table

Add Content To Your HTML Table.

Edit the table display

Under the Table Manipulation section you can do a number of things, like:

  • Insert a link.
  • Insert an image.
  • Invoke an advanced editor.
  • Hide or show rows.
  • Duplicate, insert or delete a row.
  • Combine cells.
  • Hide or show columns.
  • Duplicate, insert or delete columns.
  • Add rows.
  • Add columns.
The Table Manipulation Section

The Table Manipulation Section.

The Table Options section lets you make further adjustments to the table, like:

  • Making the first row of the table a header.
  • Making the last row of the table a footer.
  • Alternating row colors.
  • Allowing for a row to highlight when hovered over.
  • Allowing the table name and description to be added above or below the table when it’s printed.
  • Adding additional CSS classes for styling.
The Table Options Section

The Table Options Section.

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.

I've Disabled The Datatables Library In This Instance

I’ve Disabled The Datatables Library For This Tutorial.

Click The Button That Reads Save Changes

Click The Button That Reads Save Changes.

Add the table to a page or post

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.

On The Page Where You've Created The Table, Look For The Table Shortcode Near The Top Of The Page, To The Right, And Highlight And Copy It

On The Page Where You’ve Created The Table, Look For The Table Shortcode Near The Top Of The Page, To The Right, And Highlight And Copy It.

Now open the tab where the page is you want the table to appear on.

Using Classic Editor

In my opinion, the Classic Editor is still the best way to add content to a WordPress post or page.

Place Your Cursor Inside The Large Editing Box And Paste The Code

Place Your Cursor Inside The Large Editing Box And Paste The Code.

Click The Update Button On The Right Hand Side Of The Page

Click The Update Button On The Right Hand Side Of The Page.

Using Gutenberg block editor

This is how to add a TablePress table to your page using Gutenberg block editor.

Click On The Plus Button To The Right Of The Screen

Click On The Plus Button To The Right Of The Screen.

You can search for the appropriate block, but in this case, the shortcode block came up right at the top.

Click On The Shortcode Block

Click on the plus button to the right of the screen, in line with the prompt, Start writing or type / to choose a block.

Paste The Shortcode Into The Field Provided For It

Paste The Shortcode Into The Field Provided For It.

Click The Update Button

Click The Update Button.

View the table

This is what the table looks like that’s added using the TablePress plugin.

The Table As It Looks On The Page

The Table As It Looks On The Page.

Using an HTML table generator

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.

Create a new table

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.

Click The File Dropdown Menu, Then Click On New Table...

Click The File Dropdown Menu, Then Click On New Table….

A box pops open.

In The Box That Pops Open, Change The Rows And Columns To Your Requirements. We'll Make Them 2 And 2. Then Click Create

In The Box That Pops Open, Change The Rows And Columns To Your Requirements. We’ll Make Them 2 And 2. Then Click Create.

Add your content

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.

Click Inside The Cell And Start Typing To Add Your Content

Click Inside The Cell And Start Typing To Add Your Content.

Generate the code and copy

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.

Click The Generate Button To Generate The Html For The Table

Click The Generate Button To Generate The Html For The Table.

Click The Copy To Clipboard Button

Click The Copy to clipboard Button.

The code is now copied to your clipboard and ready to be pasted into a page or post.

Add the code to your page

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.

Using Classic Editor

Here’s how to add the HTML table if you’re using the WordPress classic editor.

Click The Tab That Reads Text

Click The Tab That Reads Text.

Paste The Clipboard Content Below The Shortcode

Paste The Clipboard Content Below The Shortcode.

Using Gutenberg block editor

Here’s how to add the HTML table if you’re using the WordPress Gutenberg block editor.

Click The Plus Button To The Right Of The Screen, Below The Shortcode Block We Added Earlier

Click The Plus Button To The Right Of The Screen, Below The Shortcode Block We Added Earlier.

In The Box That Pops Open, Type In, Html, Then Click On The Box That Reads Html

In The Box That Pops Open, Type In, html, Then Click On The Box That Reads HTML.

A Block Opens With The Text, Write Html..., Inside It

A Block Opens With The Text, Write HTML…, Inside It.

Paste The Html Table Code Into The Block

Paste The HTML Table Code Into The Block.

Click The Update Button

Click The Update Button.

View the table

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.

Using Advanced Editor Tools

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:

  1. It lets you add a table easily using the WordPress GUI, which means it’s as easy to use as an HTML table generator.
  2. Disabling or deleting this plugin does nothing to your table. It’s merely a tool to add the table. Once you’ve added a table, removing the plugin does not interfere with the table itself.

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.

With Classic Editor

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.

Add a table

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.)

Place Your Cursor Below The Two Tables Inside The Editor

Place Your Cursor Below The Two Tables (In The Test Post) Inside The Editor.

Hover Over The Html Table Icon, Then Hover Over The Table Menu Item In The Dropdown Menu Then Move The Mouse In Such A Way To Highlight The Number Of Cells You Require For The Table

Click The HTML Table Icon, Then Hover Over The Table Menu Item In The Dropdown Menu, Then Move The Mouse In Such A Way To Highlight The Number Of Cells You Require For The Table.

Once The Appropriate Number Of Cells Are Highlighted, Click On The Outermost Cell

Once The Appropriate Number Of Cells Are Highlighted, Click On The Outermost Cell.

This Adds An Html Table To The Page

This Adds An HTML Table To The Page.

Add your content

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.

I Added Content As Per The Previous Two Tables, Highlighted Two Cells And Added A Link To One Of The Cells

I Added Content As Per The Previous Two Tables, Highlighted Two Cells And Added A Link To One Of The Cells.

Save your changes

As always, remember to save your changes.

Click The Update Button On The Right Hand Side Of The Page

Click The Update Button On The Right Hand Side Of The Page.

With Gutenberg block editor

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.

Add a block

Click The Plus Button To The Right Of The Screen, Below The Other Tables

Click The Plus Button To The Right Of The Screen, Below The Other Tables.

Start Typing The Term, Classic, And A Block Will Appear That Reads, Classic Paragraph

Start Typing The Term, classic, And A Block Will Appear That Reads, Classic Paragraph. Click on the block to add it.

This adds the TinyMCE editor to the screen with the Advanced Editor Tools upgrade.

Add a table

Click The Html Table Icon, Then Hover Over The Table Menu Item In The Dropdown Menu, Then Move The Mouse In Such A Way To Highlight The Number Of Cells You Require For The Table.

Click The HTML Table Icon, Then Hover Over The Table Menu Item In The Dropdown Menu, Then Move The Mouse In Such A Way To Highlight The Number Of Cells You Require For The Table.

Once The Appropriate Number Of Cells Are Highlighted, Click On The Outermost Cell

Once The Appropriate Number Of Cells Are Highlighted, Click On The Outermost Cell.

This Adds An Html Table To The Block

This Adds An HTML Table To The Block.

Add your content

You add content exactly the same way as you would when using the classic editor.

I Added Content, Highlighted Two Cells And Added A Link To One Of The Cells

I Added Content, Highlighted Two Cells And Added A Link To One Of The Cells.

Save your changes

The final step is to ensure your work is saved.

Click The Update Button

Click The Update Button.

View the table

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.

Conclusion

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.

magnifiercrosschevron-down