Interactive Tables in WordPress Posts Without Google Sheets

Interactive Tables in WordPress Posts Without Google Sheets

You can add interactive tables in your WordPress posts by using a plugin or HTML. But I don’t suggest plugins as sometimes it can become a hindrance for your site speed. Also, many of the bloggers are not familiar with codding. Then what’s the solution? You can insert tables in WordPress posts without a plugin or HTML coding. You can use Google Sheets for this purpose.

How to Create Table Chart in Google Sheets and what’s its peculiarities?

The table that you are inserting using Google Sheets will retain the below four table features.

1. The table will be interactive that means you can navigate through the rows with your keyboard or mouse.

2. You can control the table length with pagination.

3. Your readers can sort your table if required.

4. You can update the table in Google Sheets and it will be automatically reflected in your WordPress post table.

I never compromise on page speed whether it’s on mobile or desktop. So if you prefer to go ahead with a plugin for inserting beautiful simple tables in your posts, after installation check with Google Page Speed Insight whether it’s not affecting your site loading time.

Finally, one more thing before we start our tutorial. If you monetize your blog, my humble advice is please never compromise on page speed. You can earn threefold more money with a blazing speed site together with a spiced up layout compared to a site with poor page speed performance.

Introduction to Interactive Tables

Google Sheets is a free online application with offline features. So the table that you create by using Google Sheets will be of course free to use on WordPress.

When you insert interactive tables in WordPress posts without a plugin and using a Spreadsheet table, the inserted table will look like and behave as below. If you satisfy with this type of responsive table in WordPress, you can continue with the tutorial.

How to Insert Interactive Tables in WordPress Posts Without Plugin

I am going to use the Google Sheet Table Chart feature here to insert tables in WordPress. So with the help of this tutorial, you can also learn how to use Table Chart in Google Sheets.

The main use of Table Chart in Google spreadsheet is to create a Google Sheet Dashboard as well as publish interactive tables on the web.

It’s one of the charts which is not available in Excel.

Steps to Create Interactive Charts in Google Sheets

Make your table ready in Google Sheets. You can refer our Spreadsheet data above for creating your table. I hope you have some exposure to Spreadsheets. So you may know the term “table”.

Select your data. Then from the Insert menu select “Chart”.

Insert Chart - Table Chart 1

From the “Chart editor” that appears on the right, select “Table Chart” under “Chart type”.

Insert Chart - Table Chart 2

We are now inching towards finishing the steps in Google Sheets to create a Table Chart. Let’s move to the customization part of the table chart menu.

Under “DATA” enable “Use row 1 as headers”. Actually, it depends. In our data, the first row is with the column name aka field label.

Insert Chart - Table Chart Step 3

Move to the next tab in the chart editor labeled as “CUSTOMISE”. There make the following changes to add pagination and for coloring alternative rows.

I prefer to color alternative rows as it makes the table beautiful.

Insert Chart - Table Chart Step 4

In the above enabling “Alternative row colors” will give your table a shaded color in the alternate rows.

The “Show row numbers” will show the row numbers on the left. Click “Pagination” if you want to control page numbers in the inserted table in WordPress and decide the total number of rows to appear on each page under “Page size.”

You have done all the steps in Google Sheets. Now the last step is to insert interactive tables in WordPress posts without a plugin.

Steps to Publish Interactive Charts

To insert the Google Sheet table Chart into your blog post, you require an embed code. How to get that embed code of your just created Table Chart?

Click on the Chart Table that you have just created. You can see a three dotted menu on the right top corner.Insert Chart - Table Chart Step 5

Access this menu and click “Publish chart” to get the following options.Insert Chart - Table Chart Step 6

Go to the “Embed” tab and click “Publish”. Just copy the code and in your blog post insert it. This way you can easily insert tables in WordPress Posts without using a plugin or HTML coding.

Comments

comments

Close Menu
Show Buttons
Hide Buttons