Have You Ever Wanted to Embed a Comparison Table into Your Website?
Comparison tables can be very valuable to the people that visit your web pages.
It can help them find an answer quickly.
If a customer has a question like, “What is the difference in weight and dimensions between Product A and Product D?” – a product comparison table would have the answer.
If you were interested in a single aspect, or several aspects of the comparison – a table would be a time saver for you !
How to Get Started with Embedding a Table
But there is another way.
You can download a WordPress plugin called TablePress which enables you to create tables easily and update them visually, instead of digging through the text side of the post editor.
This can be extremely useful for some very big comparisons and long lists of items with graphics or links.
STEP #1 – Go to TablePress’s “Add New” tab, after you’ve installed it in a WordPress self-hosted site:
STEP #2 – Name the table and select number of rows. Then click “Add Table”:
STEP #3 – The top row is the header of each column. Since this is a fruit comparison table, we have labelled column A “Fruit” and B “Color” and C “Taste Test”.
After filling out the rows in each with the data we wish to compare, let’s add a little image.
STEP #4 – Click “Insert Image” and a notification box will appear. Select the field where you wish to insert an image and the Media Uploader will pop up.
Simply upload a picture, then click “Insert into Post” as usual for an image in WordPress.
STEP #5 – Note the image for the banana is now one space apart from the text for Banana. Soon we will see how this looks in the post!
STEP #6 – Now copy the shortcode in the Table Information box.
STEP #7 – Create a New Post.
STEP #8 – Create the post and on the Text side of the WordPress post editor, paste the shortcode. We have added a bit of text before the table to make it more interesting.
Now the table is almost ready for viewing!
STEP #9 – This is the WordPress post we just created:
After reviewing this momentarily, the “Show 10 entries” and “Search” is not what we had in mind for this table. Let’s remove it and the pagination at the bottom which links to “Previous” and “Next” table data since we have no need for these options.
- Enable sorting of the table by the visitor.
- Enable the visitor to filter or search the table. Only rows with the search word in them are shown.
- Enable pagination of the table (viewing only a certain number of rows at a time) by the visitor.
STEP #11 – Save the changes and refresh the post to see the changes!
Sometimes when we have a big set of data we want to display for comparison, we can build one ourselves using CSS and html. A CSS table generator works for many occasions. However, it’s when we have to work with images, links and other longer lines of code that these generators may not work – and handcoding may be cumbersome.
In these latter cases, we could use the TablePress plugin. It’s free and after reading this post you should know how to make a basic comparison table, without digging through long table codes and writing CSS!
The Example Table
See the table below – it was embedded using TablePress WP Plugin!
If you scroll through the table with your mouse cursor, you will see it highlight the row you are moving your mouse over.
|Orange||Orange||Sour, Sweet, Juicy|
|Apple||Red, Green, Golden Yellow||Mostly sweet, a little sour|
|Banana||Yellow||Mild and Sweet|