How to Create a Comparison Table in WordPress (Step-by-Step Guide)

Comparison tables are a core part of any review or buying page. However, without the right tools, it’s hard to build an advanced and responsive table that effectively showcases product features, prices, or images.

In this guide, we’ll show to create comparison tables in WordPress:

• Using the default Gutenberg table block (without plugin)
• Creating advanced customized tables (with table builder plugin)
• Quick table building using pre-built templates

Each method offers different levels of customization, flexibility, and ease of use. 

So, let’s get started.

Comparison Table Preview

Now, here’s a comparison table with custom layout and advanced features. In this blog, we’re going to create the table below and guide you through each step to build it from scratch.

Method 1: Create a Comparison Table (without plugin)

In this method, we’re going to use the default Gutenberg table block to create comparison tables directly within your posts or pages. 

So, here’s how you can create a free WordPress comparison table without plugins.

Step 1: Add a Table Block

• First, go to the past or post where you want to create your comparison table. 
• Inside the post/page editor, click the plus (+) icon to add a block.
• Search for “Table” and select it from the list.

Step 2: Define Table Structure

• A popup will ask you to specify the number of columns and rows for the table.
• Enter the required values and click Create Table.

Step 3: Add Comparison Data

• Fill in the table cells with relevant content, such as product names, images, features, and prices.

To add Product Image: 

• Click on the cell where you want to add the image
• Hit on the more option and select Inline Image.
• Then upload the image from your device or media library.
• Click on Select and your image will be inserted in that particular cell of the table.

In the same way, upload all the images of your comparison products. Then, add the other elements of the table like product name, features, prices, and buy now links.

Here, we’re creating a comparison table on iPhone’s latest mobiles. So, here’s how it looks like with all the images, and data:

Step 4: Adjust Table Content

Your data are roughly placed in the table. So, it’s time to style the contents and make necessary adjustments.

• Adjust the cell size
• Select the table
• Go to block >> disable “fixed width table cells” to adjust each cell based on the content.
• Bold and align the content:
• Select the data that you want to bold and align.
• Then, select the bold or Align icon from the pop-up menu bar.
• Add Learn More link

Now, with this default table block, you won’t get any add button option. So, we’ll just add a link in the text.

• Select the link option to link the learn more text.

Step 5: Customize Table Design

Now, let’s customize the format and the style of the table. You can use the toolbar options to adjust text alignment, make text bold, or add hyperlinks.

Now, let’s customize the style of the table.

• Go to Settings >> Block >> Style section
• Here you can customize all the content style.

Here are the adjustments we’ve made:

• Style: Default
• Text Color: #000000
• Background Color: #FFFFFF
• Typography: S
• Border: 0

Once you’re done, just give a caption of your table at the bottom. 

After that, it’s time to publish the table on your WordPress site.

Step 6: Publish Table

• Click Preview to check the table’s appearance. The final look of the table is
• Once you are satisfied, click Publish to make the page live.

Note:

Here is a thing to consider.

The default settings of WordPress provide basic features to make a comparison table for your site. But, if you want to make a customized or large comparison table, then these settings may be lacked behind.

The main limitations of WordPress default settings are:

• Limited Styling Options: Can’t customize every particular element style like headers, bullet listing, etc.
• No Advanced Features: Functions like conditional formatting, star ratings or clickable buttons are not available.
• No Bulk editing Option: Can’t edit each cell individually or bulk cell’s style and layout at a time.

In that case, you’ll have to  rely on wordpress plugins for quick and customized comparison table creation.

Method 2: Create Comparison Table with Plugin (Advanced Customization)

Plugins are the best choice to make a comparison table with advanced features even with a few clicks. These plugins not only simplify table creation, but also enhance the customization with features like sorting, filtering, and styling options.

Though there are many plugins for it out there, we’re going to use one of the best wordpress table plugins, RioVizual for a  fully customized and responsive comparison table. 

But, why choose RioVizual?

Riovizual is a freemium gutenberg based plugin that offers  19 extensive elements and 52 free pre-built templates to make a fully customized table that aligns with your requirements. Again, it has dedicated blocks like table builder, pricing table and pros & cons table even in the free version.

