How to Make a Data Table Online with WordPress

How to Make a Data Table Online with WordPress

There are WordPress tables that help make beautiful and effective charts and tables. Tables and charts help to present data and information in a way that is easy to understand and absorb.

They make the presentation more logical and visually more appealing.

When is it a good idea to use a table to present information? Think about using them for the pricing information of products or services.

Use them to list staff, clients, or partners, along with their corresponding data. Or how about sports statistics, teams, and rankings?

But how to make a data table in WordPress? The WordPress editor is great and is useful for many things.

It does not, however, have a function for making tables. So, when making a post or blog, it is not easy to insert a table.

Making tables in WordPress is not easy. Especially for those new to WordPress or who lack technical skills.

A plugin could be the answer. With a WordPress table plugin, making professional-looking tables is a piece of cake.

Why Use a Table Plugin?

Tables and charts created with wpDataTables

With a WordPress plugin, a user can make, adjust, and dress up a table. Then they can insert the table into WordPress and use it in a variety of ways.

Making data tables with a plugin is much more practical. The result is more professional and of high quality.

Putting information in tabulated form makes it more understandable. People enjoy studying and looking at them.

The result is that they will spend more time on the website and are more likely to return. That is good for business!

Of course, this tutorial will make abundant use of wpDataTables. It is amazing to see how many different things this plugin can make and the professional results it gives.

It has tons of functionalities and features. It does so much more than make basic tables.

Importing large data sets is not easy. wpDataTables has a feature that makes it easy, which is available with the paid version.

It can export the created tables in a variety of formats into a post. It can make CSV or Excel formats, as well as ODF and MySQL queries.

A benefit of wpDataTables is that using it does not require experience or knowledge of HTML or CSS. There is a clear and practical settings page that controls everything.

When all settings are correct, it is only a matter of copying and pasting the shortcode.

How to Make a Data Tables with wpDataTables Plugin

This is how it works:

The Source File

Make sure to have the source file ready. The Table Configuration page has a Data Source tab.

In this tab, users will find various settings. This is also where to define the data source.

This can be:

  • MySQL query
  • Excel
  • CSV
  • XML
  • Google Spreadsheet
  • URL
  • Serialized PHP array

The example uses an Excel document that contains the data.

Make sure that all the data is correctly tabulated. If it is not properly arranged wpDataTables will struggle to read the table’s columns.

Create a New Table

To create a new table go to the wpDataTables, which is on the left part of the WordPress dashboard. Clicking on it will bring up the screen shown above.

This is where to create or add a new table. Click the Add New button and a screen will appear that looks like the one above.

Now set the table’s correct parameter. The parameters define what the table looks like and how it behaves.

The next subheading discusses some of these features.

Define the table features

There are several sections on the Table Setup page. These are the ones that are in the first three sections:

  • Default rows per page
  • Hide until loaded
  • Info block
  • Limit table width
  • Pagination
  • Pagination Alignment
  • Pagination Layout
  • Responsiveness
  • Rows per page
  • Scrollable
  • Show table title
  • Word Wrap

All the parameters are customizable. The resulting data table can be as complicated as desired.

After setting these parameters, click the Upload File to select the source document.

After the three sections discussed above there are some more customization settings:

  • Responsive. This setting displays the data table according to the device and screen size of the viewer.
  • Scrollable. Allows for horizontal scrolling.
  • Hide table until page is completely loaded. A practical setting for pages that load slowly.
  • Advanced filtering. Adds a filter at the end of each column.
  • Filter in form. Adds a filter in the form.
  • Table tools. Allows for the embedding of additional functions. These include copying and saving to Excel or CSV.
  • Enable sorting. Add a table sorting function.
  • Limit table layout. Sets the table’s size to the size of the parent container.
  • Display length. Defines the number of entries on a single page.

There is a Preview button that shows what the table will look like. Make more adjustments as needed.

Once all the parameters are correct and the form optimized, click the Save button.

