Learn how to add Responsive Tables to your Divi Theme website

Do you have a need to present some contents in nicely organized Table format?
If yes then, Do you know that the table you are going to code with simple HTML will look horrendous on mobile screens?

People who who have used tables, they are well aware of its benefits and cons. But, what about others, who are new to this term?

Well, in simple words, Tables are set of facts and information organized systematically in a grid-like structure, i.e., in the form of rows and columns.

Tables are very beneficial to segment largest set of data into small pieces. Also, they make the data easy to understand and interpret. Tables are very organized, sorted, occupy less space, and have many other pros.

Creating device-friendly (Responsive) tables for different screen sizes, using HTML & CSS is a very tedious task. But, don’t be worried, as we have a solution to help you achieve this easily. We’ll discuss it later in this post.

The Problem: Designing Responsive Tables

All modern sites are developed to work on different screen sizes. In earlier days, plain HTML were used to create tables. As the responsive web design became the new norm plain HTML tables doesn’t adopt well to modern web sites. The plain HTML tables are not responsive so the contents inside them is very difficult to read on mobile screen sizes. In order to create responsive Tables that adopt the layout base on screen size its viewed on now have to combine HTML with CSS media queries.

For a single set of information that is not too vast or diverse, tables can be designed with a layout that is readable on all screen sizes with basic HTML and CSS techniques. If the table is designed to contain large set of data then its very difficult to setup the layout that is readable on mobile screens or screen size that are narrower than 786px.

If the web designer working with HTML and CSS to make table responsive on all screen sizes does not consider the data quantity, they’re bound to face issues that hugely affect the site’s content readability. Here are some of the tips you as a Divi website designer can implement when trying to build responsive tables manually,

  • While reducing size of the table for smaller screen, you’ll need to create multiple CSS classes, for each class targeting different screen sizes.
  • Hide certain columns from the table when the screen size is narrower may be another approach that you can implement.
  • Add horizontal or vertical scrolls on the table when its viewed on smaller screens.
  • Adjust the same table for all screen sizes, and zoom the table to make the content readable.

These solutions take lot of effort and requirements can vary on the basis of content and screen size. So, a new solution is needed to easily create responsive tables!

Meet ‘JTRT Responsive Tables’

JTRT Responsive Tables is a plugin for WordPress. It is one of the best FREE table plugins out there. In other plugin solutions like ‘TablePress’ responsive table feature is a paid addon. with JTRT you can create responsive tables and do whole lot more with the free version.

With this plugin you can create tables the way you want with just a few clicks and don’t need any HTML/CSS skills. Also, the plugin offers options like the ability to change the font-family, font-size, font-color, and even an image uploader. Just add an table and customize it as per your needs. The plugin suitable to create very complex table structures too. The interface is a bit like what to you see in MS Office Excel package. Here are some of the features,

  • Simple back end table editor – WYSIWYG
  • Convert CSV files to responsive HTML Table data
  • Includes custom responsive breakpoints sizes – XS, SM, MD, LG, XL
  • Easily edit table at the back end and add links/images to the table
  • Supports multiple tables on single page view
  • Easy to use shortcode to show the table on a page you want
  • Table formatting can be changed or modified easily
  • Customize borders, alignments, headers, footers
  • Ability to Sort data
  • Table Pagination
  • Custom hover highlight on multi-cell select

So, How to use this plugin with Divi?

Here are steps you should follow,

Step 1. Install and activate the plugin

Step 2. Go to plugin menu item and Add New table

Step 3. Give a title and start adding your contents to the table

Step 4. Once you are done adding and editing the table the way you want Publish it. Then copy the generated Shortcode.

Step 5. Go the Page you want to add this table and enable Divi builder

Step 6. Add Code module to the page (You can also use normal text module). There paste the shortcode. You will see the table rendered in the page. You can check table responsiveness by clicking on Divi mobile, tablet icons.

step 7. Go back to the table and make necessary design and layout adjustments to better accommodate it in the page.

Conclusion

Tables are one of the most effective ways to showcase set of information. For a less technical person creating tables in a web page is a challenge. Using JTRT, you can easily make tables that are readable on any device in just a few simple steps. Responsive tables are sure to give positive overall experiences for your site visitors. So, give this a try and let us know your experience in the comment section below.