Looking for a way to transform any table in WordPress to a responsive and mobile-friendly data table? It can be done literally in seconds. Here you’ll find a quick tutorial how to create a mobile-friendly table in WordPress using Gutenberg editor.
How to create a table in WordPress
Creating a table in WordPress, especially with Gutenbeg editor, is a simple task. You just add a table using + in the top left side of editor, enter Table to seach box, and select a table element.
Table block will show up. Enter a number of columns and rows (don’t count the header row), and hit Create Table button.
If you want your table to be user friendly (aka. mobile friendly), don’t forget to add headings to it. Headings can be added to tables in WordPress by enabling Header section in the table block settings section (on the right).
Here’s how default table will look like in WordPress.
As you see, by default tables in WordPress are not responsive. They’re not bad, but you need to either scroll horizontally to view all the table content, or columns become extremely narrow depending how your WordPress theme styles table content. And both ways are not user-friendly. Now I’ll show you how to make any table in WordPress responsive.
How to make any table responsive in WordPress
If you want to create a responsive table in WordPress, or you want to convert any already existing table to responsive, you need install a Magic Liquidizer Responsive Table plugin. Go to Plugins >> Add New, and enter Magic Liquidizer into plugin search field. Once you find the plugin, hit Install Now. Plugin should be installed just in couple of seconds.
After installing and activating the plugin you can check it’s settings (Magic Liquidizer Lite in the admin menu).
By default this plugin transforms any existing table in your WordPress website to responsive (Table selector is set to table). But this plugin also lets you transform only specific tables to responsive. For example, if you enter .friendly to a Table Selector settings field, only the table with a class friendly will be automatically transformed to responsive.
Here’s how you add a custom class to a table block: select table block, click Advanced tab, and add class name (in this example – friendly) to Additional CSS classes field.
Once you save changes and refresh the page there the table is, you should see a perfectly responsive table that will look great on mobile devices.
How to make sure that any table in WordPress website is responsive
If you have issues turning the existing tables in WordPress to responsive using Magic Liquidizer plugin, make sure your tables have correct syntax. Every table should have header, headings and body tags. For example:
<table>
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Element 1-1</td>
<td>Element 1-2</td>
</tr>
</tbody>
</table>If tables in your WordPress website are defined like that, they should transform to responsive using Magic Liquidizer plugin automatically.
