Skip to main content

How To Add Interactive Tables In WordPress Without Any HTML

The last time I tried adding a table to my WordPress blog, I ended up scrapping the whole thing and using a bullet-point list instead.

Sound familiar?

So many stunning WordPress themes come with the ability to create great looking tables. And sure, they may look good initially but you can’t do much with them.

Want filterable data? Nope.

Want the table to be mobile responsive? Nope.

Want to import data from a CSV? Not a chance.

Here’s the good news:

With the right plugin, you can create highly functional interactive tables. The sort of thing that allows you to display data that’s filterable.

Along with graphs and all sorts.

Sound good? Let’s take a look at how it can be done with wpDataTables.

Note: While this tutorial is focused on interactive tables, you might find our tutorial on creating mobile responsive tables with wpDataTables useful. Click here to check it out. This new tutorial takes into account the updated user interface and extra features recently released in wpDataTables.

[su_note note_color=”#ecf1f7″ text_color=”#343E47″ radius=”0″]

Note: While this tutorial is focused on interactive tables, you might find our tutorial on creating mobile responsive tables with wpDataTables useful. Click here to check it out. This new tutorial takes into account the updated user interface and extra features recently released in wpDataTables.

[/su_note]

This plugin lets you create beautiful tables without any HTML knowledge

wpDataTables is a premium WordPress plugin that makes the process of creating and publishing tables to your website a breeze. It’s lightweight, intuitive and gets the job done in a matter of minutes, leaving you with less code to wade through and more time to blog.

Get wpDataTables

One of the key points about this plugin is that you don’t need any prior HTML knowledge to get it up and running. Everything is done within an easy to use settings page. To publish it’s simply a case of copying and pasting a shortcode and you’re good to go.

For bloggers and businesses, this is great news because it allows you to display lots of data in a succinct and easy to digest way.

You could even use it for:

  • A product catalogue
  • Comparison charts for products
  • Price lists
  • Data collection from users
  • Sports results
  • Tracking your progress for anything involving numbers (e.g. a blog income report)

The possibilities are endless.

Creating a table from start to finish: a step-by-step guide

Using the wpDataTables plugin to create beautiful, clear and fully functional tables on your WordPress website is simple.

Here’s how to get started:

Step 1 – Have your file ready

Below, I have created an Excel document example for a number of random expenses. This includes several columns such as date, payment method and cost.

Excel Document

Make sure you have your data displayed in a similar way, otherwise the plugin will struggle to define the columns in your table.

Step 2 – Create a new table

Navigate to the wpDataTables on the left-hand side of your WordPress Dashboard.

wpDataTables Tab

Clicking this link will bring you to the screen above. This is where you will create and add your new table:

Create A New Table

After clicking the “Add New” button, you’ll see this screen. This where you’ll begin setting the parameters of your table, so that it functions and looks the way you want it to:

Table Parameters

Step 3 – Define your table features

Basic Table Settings

In the first three sections of the table setup page, you can do the following things:

  • Create a title
  • Select whether you want to show your table title on the page
  • Select a type of input source for your table

These are your most basic table settings.

Click on “Upload File” and search for your document. The tables you can create can be as complicated as you need them to be.

Upload File

As you can see, I’ve given my table a relevant title, selected the Excel file type from the drop-down box, and uploaded my file to WordPress.

Further down the page, you’ll come across further settings to customize your table:

Additional Settings

These are:

  • Responsive – Allows your table to display differently on desktops, tablets and mobiles
  • Scrollable – Able you to scroll your table horizontally
  • Hide table until page is completely loaded – Useful for slowly loading pages
  • Advanced filtering – For displaying a filter below each column
  • Filter in form – For a filter within the form itself
  • Table tools – For options such as copy, save to Excel and save to CSV embedded within your form
  • Enable sorting – This enables you to sort your tables
  • Limit table layout – Limit the table’s width to 100% of the parent container
  • Display length – Define how many entries are displayed on a page

By clicking “Preview” you can view your table and change any settings you feel necessary to get it looking how you require.

Table Preview

Once you’ve selected the options that best suit the type of table you wish to display it’s time to click the “save” button.

If you want to customize your columns further, once you have clicked “save”, you will be able to scroll down the page further for more options. The default settings are automatically generated, however with this you can change each column color, column and filter type (such as date, time and text).

Optional Column Setup

Below, I added some colors and edited the column types to text, number, and string.

Table Preview With Changes

Step 4 – Save and copy shortcode

Once you’ve saved your table click “Close” and it will direct you back to the plugin’s homepage. You should now see your table you’ve created, the title and type of your table, the shortcode for inputting into your post or page and the option to duplicate it.

I want to display this table in a page, therefore I’d need to copy the shortcode and then navigate to the page I wish to edit.

Copy Table Shortcode

Step 5 – Add shortcode to post or page

To add your table to a page, it’s really as simple as pasting your shortcode into the page editor. Select where on the page you’d like to display your table, paste your code and carry on crafting your content:

Paste Shortcode In Page

Step 6 – Publish

Once you’ve hit the publish button on your Page, your table should look something like this. As you can see, it’s clear, consistent, perfectly aligned and holds all of my data in an easy to navigate way:

Publish

The options across the top of the table will allow users to export the table contents in a variety of formats. You can also filter results easily on the front end of your site.

What other tables can you create?

You’re not just limited to simple CSV based tables however. WP Data Tables can display a wide range of data in multiple formats.

Here’s an example of a fully functioning, responsive and editable table with multiple columns and options. You can play around with it for yourself here.

wpDataTables Table Example

This table is MySQL based with filters to sort the content dependent on the user’s needs:

WordPress Interactive Table

This PHP array based table is serialized and includes images – this adds a whole different dynamic and functionality that many ecommerce stores would find particularly useful:

print-array-in-wordpress-with-wpdatatables-wordpress-plugin

You’re not limited to just CSV files either. WP Data Tables also allows the use of Excel-based files, enabling you to make use of the many specific features that comes with it:

Excel Live Demo

Other wpDataTable features worth mentioning

  • wpDataChart wizard – Allows you to transform your data into a graph or chart in a few easy steps. It currently supports 3 render engines – Google Charts, Highcharts and Chart.js. Find more documentation here.
  • Conditional formatting – Allows you to highlight cells, rows, and columns based on its content. It is useful especially if the table completely numerical. Find more documentation here.
  • Formula columns – Enables you to add a column which can be used to calculate a figure based on the numbers set out in other cells. Find more documentation here.
  • Datetime columns – Used for cells which contain both dates and times. They will automatically appear in the format you set on the settings page. Find more documentation here.
  • Sum/Totals row – Used for numeric columns, it allows you to calculate the sum of all the values. Find more documentation here.
  • Report Builder – Is an add-on for wpDataTables. Report Builder instantly creates documents and spreadsheets filling your templates with actual data from your WordPress site. Find more documentation here.
  • Master-Detail Tables – Is an add-on for wpDataTables which allows you and your site visitors to see details for each row with a simple click. Find more documentation here.

Get wpDataTables

Final thoughts

Tables are a great way to display data. And when you add interactive features such as filtering, you make things a whole lot better for your website’s visitors.

I’ve walked you through how to create an interactive table in WordPress by uploading data from Microsoft Excel (or using any other spreadsheet tool). But, there’s so much more that’s possible.

You can even turn any of your tables into charts or graphs, and more.

Now, it’s time to get started on your own table – enjoy!

Related reading: 5 Powerful And Mobile Responsive Table Plugins For WordPress.

(Disclosure: this is a sponsored post but we only say good stuff when we REALLY mean it. Read more.)

Wp-dd.com

WordPress Design, WordPress Development, cPanel Hosting, Web Design, Web Development, Graphic Design, Mobile Development, Search Engine Optimization (SEO) and more.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.