A Tale of WordPress Responsive Tables

I always organize stuff on my laptop, from bookmarks to folders. I even use specific icons for certain folders. Call it OCD, I call it just order and discipline 😁.

Now, when I write stuff, I like to keep it simple, and structured. And when I read blog articles and ebooks, I always want to see clear chapters, bullet points, or tables.

Let me show you an example. I like looking for new recipes. The problem is that food bloggers kinda write for SEO purposes, not for the end-user. So, first, you need to find out the history of the potato, then how pepper was discovered, then, you will find the ingredients to your recipe. This is why I got excited when I found this.

That’s more like it!

So, if you want to really create a good user experience, structuring information should be top of your mind.

Now, tables can be a great way for organizing information in a logical and visual way. They can also help users better scan your content. In this fast world, we all scan through content in order to assess if it’s worth reading or not. We are trying to find the answer to our problem/question as easily and fast as possible.

Also, there are some website sections that need a table by default, such as pricing sections, schedules, product lists, etc.

And, you also have data tables that you might want to import from other sources, and want to make them look good on a page or post.

Now, there’s a heartache when it comes to creating tables in WordPress: how to make them responsive. We’ll talk about this too a bit later. 

So, it’s time to see how we can build tables in WordPress.

 

How to Create WordPress Tables in the Default WordPress Editor (Gutenberg)

Let’s say you want to add a table to a blog post. Here are the steps:

1. From the WordPress dashboard, navigate to Posts -> Add New
2. Inside this blank new article locate the “+” sign, and click on it. It will open a new window with a list of blocks.
3. Type “table” in the search bar inside the window.
4. Select the table block.
5. Adjust the number of columns and rows.
6. Select “Create Table”.
7. When you place the mouse cursor inside the table, a toolbar will show up with editing tools: alignment, row and column management, text writing, etc.
8. Type in your text in the table cells. They’ll automatically resize depending on how much content you type. 
9. Advanced edits can be made from the menu on the right. Just make sure the table is selected (just place the cursor in one of the table-cells). You can choose from the two table styles available, add a header, add background color, etc.
10.  For those that want to go a bit further with their table design, under the advanced menu item, you have the option to add custom CSS. Here you can also assign an HTML anchor if you want to make use of page jumps. More on this topic, here.

And you’re done!

Don’t forget to hit “Save draft” or “Publish”, before exiting.

If you need something more advanced than this, you can use a WordPress plugin. I’ll make some recommendations a bit further down in the next chapter.

 

How to Create WordPress Tables in the Classic WordPress Editor

For those of you that are still using the previous WordPress editing experience, there are two design options:

• Custom HTML editing
• Creating tables via WordPress plugins

Now, I won’t be showing you how to code your own table, this can get too long, and you really need to know your HTML.

But I’m gonna go the easy way: enter WordPress table plugins!

 

How to install a WordPress plugin?

It’s quite straightforward:

1. Front the WordPress dashboard navigate to Plugins.
2. Select “Add New”.
3. Look for your desired plugin in the search bar.
4. Select “Install”.
5. After clicking on “Install”, an “Activate” text will appear on the button. Click it in order to activate the plugin.

The flow for installing and working with plugins is detailed in our video tutorial as well:

 

How to choose a WordPress table plugin

There are some key elements you should pay attention to:

• The plugin reviews
• Responsive feature
• The possibility to do data sorting and/or filtering
• Extra styling options
• What kind of media is supported
• Import/export capabilities
• Pricing

Now, before selecting any WordPress table plugin, you should know what features you care about most. 

 

Our WordPress table plugin recommendations

Most of the WordPress table plugins out there let you embed a table on a WordPress page or post via a shortcode.

What does this mean? You will define your table inside the plugin, and when it’s done and saved you will get a tiny line of code, looking similar to this: [table id=1]. All you’ll have to do is paste this code on a page or post if you’re using the Classic WordPress Editor. If you’re using the Default WordPress Editor, you will need to use the shortcode block.

You’ll just have to paste your shortcode in the space shown below:

I’ll show you more details, a bit later, when I’ll take one of the table plugins for a ride.

Now, let’s see the recommendations.

TablePress

This is the most popular WordPress table plugin. It allows you to:

• Insert any type of data, like numbers, text, images, links, and even math formulas! 
• Do live sorting (this is a cool one!).
• Import tables from Excel files and HTML.
• Export your table 
• Use it for free

The plugin does not cover responsive tables by default. 

