As far as possible, I avoid tables in web pages. But sometimes information need to be presented in a tabular form. Depending on cases, some information presented in tabular form are much easier to read and comprehend. As publishers, we may need to present some information in tabular form on our websites. In this post we shall see how to create responsive tables in WordPress websites without plugins and with plugins.
Basically, in any webpage, tables are created by HTML and a basic HTML code for table looks like this:
<table border=”1″ width=”345″>
<tbody>
<tr>
<td width=”168″><strong>PRODUCT NAME</strong></td>
<td width=”72″><strong>PRODUCT S/N</strong></td>
</tr>
<tr>
<td width=”168″>LENOVO IDEAPAD</td>
<td width=”72″>123456</td>
</tr>
<tr>
<td width=”168″>LENOVO THINKPAD</td>
<td width=”72″>831748374</td>
</tr>
</tbody>
</table>
In the above example, there are only two columns and the table width is “345px”. So, there may not be any issues in viewing the table in mobile devices. But if there is a table with multiple columns, then some columns will not be visible in the screen space. In some cases, the table may extend way beyond the screen space on the right disturbing the page design.
Tables can be made responsive with HTML and CSS, if you are familiar with both HTML and CSS.
With the help of CSS media queries, we can define a media breakpoints to change the appearance of the table based on media screen size.
- Remove all static sizes from the above HTML code for table.
- Add a class to the table tag to call the class in CSS code later.
<table class=”responsive-table”>
<tbody>
<tr>
<td><strong>PRODUCT NAME</strong></td>
<td><strong>PRODUCT S/N</strong></td>
</tr>
<tr>
<td>LENOVO IDEAPAD</td>
<td>123456</td>
</tr>
<tr>
<td>LENOVO THINKPAD</td>
<td>831748374</td>
</tr>
</tbody>
</table>
We can add a CSS code like this one to change the appearance of the table. Let’s set the media break point at:
@media only screen and (max-width: 720px) {
table.responsive
{
margin-bottom: 0;
overflow: hidden;
overflow-x: scroll;
display: block;
white-space: nowrap;
}
}
We can add this CSS in styles.css of the theme or in Additional CSS in Theme Customizer.
But this process is not recommended since it will take a lot of time an effort to create the tables and also to troubleshoot if there are issues.
Create responsive tables with WordPress Table Plugins
Thanks to developers, there are plugins for almost everything. It’s just that we need to find a suitable one that fits our needs. Likewise, there are various plugins out there for creating responsive tables in WordPress – some are free, some are premium plugins. Instead of going through many of them, let’s discuss about one that I have been using for WordPress websites – TablePress WordPress Plugin.
TablePress easily creates and manage beautiful tables. We can embed the tables into posts, pages, or text widgets with a simple Shortcode. Table data can be edited in a spreadsheet-like interface, so need to code tables. An additional JavaScript library adds features like sorting, pagination, filtering, and more for site visitors. Tables can be imported and exported from/to Excel, CSV, HTML, and JSON files.
Creating tables with TablePress is easy!
After installing the WordPress TablePress plugin like any other plugin, we can use the “Add New” table menu to start creating tables right from the WordPress admin interface. Just name the table, provide description, define rows and columns and start.
- We can add additional columns and rows.
- We can also delete rows and columns if not required.
- We can set the first row of the table as the table header.
- We can also enable additional features for the table such as alternative background color for rows, pagination, sorting.
NOTE: If the table has multiple columns which may not be possible to display on the smaller screen size, make sure to enable the HORIZONTAL Scrolling in the table feature settings. This will allowing horizontal scrolling in the table itself without the need to horizontally scrollt he page. This is useful for viewing all the columns of the table on smaller screen.
Creating TablePress tables from Excel data:
If you have tables in excel or any other spreadsheet, you can easily create tables in TablesPress by exporting. Make sure that the table in the Excel is as simple as possible, that is, without merged cells, etc. Save such tables as CSV (Comma Separated Values).Then in TablePress, click on IMPORT and import the CSV file and upload.
Table will be created automatically from the CSV data.
Responsive Tables Extension for TablePres
If the horizontal scrolling feature of TablePress is not enough, there is an additional plugin for TablePress – Responsive Tables Extension which we can download and install just like any other plugin.
The Responsive Tables Extension for TablePress handles responsiveness of tables in three approaches or view modes:
- flip: In this mode, table is flipped – columns become rows and by making it horizontally scrollable. This mode is a good for plain data/text tables, but will usually not work nicely in tables with images.
- scroll: This mode will simply make a table that is too wide to be fully displayed horizontally scrollable. With that, the user can still reach all table data. This is usually a good approach for tables with images, if they don’t automatically resize.
- collapse: In this mode, data of columns that don’t fit in the screen are displayed in a hide/expand effect with a “+” and “-” button.
[Read more about the features here]
Using TablePress in Posts / Pages:
TablePress creates shortcodes for tables which we can insert in post and pages such as:
[table id=123 /].
The Responsive Tables Extension for TablePress allows addition of additional parameters in the shortcode to set the view mode like: [table id=123 responsive=mode /]
where mode is one of the three values flip, scroll, or collapse, depending on which mode you want for the table.
If using the flip mode, the shortcode can be further customized with breakpoint parameters:
[table id=123 responsive=flip responsive_breakpoint=device /]
where device can be phone, tablet, desktop, and all
phone: The flip mode is used only on phones (devices with a screen width smaller than 768 pixels)
tablet: The flip mode is used on phones and tablets (devices with a screen width smaller than 980 pixels)
desktop: The flip mode is used on phones, tablets, and medium-sized desktop monitors (devices with a screen width smaller than 1200 pixels)
all: The flip mode is used on all screens, regardless of their screen size
Other WordPress Table Plugins
If you are just learning WordPress, here are some books you can refer to assist with your WordPress learning journey:
