How to Design Complex Responsive Tables in WordPress?

It can be quite difficult to display complex charts and tables on a mobile device. In addition, these charts and tables are displayed along the whole width of a desktop or laptop screen. However, with this problem, some of you may be wondering whether it is necessary to include charts and tables for mobile devices.

But, in most of the cases, the charts and the tables are not just there for styling purposes. These are used sharing, organizing and gathering a huge amount of valuable and complex data. If you do not include these for your mobile websites, then it will decrease your user experience.

Procedures for Designing Responsive Tables in WordPress

The tables in WordPress are handled in various ways depending on the theme that is being used. But, the active theme renders the tables according to their CSS rules. Some of them have a good built-in support for creating good responsive tables. Given below is the HTML, which will create a table consisting of six rows and five columns.

<!– CMS usage data from w3techs.com / captured 7/6/16 –>

<table>

<caption>Popular Content Management Systems</caption>

<thead>

<tr>

<th>Usage</th>

<th>Change Since 6/1/16</th>

<th>Market Share</th>

<th>Change Since 6/1/16</th>

</tr>

</thead>

<tbody>

<tr>

<td>WordPress</td>

<td>No change</td>

</tr>

<tr>

<td>Joomla</td>

<td>No change</td>

</tr>

This table when incorporated with the child theme of TwentySixteen, creates an amazing view on a desktop or laptop display. But, this will not create a very good view on a smaller display.

How to Make this Table Responsive?

The first solution will be a manual fix. This method includes the using of JavaScript and CSS with the theme. However, to make this process successful, three things are needed.

An HTML table, which is properly formatted.
A small part of JavaScript, for relating the data cell and the heading cell in the same column of a table.
A ruleset of CSS, which will be alerted the moment the display shrinks below its set width.

For this process to work properly, the table have to be formatted properly. Additionally, the design of the table is set to search the “thead” element for the heading cells. Then it identifies them as HTML for the data cells of the “tbody”. If the table you have created does not include “tbody” and “thead”, then the code will not work.

The JavaScript to be used is:

/* Credits:

This bit of code: Exis | exisweb.net/responsive-tables-in-wordpress

Original idea: Dudley Storey | codepen.io/dudleystorey/pen/Geprd */

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]);

}

And the CSS to be used is:

/* Credits:

This bit of code: Exis | exisweb.net/responsive-tables-in-wordpress

Original idea: Dudley Storey | codepen.io/dudleystorey/pen/Geprd */

@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;

}

Adding this code directly to the page or the post containing the table is the easiest process of doing it. Additionally, the correct place of placing the JavaScript is between the “script” tags, and putting the CSS is between the “style” tags.

How to do it in a More Effective Way?

The previous method of creating a table by putting the JavaScript and CSS into the page was not the most appropriate method. However, this previous method is only good if you are going to use the code for this one time only. But, if you are planning to use it regularly, then the most appropriate way to do it is by embedding it into the files.

This method is not very hard. The steps are:

For this method, you have to use the child theme. This will prevent you from losing your work while updating your theme the next time.
Then you have to just copy the CSS and paste it within the “style.css” file of the theme.
After that, you have to separately save the JavaScript and then upload it to the theme directory.
Lastly, from the themes “functions.php” file, you have to use the “wp_enqueue_script” for adding the JavaScript with your theme. Also, you have to ensure that the setting of “in_footer” is set as true while doing the process.

Adding the script file with the “wp_enqueue_script” is the trickiest part. However, this step can be made a little easier with the adding of a code snippet. You have to add it to the “function.php”.

<?php

function responsive_tables_enqueue_script() {

wp_enqueue_script( ‘responsive-tables’, get_stylesheet_directory_uri() . ‘/responsive-tables.js’, $deps = array(), $ver = false, $in_footer = true );

}

add_action( ‘wp_enqueue_scripts’, ‘responsive_tables_enqueue_script’ );

The “function.php” of yours may look a bit different, but this will give you some idea.

After you have completed the process, you will find the JavaScript and the CSS on all the pages of your website. It will also make all the tables of your site responsive.

Conclusion

As the number of mobile users has increased, so has the need for optimizing the websites for mobile devices. The tables on a website offer many useful pieces of information to the users. Hence it is mandatory for a website owner to optimize their tables so that it can be viewed properly on mobile devices.

I hope that you have learned how you can create a responsive table on WordPress from this article. So, use them to share information with your users and also this will help your website to a great extent.

Francis L. Crosby