On the plugin’s website, you’ll see this statement: “Due to how tables on websites work technically, they can not always adjust to the available space on the screen automatically. The reason is that their content requires a certain minimum space, and that’s what defines the minimum width of the table. If that minimum table width is bigger than the width of the available content area, the table will not fit. Unfortunately, this can lead to ugly behavior on small screens, like on phones and tablets, where some parts of a table might then be cut-off on the right side”.

A table is a table, right? You can’t just cut some of the columns, just because they do not fit in. You can’t just reconfigure the whole table, because some of the information might not make sense in the end.

What does this mean for you? 

That you can buy an extension that will make your table kinda responsive. There are 4 approaches for this:

• Flip: the table gets flipped, meaning that rows appear as columns and vice versa, and you will be able to scroll the table horizontally (it might not work ok if you’re having images in your table). 
• Scroll: this feature will make a too wide table, horizontally scrollable! How cool is this? And if you’re using images inside the table, they won’t be disturbed. 
• Collapse: this feature will add a hide/expand effect to a table. It will hide the data from those columns that would otherwise be cut-off and instead add that data to a collapsable row that is inserted below each entry. 
• Stack: The stack mode will show the cells of a row on top of each other, instead of next to each other. This makes the table more narrow, as it will appear to have only one column. 

 

Ninja Tables

Let’s take a look at its features:

• You can choose from 100+ table styles. 
• It has the 3 most popular CSS libraries with unlimited color schema! 
• Bordered table
• Table Inverse
• Striped rows
• Data Tables

The paid plan of Ninja Tables comes with the following advanced features:

• Unlimited table colors and customization
• Google Sheets integration
• WooCommerce Product Table
• Conditional column formatting
• FrontEnd Table export – CSV, Print, PDF
• Show data from your own custom SQL table and SQL query

And because mobile responsiveness is a must, Ninja Tables made all the tables automatically responsive for mobile devices by placing in-row expandable areas.

 

JetEngine Tables Builder

Would you like to create dynamic tables? So, have a look at the JetEngine Tables Builder plugin. You can use this plugin with Elementor page builder and Gutenberg editor. The Tables Builder allows building simple or complex dynamic tables on your website. 

Main features:

• Showcase posts, products, comments, or SQL data
• Display custom fields data
• Create the table from dynamic data
• Style your table
• Show backend data on the frontend table
• Add the table to any page

Creating the dynamic table has several steps: create a new Query, set table settings (name, data Query), add a column to the table, style the table, preview, and add to any page on your website. 

JetEngine Tables Builder pricing:

You can buy a single JetEngine plugin for $26 per one website or $54 unlimited websites per year. Also, JetEngine is a part of Crocoblock subscription; prices start from $130 per year. Crocoblock subscription includes all JetPlugins for website building.

 

WPDataTables

The most important features for WPDataTables are the following:

• natively responsive
• table import
• cell custom formatting
• you can create a table that’s linked to an existing data source
• you can generate a query to the WordPress database, or to a MySQL database
• you can create 14 different chart types using the Google Charts rendering engine
• advanced filters and search options

Some of the features above are paid, some of them are free.

 

Creating a WordPress Table Using WPDataTables

And because for one of our blogs, we’re using WPDataTables, let me show you how to get around.

The moment you activate the plugin, you will be able to access it from the WordPress dashboard.

Let’s create our first table.

1. Navigate to “Create a Table”
2. Depending on the plan you’re using, you can create a table from scratch, you can import it, or you can create SQL/MySQL-based tables.
3. Select “Create a simple table from scratch”, then click on “Next”.
4. Name your table and select the number of rows, then select “Generate table”.
5. Fill in your data in the table.
6. Make edits to the content using the toolbar above the table: alignment, text styling, text positioning. You can even add HTML code and images.
7. From the Display menu (near “Edit Data”) you can make some additional table settings such as: naming the table, making cell padding changes, choosing the table header. 
8. Preview how the table looks on mobile and tablet, and decide on the type of scrolling from the “Responsive” menu.
9. When done, hit “Save changes”.
10. From the menu on the left-hand side, navigate to wpDataTables. In here you’ll see all the tables you created, with their shortcodes. Here you can delete tables that you no longer use.
11. Copy the shortcode of your desired table. Paste it inside a page, or a post. As previously mentioned, you can paste it inside the Shortcode Block inside the Default WordPress editor.

And you’re done.

Let me show you one of my tables.

This is where I pasted the shortcode:

Piece of cake, wouldn’t you say?

And that’s a wrap, folks!

If you want to also know how to create charts, here’s a useful article on the topic: WordPress Charts: All You Need to Know.

 

Now, if you liked this article, and you want to learn more about how to design a WordPress website, make sure to subscribe to our Youtube channel and follow us on Twitter and Facebook!

 

[sibwp_form id=1]