However, after saving there are additional options. Use these to make the table even better.

The plugin has some default settings that are automatically used. These settings include color and filter type.

Sort data by parameters like date, time, and text. Below is an example of edited column types, colors, numbers, and strings.

Save and Copy Shortcode

Do not forget to save the table and click Close. The plugin will go straight back to the homepage.

If everything went ok, the recently created table appears, along with the title, type, and a duplication option.

It will also show the shortcode. Copy the code and go to the target page.

Add the Shortcode to a Page or Post

Adding the table to a page or post is now very easy. Select where it should go and paste the shortcode into the page’s editor.

Continue editing the page and optimizing the content.

Publish

When finished, click the Publish button. The page and the table should look something like the example.

It will be perfect, consistent, and aligned. The data in the table is easy to read and understand.

Website visitors will have the option to export the data in a variety of formats. They can also filter the data on the website

There is also an integration with wpBakery and Elementor. Any table created with wpDataTables is exportable to these page builders.

How to Create WordPress Tables without a Plugin

It is possible to make WordPress tables without the help of plugins. This article discusses three: using Google Sheets or Google Docs, Tables Generator, and Block Editor.

Using Google Docs or Sheets

This starts by creating a new Google Documents or Sheet. It doesn’t matter which one.

This guide assumes the use of Docs. After creating the document:

  1. Go to Insert
  2. Click Tables
  3. Select the number of rows and columns
  4. Press Enter
  5. Fill in the data
  6. Select the table
  7. Copy it
  8. Paste it into the WordPress editor

With that, the element is ready for publishing.

The downside of this method is that there are very few customization options. It does not have many choices for styling.

Also, the resulting tables are not very responsive. These types of data tables are usually very difficult to read on mobile devices.

Using Table Generators

The basic coding behind WordPress tables is HTML-based. Added to that are CSS styles to make them look nice.

So making data tables without a plugin requires some coding and not everyone knows how to do that. For that reason, many depend on plugins and online table generators.

They create and make up a data table in one of these generators to make the HTML code for it. Then copy and paste the product into the WordPress website.

Some better online generators create responsive tables that work on different screen sizes. Some others also add styling but usually, the possibilities are limited.

Yet, they are very useful. Some good ones are Responsive Table Generator Tool and Rapid Tables.

Creating Tables in the WordPress Block Editor

To do this:

  • Make a new post or page or continue editing an existing one.
  • In the editor, click on the +-sign to add a new block.
  • Click Table under Formatting. Or search for it in the Search for a Block field.

  • Choose the number of columns and rows for the table. The default is 2×2.
  • Enter the data into the cells. The cells automatically resize based on the content.

Or set the cell size to a specific size using the option on the right.

  • Add a header and footer in the options section on the right. The example shows a table with a header and a grey background color.

Change the color under the Color Settings tab.

These three methods for creating data tables and using them in WordPress work well. But they also have many limitations.

For example, there are no advanced features. They do not produce responsive tables and they often cause technical issues.

Ending thoughts on how to make a data table in WordPress

Tables are so useful for presenting data, so their abundance on the web is hardly surprising. They improve the user experience and viewers can absorb and understand the information.

The classic WordPress editor does not have the ability to create tables. How to make a data table in WordPress then?

One needs to resort to the use of third-party applications. This article showed how to use Google Docs to do that.

This post also showed how to use the wpDataTables plugin. This plugin can make beautiful and responsive tables.

It is the easiest to use and offers a large variety of features that allow the user to make the table they want.

If you enjoyed reading this article on how to make a data table, you should check out this one about data sources.

We also wrote about a few related subjects like DataTables alternativeJavaScript table libraryWordPress table plugins, how to create a table in WordPress without a pluginhow to insert a table in WordPressWordPress pricing table plugins, and how to create statistical tables in WordPress.

Up Next:

How to Backup and Export the WordPress Database

How to Backup and Export the WordPress Database