Formidable Forms

Formidable Forms

  • Features
  • Pricing
  • Blog
  • Support
  • Login
  • Get Formidable Forms

Formidable Team / Last Updated September 1, 2021

How to Make a Responsive Table in WordPress

Looking for a way to make a beautiful, responsive table in WordPress? We have the answer!

How to Make a Responsive Table in WordPress

With so many ways to access the internet, your users are probably visiting your site on different devices. However, mobile devices with smaller screens may not display your data correctly. Therefore, knowing how to make a responsive table can be crucial.

Fortunately, this process can be simple with the help of our Formidable Forms plugin. By using our latest responsive tables feature, you can create easy-to-read tables for every type of device.

In this article, we’ll explain some of the benefits of making your formatting adaptable for different-sized browsers. Then, we’ll show you how to make a responsive table in just three steps. Let’s dive right in!

Formidable Forms is the best WordPress Form Builder plugin. Get it for free!

Why you might want to make a responsive table

Tables can be used to organize all kinds of information. For example, they can be an efficient way to build a job board website.

However, the appearance of your table can be affected by certain devices. Smaller screens and browser windows can lead to awkward, nearly unreadable tables or horizontal scrolling. This can negatively impact your site's user-friendliness. But it's not easy to do with standard HTML tables.

That’s why we added an option to make your tables responsive. When you select this feature, each column in your table will display as a full row when the browser window is smaller than 760px wide.

With this feature, your site will automatically adjust to provide the optimal view. As such, your users will be able to successfully navigate your tables regardless of their device.

Fortunately, Formidable Forms also makes adding this feature simple. With this plugin, you’re just a few steps away from a table that can adapt to any screen size!

How to make a responsive table in WordPress (in 3 steps)

Before you begin, make sure you have Formidable Forms Pro + Views installed and activated as this is a premium feature. By using our plugin, you’ll be choosing one of the best WordPress table plugins available.

Step 1: Create a new data source and View

The first step to making a responsive table is building a data source. This is the form that will provide information to fill in your table. You can create a data source by going to Formidable → Forms → Add New:

The option to add a new form with Formidable Forms in order to create a responsive table in WordPress

Then, drag-and-drop fields to create a form. We’ll be using a basic membership list for this walkthrough. We want the final table to display three columns: a name, an age, and a location. As such, we’ll include each of those fields in our data source.

After you’re done, save your work. You can then collect responses from your site’s users. Alternatively, you can import your entries if you’d like to save time.

When you're done, you’ll need to create a table View. You can do so by going to Formidable → Views → Add New. Then, select Table as your view type.

On the next screen, select the data source form that you made earlier under Use Entries from Form. You’ll also have to name your view:

A new view for a responsive table in WordPress.

Finally, click on Create a view. This will bring you to the next screen, which we'll fill out in the next step.

Step 2: Customize your table settings

Now, you can start customizing your table's basic settings in the table generator. After the previous step, you should now be looking at the following screen:

A screen to select which items will be in the reader's responsive table.

Decide which fields you want to display in your table. For example, if your form asked for a first and last name, you might only want to display the first name to respect your users' privacy.

When you're ready, click on Create a view. You should then see the main editing screen for your Table view:

An example of an editing menu for a table view.

Next, go to the Table Settings section in the left-hand menu. Under the Row Style drop-down menu, you should see a small checkbox labeled Make table responsive:

The location of the 'make table responsive' option.

If you don't check this box, your table won’t change to fit the size of your screen. For example, here’s what our above table looks like on a small screen without the feature:

An example of an awkwardly sized non-responsive table.

As you can see, the table has kept its original design. This creates an awkwardly wide table and can be harder for those with smartphones to read.

For reference, here’s what happens to the table elements when we check the box to make the same table mobile responsive:

A more vertical table better suited for smartphones.

The columns are now taking up entire rows, and the table is longer than it is wide. As such, users who have smaller windows will be able to easily see each group's information at once.

Step 3: Style and publish your table

Now that you’ve made your table responsive, you may also want to add some style elements. For instance, our previous responsive table examples used the Zebra Stripes table row styling.

Your table will adapt to all screen sizes no matter what table styling options you choose. For example, here’s the same data from the above responsive table examples using the Grid style:

A responsive table using grid styling.

Another way to accommodate mobile users is to add several pages to your responsive table. This can reduce your visitor's need to scroll for a long time. Go to Advanced Settings and enter the number of posts you want per page under Page Size.

You'll now be able to add the table across multiple pages:

An example of a responsive table that also uses pagination.

We encourage you to consider these settings whenever you need to make a table. No matter what kind of data you’re displaying, responsiveness can be a simple way to help more people access your website.

Conclusion

With so many mobile internet users these days, you might want to consider their user experience when building your website. This can be especially true when it comes to formatting tools such as table design. Fortunately, creating a responsive table can be a simple process.

In this article, we showed you how to make a responsive table in three steps:

  1. Create a new table data source and a new view.
  2. Customize your display settings to include responsiveness.
  3. Consider other style elements for your table.

Adding a responsive table option is just one of the many aspects that make Formidable Forms a powerful plugin. Check out some of our other impressive features today!

Read more about Formidable Views

  • WordPress table plugin The Ultimate WordPress Table Plugin
    Read More
    The best WordPress custom application plugin Formidable Views: The Best WordPress Custom Application Plugin
    Read More
    Best WordPress Data Visualization Plugins 6 Best WordPress Data Visualization Plugins
    Read More

Using WordPress and want to get Formidable Forms for free?

Get Formidable Forms Lite Now

This article may contain affiliate links. Once in a while, we earn commissions from those links. But we only recommend products we like, with or without commissions.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Get Email Updates

Popular Resources

    • How to Create a Searchable Database on a WordPress Site
    • Create a Calculator in WordPress: Easy, Powerful Results
    • How to Create a Fitness Tracker in WordPress
    • Formidable Views: The Best WordPress Custom Application Plugin
    • How to Require Email to Download Files in WordPress
    • How to Create Conditional Drop Down Lists in WordPress Forms
    • The Best Gravity Forms Alternative: Formidable Forms vs Gravity Forms
    • How to Make a Quiz in WordPress
    • WPForms Alternative: Formidable Forms vs WPForms Compared

Take on bigger projects Right Now

Get the tools you need to revolutionize your workflow and architect a masterpiece. Build the most advanced WordPress forms and actually use the data you collect in meaningful ways.

Get the most advanced WordPress form plugin and the only form builder with integrated Views.

Get Formidable Forms Now

Resources

  • Community
  • Affiliates
  • Contact
  • Free Online Form Builder

Top Features

  • Application Builder
  • Calculator Forms
  • Surveys & Polls
  • Quiz Maker
  • Form Templates
  • Application Templates
  • Directories
  • Donation Plugin

Company

  • About Us
  • Giving Back
  • Careers
  • Newsletter
  • Blog

Copyright © 2022 Strategy11, LLC. Formidable Forms® is a registered trademark Strategy11, LLC.
Privacy Policy | Terms of Service | Sitemap

Join 300,000+ using Formidable Forms to create form-focused solutions fast. Get Started See User Reviews