How to Add a Table to WordPress (Drag & Drop Builder)

In this post, I’ll show you how you can add a table to your WordPress website.

It’s going to be super fast and easy.

It can be used for many things such as a product comparison table or as a way to display information which allows your viewers to easily understand the data. E.g. simple pros and cons, pricing table, timetables or even a sports ladder.

Unlike many others I’ve used in the past – This is Drag & Drop, so it’s very easy to customize and setup since it’s visual.

Let’s get into it.

Step 1: Install & Activate a Plugin called “WP Table Builder

wp-table-builder1

WP Table Builder is a drag-and-drop table builder that brings the simplicity and power of page builders for tables.

Step 2: Add New Table

Add-New-Table

Step 3: Add Columns & Rows

Set-Columns-&-Rows

Don’t worry, you can also remove and add more later. While you’re here, you can also set in your table name.

Step 4: Add Headings

Add heading by simply using a “text module”. You can bold, italicize, link, and align your text too.

Add-Headings

Step 5: Add Products + Images

Add-Image

For Amazon Affiliate Links & Products: Unlike AAWP, this plugin doesn’t integrate with Amazon API, so you will need to manually add your Amazon image & affiliate link using the Sitestripe HTML and paste it into the “Custom HTML” widget.

SiteStripe

Step 6: Add Lists to Table

List-Items

Step 7: Add Star Ratings

You can change the size, colour, star count, alignment and show the number rating.

Star-Ratings

Step 8: Add Button & Links (Affiliate Links)

Here you can link people to your product pages or you can enter your affiliate link. There is also an option to set it to open in a new tab and also to nofollow that link (great for affiliate marketers).

Buttons

Step 9: Styling Colours

You can adjust the header background colours, the rows and also select a custom area you’d like to change the colour for.

edit-colours

Another essential function is the ability to edit the column width. This is important because sometimes the text or images may not fit.

Edit-Columns

Step 10: Preview & Embed

To display your table, you just need to click the “embed” on the top right corner and it will generate a shortcode. You can paste this shortcode on any page, post, or text module (For page builders).

shortcode for embed

Additional documentation for customization can be found here.

How to Make Your Table Responsive

Step 1: Navigate to the “Responsive” Tab

Step 2: Enable Responsive Table

Make-table-reponsive

Step 3: Set “Top Row as Header”

A Look at the PRO Version of WP Table Builder

While you can certainly do a lot with the Free version, you get even more functionalities on their PRO version.

Top 5 Features

#1 Pre-Built Templates + Use own table as a template

    Pre-Made-Templates

    #2 PRO Elements (Ribbons, Icons, Circle Rating & Styled Lists)

        Pro-Elements

        #3 Sorting & Ordering (Go to Settings > Sort Vertically)

        #4 Add Tooltips

        Perfect for displaying extra information without taking up more space.

        Tooltip1

        #5 Priority Support & Updates

        Perfect for those who need extra help in customizing their tables.

        If you have any questions, drop them below!

        Share