So, let’s create a comparison table using the best WordPress table builder plugin-RioVizual.

Step 1: Install and Activate the RioVizual Plugin

First, to get started, install and activate the RioVizual plugin for creating comparison tables on your WordPress site. For this,

1. Go to Plugins >> Add New Plugin on your WordPress Dashboard.
2. Search for RioVizual.
3. Install and activate the plugin.

You can also download the plugin from the official site of Riovizual  and then simply upload it on your site.

Once you’ve successfully activated the plugin, it’ll just take a few clicks to create WordPress comparison tables.

Step 2: Choose a table block

Now, you’ve to add the layout of your comparison table. You can make your table in a page or post according to your needs. Here, I’m creating the table in the post section.

1. Go to Posts >> Add New Post.
2. Click on the + icon at the top.
3. Under the Blocks Tab, you will find a dedicated section of Riovizual with 3 table blocks (Table builder, pricing tables, pros and cons).
4. As we’re building a comparison table for our site, I’ll go to the Table Builder option.

5. Now, when you click the table builder option, a pop-up menu will appear. Here, you’ll find the pre-built templates with customization features to create your comparison table. 

But you can always create your own personalized table with the option “Build from scratch.”

6. Here, I’ll click the (+) icon of Build from scratch to build a comparison table from the very start. Once you hit on +, a table layout will be immediately imported into your post.

Step 3: Set Up the table 

Now, in the initial table layout, set up the rows and columns and the style of your table. You can also adjust the header and footer sections.

For now, I’m configuring the table as follows:

• Header section: Disabled
• Footer section: Disabled
• Table Styles: Default
• Cell Border Types: Collapse
• Column count: 4
• Row count: 6

 Once done, just hit on the Create Table option. And, a 6*4 table will be inserted in your post. 

Note:

Here, I’m going to create the same table with the customization features of Riovisual, so that, you can see the difference easily. 

Step 4: Add table Elements

Now, the main structure of your table is ready, so let’s add the comparison elements like content, images, buttons, etc.

RioVizual provides advanced 12 elements to add to the table including text, list, button, image, icon, shortcode, start rating, and others . So, no matter what your requirements are, you can build a comparison table from beginner to expert level.

Here, we’re making the same product price comparison table with Samsung’s latest mobiles on the market.

1. Add Header Section:

Here, add all the comparison factors to your table. We’ve added 5:

• Image
• Product
• Feature
• Details 

2. Add Images

Now, in the first column, I’ll add the corresponding product images. 

Note: By default, there’ll be all text boxes. So, to add product images, do the following:

• Select the cell to insert the image and click on the + icon..
• Hit on Images from the drop-down.

• Now, choose Upload or Media Library to upload your image.
• Hit on Select.

Note: You can also upload images with a image URL. Simply enable the option for Insert from URL, then enter the accessible URL. And, your image will be uploaded.

And your product image is perfectly set in the box. Now, in the same way, add all of the individual images in the corresponding cell of the table.

3. Add products:  Just enter the iPhone model’s one by one in the text boxes.

4. Enter Features: Write the key features of each model in the list.

• Click on the (+) of the particular cell.
• Select List from the menu.
• Now, enter the features for each. For example: The features of 1st model are following:
• 6.1″ OLED display
• A18 Chip
• Aluminum Build
• Starts from $599
• Now, add the individual features of every particular model.

5. Add Details 

Now, in the details column, add Learn More button. So, users can get all other details like price and other features of the model when they click on the button.

• Click on (+) icon >> Button
• Write Learn More as the button text
• Add button URL
• Select the button
• Go to block >> general >> Add URL

You can also keep the link Nofollow as per your choice. And do the same process for the other buttons on the table.

Note: You can also add two buttons in each cell like Buy now and View button. In fact, to add two buttons, just hit dual button from the elements list and then add text and link.

Well, all the table information is ready. And, it shows up like this:

Step 5: Customize the Table

Well, your table is ready and it’s time to customize the table with color, font style, alignment, spacing, and more for more advanced table design.

Here, you’ll find the customization option in the following path:

