Ever seen those smart-looking tables on your favourite WordPress websites and wondered how its done? Ever looked at the kind of comparison grids we have on Best Web Hosting Now and wanted to do something similar on your site?
Here’s how it’s done.
If you’re already confident in installing new WordPress plugins, you can go ahead and skip straight to step 5. Otherwise, read on, and let’s get started.
1 – Head to your plugins page
If you haven’t already logged into your WordPress account, do that now, and then head down to your plugins page as in the image below.
It’s from here that we’re going to install the helpful plugin that we’ll use to make our awesome looking table.
2 – Add new plugin
At the top of your page, next to the ‘Plugins’ title, you’ll see a button which simply says ‘Add New.’ Click that button, and you’ll find yourself on a new page which displays the latest featured plugins.
Today though, we’re going to ignore those, and use the box on the left to search for a new plugin.
3 – Find the Tablepress plugin
On the right-hand side of your page, you’ll see a text box featuring the words ‘Search Plugins.’ Just replace those with the name of our plugin, Tablepress, and hit enter.
This will bring up a list of plugins, and you should find that the one we’re going to use today is the first one that featured in that list. You’ll recognise it as looking just like the image below.
4 – Install and activate your plugin.
In the top, right-hand corner of that box, you’ll see the button titled ‘Install Now.’ As you may have already guessed, you’ll want to hit that button to install the plugin.
When it’s done, you’ll see a page like the one below and should click ‘Activate this plugin’ to continue.
5 – Head to your Tablepress page
When your Tablepress plugin has been successfully activated, you’ll be redirected to your main plugins page, and here’s where you’ll find the link to actually start building those tables.
You’ll find Tablepress listed among your existing tables. It should look like the image above. From there, click ‘Plugin page’ to be taken to your Tablepress homepage.
6 – Add new table
Your Tablepress page should look something like the one in the image below. As you may have gathered, you’ll want to hit the second tab across the top, the one marked ‘Add new table.’
To get started, you’ll need to give your new table a name and a description. Since our passion is finding the best website hosting deals around, we’re going to use our Tablepress to make a new hosting comparison chart, like the one you’ll see on our homepage.
7 – Set the number of rows and columns
By default, Tablepress is set to create a table of five rows and five columns, but you can easily change this just by replacing those numbers with the amount you need, or using the up and down arrows on the side of your boxes.
As you’ll see below, we’ve changed ours so that we can have six rows and seven columns.
Don’t worry if you don’t get it right the first time. If you’ve miscalculated and added a few too many columns, or if you get halfway through building your table and suddenly realise you need an extra row or two, you can always change these later.
For now though, enter some digits and hit the ‘Add table’ button at the bottom of your page.
8 – Select your table
Once you’ve added your table, you’ll be taken back to the main Tablepress page, where you’ll find details of the table you just created.
Click on your table, and you’ll be taken to a page which looks something like the one below:
Here’s where the real fun begins.
9 – Add the table to a blank page
Normal logic would dictate that we’d add your table to the site once it’s finished, but we’ve found it much more helpful to do this first. Why? Because, in our experience, the Tablepress’ preview doesn’t always do a great job of showing us exactly how our new table will look.
In order to properly preview this then, and to make sure that everything looks exactly as it’s supposed to do, we create a blank page that we can use just for the purposes of previewing our table. Once it’s finished, we can always delete that demo page, and reinsert our table into an existing page of our website.
Here’s how to do that.
9.1 – Grab your shortcode
First, highlight the shortcode that you’ll find in the right-hand side of your Table Information box, as below:
Right click and select ‘Copy’ or use the CTRL + C shortcut.
9.2 – Create a new page
Scroll up until you see the Pages option from your dashboard menu, then select ‘Add New.’ You might find it helpful to right click on ‘Add New’ and select to open it in a new tab or window. The benefits of doing this are two-fold:
- It’s easier to get back to your work-in-progress table once you’ve set the page up
- It’s easier to flick back again to the preview table whenever you need to see how it’s looking.
9.3 – Paste in your shortcode
Give your page a name like ‘table demo,’ ‘preview’ or something similar, then simply paste your shortcode into the content area.
To speed up the process of previewing our table, we’ve found it easier to simply publish that page, and refresh the live version whenever we want to see our changes, but only do this if you’re confident that this page won’t appear in your main website’s navigation so that there’s no risk of visitors potentially stumbling across your half-finished product.
If you’re not too confident of that, you can always use the preview button, but again, we’ve found this takes just a little longer to fully update with the new changes than simply refreshing a live page.
With that done, it’s time to start entering some data.
10 – Enter your headings
The first row of your table is highlighted in blue so that, as a heading, it stands out from the rest of your table. Go ahead now and enter the headings for your table. It’s as easy as just clicking in the individual boxes and adding some text. When you’re done, it should look something like this:
Scroll to the top of the page and hit save. You can go back to your demo page and preview that now, and you should see something that looks like the following image:
OK, so that doesn’t look like anything special just yet, but don’t worry, it will do.
If you decide you don’t want the first row of your table highlighted in that way, you can always change it. Scroll down to your Tables Option box, and you’ll see that the box next to Table Row Header is checked. Uncheck it, and you’ll remove the highlighted background.
11 – Add graphics and images
You may want to spice up your table by adding images or graphics, and that’s no problem. One of the things we love about Tablepress is that it’s easy to customize however we like, including adding our own code to display images.
Before we do this, go and upload your images if you haven’t done so already.
To begin with, scroll down to your ‘Table Manipulation’ box, and click Insert image, as above. You’ll be asked to select the cell where you want to add the image, which is as easy as scrolling back up and clicking in it.
It’s then simply a case of using the standard WordPress image inserter to select your image from your library and add it in. The end result looks something like this:
If you find that your image is too big when you preview the table, you can always click in the cell and modify the width and height to resize it so that it fits better.
12 – Create and customize your table content
Adding images isn’t the only way that you can customize your table content. Most of the time, we just use <div> tags for alignment and <strong> tags to bold-up our table headings, but feel free to play around with different things as you now go through each cell and populate it however you like.
13 – Delete any rows or columns you don’t need
Remember earlier how we said it was easy to add or remove rows and columns as we went along? Adding them in is as simple as going to your Table Manipulation tools and increasing the number you have, as illustrated below.
Deleting them is no more difficult than selecting what you need to remove and hitting the appropriate delete button in your Table Manipulation panel.
There really is no limits to how much you can customize your new table.
Need to include star ratings? You can always paste in a shortcode generated by a leading ratings-based plugin, or add them in as images.
Add pictures, hyperlinks, buttons all in the same way that you would on any given WordPress page, and if you want to customize even further, that’s all possible too, thanks to Tablepress’s custom CSS option.
We’ll be back soon to show you how to further customize your Tablepress grids, but for now, we’ll simply wish you happy building!