Tables present large amounts of data in an organized and elegant way. They help you understand the data and reach correct conclusions.
Charts and tables display well on traditional computer screens. However, using a mobile device with a smaller screen can present a problem.
Data tables need a determined amount of space to display their information in a usable and readable way. They cannot constantly adjust to the limited space offered by mobile devices.
What can you do? You can make tables responsive. Responsive tables will become smaller when possible. If not possible, they can read just their format so that mobile users can still read and use them.
Like other website elements, tables should be responsive. If they are responsive, they will look good on a mobile device and provide the viewer with a pleasant experience. They should also fit within the layouts of page-building themes and plugins.
This article will discuss what it means to have responsive tables. It will also outline two ways of how to make a responsive table in WordPress.
What are Responsive Tables?
The whole purpose of a table is to display a lot of information in an organized way that makes sense. But when people are often disappointed when they try to view tables and charts on mobile devices.
That is because the table rows and columns are wider than the screen’s display. Viewers may try to scroll through the table, but this often ends up in frustration and confusion.
Responsive tables adjust and reformat according to the size of the screen. They can do that because designers have set breakpoint rules for the table.
So if a viewer accesses the table on a screen smaller than the breakpoint, the table will reformat itself to fit the screen size. Sometimes, this means breaking a large table into two sections. Or it might mean making other adjustments so that the data fits on the screen.
Obviously, a responsive data table is the best way to go. Unfortunately, each WordPress theme handles tables differently. Knowing how to make a table responsive regardless of the theme will help you create a better mobile user experience.
How to Make a Table Responsive Manually
Manually creating a responsive table requires CSS and HTML coding knowledge. Working in a staging environment is best until the table works reliably instead ofworking in a live website.
To make responsive tables, you will need three things:
- A correctly formatted HTML table
- A simple CSS ruleset that will trigger when a screen display shrinks below a preset width
- This CSS code will hide the row of table headers, rearrange the table rows into columns, and add the content of the heading cells to each data cell.
- A short bit of JavaScript to associate the table headings with the data cells that appear in the same table column
Format your Table for Responsive CSS
var headertext = [];
var headers = document.querySelectorAll("thead");
var tablebody = document.querySelectorAll("tbody");
for (var i = 0; i < headers.length; i++) {
headertext[i]=[];
for (var j = 0, headrow; headrow = headers[i].rows[0].cells[j]; j++) {
var current = headrow;
headertext[i].push(current.textContent);
}
}
for (var h = 0, tbody; tbody = tablebody[h]; h++) {
for (var i = 0, row; row = tbody.rows[i]; i++) {
for (var j = 0, col; col = row.cells[j]; j++) {
col.setAttribute("data-th", headertext[h][j]);
}
}
}
Code Credits:
This bit of code: Exis | exisweb.net/responsive-tables-in-wordpress. Original idea: Dudley Storey | codepen.io/dudleystorey/pen/Geprd
Some people use horizontally scrolling tables for mobile devices. But grouping a table’s data and eliminating the need for scrolling creates a more readable table.
The above code tells the table to reformat at a breakpoint. It is written to look for heading cells in a thead element and assign them as HTML attributes to data cells in a tbody element.
This code snippet will not work if you do not have a table with thead and tbody elements.
The next step is to add a CSS tag. With that done, the CSS will understand what it should display as a table heading in each column andthe body content.
Add a Custom CSS Tag
@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;
}
}
Code Credits:
This bit of code: Exis | exisweb.net/responsive-tables-in-wordpress. Original idea: Dudley Storey | codepen.io/dudleystorey/pen/Geprd
All themes are different. So users need to understand the structure of the theme to implement a responsive table successfully. Some themes require an additional JS library.
This example shows how to add custom CSS code. First, navigate to Appearance, then Customize, then Additional CSS. Here you can add the above custom CSS tag.
The best way to use this code is to add it to the post or page where the table appears. Insert the CSS between style tags and the JS between script tags.
After pasting the code into the editor, press Publish, so the changes take effect. Use WordPress’s screen tester to see if the code works. This built-in test feature tests the content on three different-sized screens.
Or, at the bottom of the page where you added the CSS code, click on the tablet icon to test if the table is responsive and see how it looks on a mobile device.
For those comfortable with HTML and CSS, this is an excellent solution to make a table responsive. Unfortunately, this is a challenging solution for those who are unfamiliar with coding.
If any problems were to occur, it would be difficult to troubleshoot and fix the issues. There is a much faster and easier way to create responsive table elements: by using a plugin.
A Better Way to Create Responsive Tables
If you are only going to embed a chart or table on a website once, using the code snippets above will work. But, if you are going to embed tables regularly, it is better to embed the responsive code right into the theme.
wpDataTables is a highly recommended plugin that creates tables and charts easily in WordPress. You can create, manage, customize, and style tables without any coding. And the best part is the tables are responsive.
Tables created with wpDataTables are responsive by default, no matter the data source. The tables are usable and readable on any device.
You can choose which columns should be hidden and which ones should be visible on mobile devices. You can also choose to make the hidden data available through drop-down and expandable blocks.
Creating a responsive table with wpDataTables takes three simple steps:
- Step One: Install the plugin
- Step Two: Create a table
- Step Three: Insert the table into a webpage
Create the Data Table
After installing and activating the plugin, a wpDataTable menu item will appear on the WordPress dashboard. Click on it. Then click on the Add New button to start creating a table.
Choose what kind of table you want. There are several options, including the following:
- Link a table to an existing source
- Manually create a table
- Import data from another source
Upload your data source. After that, you can give the table a unique name. You can then edit the data attributes and customize the table elements.
Change the color and font styles by using the built-in editing settings. Or quickly add custom CSS into the plugin’s interface.
Click on the green button to finish and save the table. If you make any changes, make sure to hit the Save button before exiting the page.
Once you are done editing and customizing the table according to your needs, copy the shortcode. The table shortcode is found at the top of the screen.
Insert the Table into a Post or Page
Next, go to a post or page and paste the shortcode. Check out the live preview to see how the table appears on your webpage. Unless disabled, the table will be responsive and look great on any device.
You can add additional filtering options so viewers can find information quicker. wpDataTables can handle enormous tables with thousands of columns and rows. So it will undoubtedly fill your every table-making need.
Conclusion on how to make a table responsive
Whether an annual report or scientific study, tables play a vital role in data presentation and visualization. Unfortunately, most tables do not adjust to smaller screened devices.
But tables and charts do not need to look bad on a mobile device. Tables can be used on a WordPress site with a little effort and look attractive on all devices.
This guide taught two different ways to make a table responsive. The first way is by using HTML and CSS code. The second way is with the wpDataTables plugin.
wpDataTables is an advanced tool for dealing with large amounts of data. But both of these options will help you succeed in embedding a readable and usable table for a mobile device.
If you liked this article on how to make a table responsive, you should check out this article about the best fonts for tables.
There are also similar articles discussing WooCommerce product tables, heatmap tables, how to merge cells in HTML, and WordPress pricing table plugins.
And let’s not forget about articles on how to design a table, JavaScript data table, table UI design, and examples of data tables.
