How to create responsive tables in WordPress

How far back into the history of the Internet can you remember?

I remember ICQ, fan message boards (my first teen celebrity crush was Billy Zane!), and the heady early days of building websites on Geocities. Those rudimentary (by today’s standards) websites embraced wallpapers of repeated images, rainbow gradients, and questionable graphic design.

And they were all laid out using tables.

In HTML, tables are used to create nested rows, columns, and cells. Think of an Excel spreadsheet, but for web design. They were a way to bring order to the chaos, to lay out the information on your website and have visitors see it exactly as you intended.

But over the years, CSS started replacing tables as the preferred method of layout. This made websites much cleaner, faster, and less clunky-looking. And once mobile-responsive design picked up steam, using tables had become a total no-no.

However, what do you do if you really need to use a table? While these projects are few and far between, I have employed tables on websites that need things like price lists, opening hours, or timetables.

For uses like these, I like the TablePress plugin.

TablePress makes it relatively easy to create and embed many kinds of tables in your website:

1. 1. Install the plugin into your WordPress website (usually through Appearance>Themes).
   2. Go to “TablePress” in the left-hand sidebar of your WordPress admin.
   3. Create a new table by clicking the “Add New Table” link.
   4. Enter the name, description, and number of rows and columns (you can always change this later).
   5. Enter the table information, and review all of the settings to make sure it will display the way you want it to.
   6. Copy the table’s shortcode (in the upper right-hand corner of the edit screen).
   7. Save the table.
   8. Navigate to the page you want the table to appear in.
   9. Edit the page, and paste in the shortcode where you want it to appear. You can also use the “Insert a Table from TablePress” button in the toolbar.

Note: If you have many columns in your table, you might find that it’s illegible on mobile devices. In this case, you’ll need to purchase the premium extension to make it responsive.

How did you go? Do you have any questions about tables? Ask away in the comments section!

SaveSave

SaveSaveSaveSave