• Go to Settings >> Block >> Style menu.
• Under the Custom tab, adjust the settings.

Now, let’s customize one by one section of the table:

1. Title:

• First , select the title section of the table.
• Open the “Cell” tab and make the following changes: 

• Background color: #E9F3FF;
• Alignment: Middle

• Then, open the “Text” tab and do the changes for the title text:

• Color: #080808;

• Next, in the “Typography” section, set the font:

• Font: 18 px;
• Family: Inter
• Weight: 700

2. Table body:

Now, let’s customize the images, font, color of the table body.

• First, select all the images by pressing shift and then, go to Image tab >>sizing,

• Height: 150

• Now, select the product’s name. To bulk select all the names, press shift and click on the product cells one by one. 

• Go to “Text” tab, set the color:

• Color: #414141

• In the “Typography” section, do the changes:

• Font: 16;
• Family: Inter
• Weight: 500
• Alignment: Middle

• Then, in the same way, pressing shift select all the features cell from the table;
• Go to List and set the color:

• Color: #414141
• Alignment: Left

• In the “Typography”, set

• Family: Inter;
• Font: 15;
• Weight: Default

3. Buttons:

Well, we’re almost done and now, let’s customize the buttons of the table.

• Select all buttons and click on Button tab.
• Adjust the button color:

• Background Color: 11111
• Alignment: Middle

• In the “Typography”, set the fonts as below:

• Font color: #FAFAFA
• Family: Inter
• Font size:16
• Weight: 500

Now, just make your table responsive for all devices and make caption for the table.

4. Make table responsive for all devices

To optimize your table for all devices,

• Select the table
• Go to General tab
• Under the Table settings, enable the following:

• Convert First Row to Header
• Enable responsive table

You can enable other settings based on your requirements.

5. Make table caption

For the caption of the table,

• Click on the Add Caption at the bottom of your table
• Write the caption text.

Step 6: Publish Your Table

Now, your comparison table is ready to publish on your site. Simply hit on the Publish Button on the top-right corner of the post and your table will be live.

And here’s how the finished version looks:

So, you can see how RioVizual makes a comparison table with enhanced elements like lists, buttons, and even every customization style, all in one place, which the default WordPress features can’t do.

Bonus: Create Comparison table with Pre-built Templates (Quick setup)

Till now, we’ve made comparison tables from setting up the initial table frame. But, if you’ve no time to start from scratch then you make your comparison table in just a few minutes with the pre-built templates that completely go with your needs.

To use pre-built templates for your comparison table, 

• First, go to your site and navigate to the post or page where the comparison table will be built. Simply open your post or page and click on the + icon there.

• From the 3 table blocks (table builder, pricing table, pros and cons), click on the table builder option. Under Table Builder option, rather than choosing Build from Scratch, this time you’ve to select a compatible template for your table from the template’s gallery.

Note: Almost all the templates are free to use and offer complete customization. Even you can also see the preview of the table with the preview option.

• Just hover your cursor on your preferred template and click on Import. The template will be immediately imported into your post. Here, we’ll  import the iPhone’s comparison template.

• Now, go to the settings >> Block and style tab. And, customize all the table elements according to your needs. 

• Finally, once you’re done, simply publish your table.

Warp Up:

Hopefully, you’ve made a fully functional comparison table with all the customizations. While the default table blocks help you create basic comparison tables, plugin like RioVizual provides you with more advanced styling and bulk editing options to handle large, even complicated table structures. Even, you can use the unique pre-designed templates to make a fully responsive table with no time.

FAQs:

• How to create a comparison table for free?

To create a wordpress comparison table for free, you can use the default table block of Gutenberg editor to make basic tables. However, if you want to build customized comparison table with advanced features, you can use the free version RioVizual plugin.

• Are comparison tables mobile responsive by default?

No, if building manually, you may need to add custom CSS to ensure mobile friendliness. However, plugin like RioVizual offers you fully responsiveness and even scrollbar for small devices.

• Are there SEO benefits to using comparison tables?

Yes. Properly structured tables with relevant keywords and schema markup can enhance on-page SEO and even earn feature snippets in Google search results.