People say WordPress powers more than 30% of websites on the internet. However, it is not an easy job to create a website with all the features you need. Creating tables in WordPress is one simple example for that. WordPress introduced a table block with the Gutenberg and updates that continuously. However, it is not responsive and will not work properly in mobile devices when you have three or more columns. Though plugins like TablePress resolve this issue with the free plugin, it is still not convenient to create comparison table that needs review stars. In this article, we will explain how to create comparison table in WordPress.
What is a Comparison Table?
Many WordPress bloggers write reviews and recommend products that they use to their readers. This helps in both the ways that readers get reliable information while bloggers get affiliate commission when a reader buys that product. In many cases, the comparison table is most helpful to showcase the information.
- Showcasing a list of top 10 products in a table – for example top 10 hosting companies.
- Compare specifications of two products – for example iPhone and Samsung Galaxy.
How to Create Comparison Table in WordPress?
After searching a lot, we have found a decent plugin that helps to create comparison table in WordPress.
- Login to your WordPress dashboard and go to “Plugins > Add New” section.
- Search for the keyword “table” and find “WP Table Builder – WordPress Table Plugin”.
- Install and activate the plugin to create beautiful tables.
Creating Tables with Drag and Drop Table Builder
After activating the plugin, it will create a menu “Table Builder” on the sidebar navigation. Go to “Table Builder > Add New” menu to create a new table. This will take you to the plugin’s drag and drop table builder interface within you WordPress dashboard.
Enter the name table for your table and choose the columns / rows. Click on the “Generate” button.
Customize Table Settings
On the next screen, you can view the live preview of the table. Scroll down on the left sidebar to find the “Table Settings”. You can setup the following options for your table:
- Enable the option saying “Make Table Responsive” to make your tables responsive on mobile devices.
- Add top row as header and setup a color for your header row.
- Change the outer and inner border sizes and colors.
- Add colors for odd and even rows on your table.
- Setup cell padding and table width.
If you are not familiar with tables, learn here on how to create HTML tables.
Adding Content to Table
After setting up the base for you table, you can drag and drop elements inside the cells and start building your table online. The plugin allows you to add text, image, list, star rating, custom HTML, shortcode and button in the cells. You can customize each element after dragging into the cell.
For example, you can add image element and add links, align, add alt text and adjust the size. Below is how the comparison table will look in the table builder.
After finishing the table content, you can preview and save the table.
Getting Shortcode for Comparison Table
When you are in the builder click on the “Embed” button on the top to get the shortcode for your table.
You can also view all created tables under “Table Builder > All Tables” menu along with the shortcodes for each table.
Inserting Tables in Posts and Pages
Now that you have the shortcode for your comparison table, you can insert anywhere on the site.
- Simply paste the shortcode inside the “Paragraph” or “Shortcode” block of Gutenberg editor.
- You can also insert the table on your footer or sidebar using text widget. Drag and drop the “Text” widget on your sidebar or footer area and paste the table shortcode. Save your changes and the table will start showing on the corresponding widget area on the published site.
The published table on the desktop site will look something like below:
And the responsive mobile view will look like below:
Pros and Cons of WP Table Builder Plugin
The plugin has advantages as well as few limitations.
- The plugin is a beautiful tool for creating responsive comparison tables on your WordPress site.
- It does not show any annoying advertisements or upselling on the admin section.
- Simple, drag and drop interface with customizable options.
- Shortcodes to insert the table anywhere on your site.
- After choosing columns and rows there is no way to change that. If you want to delete a column or row then you need to create from the scratch.
- No possibility to rearrange the rows and columns.
We hope the future updates can include these options.