We usually benefit from the tables on our websites when we need to offer too much data to our visitors. They are the best elements that allow us to share the data in an organized manner. While they work on computers flawlessly, they may function poorly in mobile platforms.
However, there is nothing to worry about since there are plenty of solutions that can help you to create responsive tables in WordPress. As you know, responsive design is one of the most important elements in website design and it allows your visitors to display the tables without any problems in their mobile devices.
Below, you are going to learn all the details, including how to create responsive tables in WordPress. So, let’s start!
Table of Contents
As you can create a new table, you can also use the “Import Table” feature to import any existing tables. In this section, we will create a new table from scratch by clicking on “Add Table”. When you click this option, the following screen will be displayed where you can type table title and description.
If you are using WooCommerce on your website, you can also create a responsive WooCommerce table on this page. Once you are done, you can click the “Add” option to create your first table. In the new page, you will find the option “Add Column” to start formatting your table.
In the new page, you can type the header name for your column and the data it will include. It is also possible for you to set “Responsive Breakpoint” on this page.
This option will allow you to determine the responsiveness of your table in different mobile devices. You can choose different options on the drop-down menu.
After you format all your columns, now you can click on the “Add Data” option. The best part of NinjaTables is it allows users to add multiple entries easily:
If you check the “Continue Adding” option, you can enter data one by another to enter all the data quickly. Once you are done, you can close the window by clicking the cross on the top right section and return to the editing page.
2.3. Formatting Your Tables
Once you are done with the data entry, it is time to set and adjust style options. You can access to many settings regarding your table from the “Table Design” and “Style” options.
Here you can change the settings of many elements such as the style, row colors, hiding data, centering text and much more.
2.4. Testing the Tables
One of the best parts of NinjaTable is it allows you to test your tables while you are editing them. You can test your tables in desktop, tablet, and mobile from the “Table Design” option.
Plugin users can test and view their tables in all of these three platforms from this screen.
In addition to these, you can visit the Block Editor menu and then click on the “Formatting” option to add your tables manually with their shortcode in your contents or pages.
First thing first, you need to make sure that you have a properly formatted table to work on. It is quite easy to achieve this when using Block Editor. All you need to do is add <thead> and <tbody> to ensure that the CSS will work without any problems:
After you created your table, you can adjust the format by using the HTML editor. Make sure that <thead> and </thead> will cover all column headers. In the same way, <tbody> and </tbody> should cover the data in the table.
By doing so, your style sheets will know which data is the headers for your columns and which data is the body of your table.
3.2. Adding a Custom Tag
We would like to note that each theme’s structure is different and may require applications in different parts. However, to put it simply, we will use the WordPress Twenty Nineteen theme in this section to implement our custom CSS code. The theme is already a responsive theme that is offered by default to every WordPress user.
This theme does not require any JavaScript library to implement CSS code however, some themes may require.
We can add our custom CSS code by navigating Appearance > Customize > Additional CSS. Our custom CSS code is:
All you will need to do is click on the “Publish” when you paste your code in the editor.
3.3. Testing the Responsiveness
You can easily test your new code through the built-in screen test feature of WordPress for three different platforms. You can click on the small icons located at the bottom of your screen to adjust your current screen according to different sizes.
In this code, we used the breakpoint of 600px for our CSS. However, you can adjust the value according to your purposes and needs. Your table includes all the required HTML attributes and compatible with CSS.
This method allows you to adjust the table and makes it responsive by reorganizing the data for mobile users. It does not include a scroll bar. In this way, mobile device users can scroll the table vertically and check the data of each individual cell easily.
- A Brief Summary of Responsive Tables
- How to Create Responsive Tables in WordPress (With Plugins)
- How to Create Responsive Tables in WordPress (Without Plugins)
- A Brief Summary of Responsive Tables
- How to Create Responsive Tables in WordPress? (With Plugins)
- WP Responsive Table: This is a free and easy-to-use plugin that allows you to create responsive tables. The plugin creates tables that can be scrolled horizontally in mobile devices.
- wpDataTables: Another free plugin which also offers a paid version. However, there are plenty of features offered to create tables and charts in the free version.
- Ninja Tables: It is regarded as the best plugin for creating responsive tables. It offers hundreds of responsive tables to users.
As you can create a new table, you can also use the “Import Table” feature to import any existing tables. In this section, we will create a new table from scratch by clicking on “Add Table”. When you click this option, the following screen will be displayed where you can type table title and description.
If you are using WooCommerce on your website, you can also create a responsive WooCommerce table on this page. Once you are done, you can click the “Add” option to create your first table. In the new page, you will find the option “Add Column” to start formatting your table.
In the new page, you can type the header name for your column and the data it will include. It is also possible for you to set “Responsive Breakpoint” on this page.
This option will allow you to determine the responsiveness of your table in different mobile devices. You can choose different options on the drop-down menu.
After you format all your columns, now you can click on the “Add Data” option. The best part of NinjaTables is it allows users to add multiple entries easily:
If you check the “Continue Adding” option, you can enter data one by another to enter all the data quickly. Once you are done, you can close the window by clicking the cross on the top right section and return to the editing page.
2.3. Formatting Your Tables
Once you are done with the data entry, it is time to set and adjust style options. You can access to many settings regarding your table from the “Table Design” and “Style” options.
Here you can change the settings of many elements such as the style, row colors, hiding data, centering text and much more.
2.4. Testing the Tables
One of the best parts of NinjaTable is it allows you to test your tables while you are editing them. You can test your tables in desktop, tablet, and mobile from the “Table Design” option.
Plugin users can test and view their tables in all of these three platforms from this screen.
In addition to these, you can visit the Block Editor menu and then click on the “Formatting” option to add your tables manually with their shortcode in your contents or pages.
- How to Create Responsive Tables in WordPress (Without Plugins)
First thing first, you need to make sure that you have a properly formatted table to work on. It is quite easy to achieve this when using Block Editor. All you need to do is add <thead> and <tbody> to ensure that the CSS will work without any problems:
After you created your table, you can adjust the format by using the HTML editor. Make sure that <thead> and </thead> will cover all column headers. In the same way, <tbody> and </tbody> should cover the data in the table.
By doing so, your style sheets will know which data is the headers for your columns and which data is the body of your table.
3.2. Adding a Custom Tag
We would like to note that each theme’s structure is different and may require applications in different parts. However, to put it simply, we will use the WordPress Twenty Nineteen theme in this section to implement our custom CSS code. The theme is already a responsive theme that is offered by default to every WordPress user.
This theme does not require any JavaScript library to implement CSS code however, some themes may require.
We can add our custom CSS code by navigating Appearance > Customize > Additional CSS. Our custom CSS code is:
| @media screen and (max-width: 600px) { | |
| table {width:100%;} | |
| thead {display: none;} | |
| tr:nth-of-type(2n) {background-color: inherit;} | |
| tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em;} | |
| tbody td {display: block; text-align:center;} | |
| tbody td:before { | |
| content: attr(data-th); | |
| display: block; | |
| text-align:center; | |
| } | |
| } |
In this code, we used the breakpoint of 600px for our CSS. However, you can adjust the value according to your purposes and needs. Your table includes all the required HTML attributes and compatible with CSS.
This method allows you to adjust the table and makes it responsive by reorganizing the data for mobile users. It does not include a scroll bar. In this way, mobile device users can scroll the table vertically and check the data of each individual cell easily. 
If you have any questions about this article or other topics, please click the button below. Your questions will be answered soon.
To see all our themes and experiences, you can go to our themeforest profile by clicking the button below. Click and see now.
