TablePress screenshot

WordPress Plugins: Using TablePress

As every web developer knows, tables in the world of coding are a terrible, terrible thing that should never be forced upon anyone. Ever.

And while tables are great at displaying information, their use as a layout tool in the past has left a terrible taste in the mouths of more than one developer. That being said, tables still have their use and every once in awhile we have to dust one off to use in one of our development projects.

A plugin to the rescue

We wrote last week on how WordPress plugins can be very hit and miss, but TablePress is definitely a hit. Anything that gets us away from manually coding a table and gives our client an easy-to-use interface for updating existing tables or creating their own is awesome in our book. Developed by Tobias Bäthge, this plugin has actually been around for a while but was previously called WP-Table Reloaded.

Adding a new table

Once you’ve installed TablePress, you will get a new TablePress navigation option in the left sidebar of the WordPress dashboard. If you hover or click, you will see a menu item of “Add New Table.” Once there, you’ll see the following screen:

Add new table

Once the table has been named and given a brief description, select how many rows and columns needed. Before you panic and yell “I’m just not sure” at your monitor, there are plenty of options to add, delete and move around your columns or rows even after you’ve started.

Click “Add Table” to be taken to a screen that looks like it has way too many options on it. We’ll break down the screen by it’s sections.

Table Information

We’re barely going to touch on this section. It’s literally the same exact options as the “Add New Table” screen, only this is where you can update the table title and description if needed. Here you may want to change the Table ID, but in most cases this won’t be needed.

Table Content

This is the meat and potatoes of TablePress. Again, simple as possible.

The table looks like, well, a table:

Add table content

This is where to populate all the data in your table. You might notice that the first row of the table is highlighted blue. TablePress is such a clever little tool that it assumes the first row of your table is the table header by default, so you can go ahead and populate your field titles (name, address, phone, etc.)  and they’ll be differentiated in the table content field, as well as when you actually display your table on a WordPress page or post.

Table Manipulation

Modify TablePress
This is one section that looks a little tricky, but if you take your time to absorb the information, it’s actually fairly straightforward. The first row on the left (Insert Link, Insert Image, Advanced Editor) is displaying options to populate the fields with more than text. Let’s say you have a headshot field in an employees table, just click Insert Image and then click the cell you want to populate and it will bring up an Insert Image window. Brilliant!

Below that are options for adding/deleting rows and columns. To the left of rows and below the columns are check boxes. Select one of these and click “Delete (Row/Column)” and you’ll get just that. Or, you can add rows or columns there, as well.

Table Options

Table options

The Table Options section is about as simple as it gets. You can select whether or not there is a table header or footer, if you want the table rows to alternate colors, and if the form title should appear above or below the form. If you’re a developer or just a WordPress aficionado, there’s also a field here to add extra CSS classes in case you need to style tables differently.

Features of DataTables JavaScript Library

DataTables Features

While the title of this section is somewhat daunting for the average user, it really just breaks down what advanced features are available like sorting of the table, searching the table, paginating the table, etc. The best way to see exactly how these features work is to make a table, place it on a page (which we’ll cover shortly) and mess around with settings to see what works.

Inserting your table into a post or page

Add table to post

Keeping in line with the rest of the plugin, adding a table to a post is about as simple as it gets. If you click the new Add Table icon in the WYSIWYG editor, a popup window will be available – you simply click “Insert Shortcode” next to the table that you want to insert and voila, a great looking, functional table on your page.

In summary…

TablePress is great. It takes something that nobody – developer or not – ever wants to do and turns it into a painless process. With the added functionality that it gives to the resulting table, it’s really a fantastic plugin to work with and it’s so user-friendly that user and clients will have just as easy of a time getting it to work as needed.

December 12, 2013

About Drew Barton

Drew Barton is president and founder of Southern Web Group, LLC. Southern Web Group has grown into one of Atlanta's fastest growing web design firms with clients throughout the country. While often associated with work for real estate companies, the firm boasts clients in nearly all industries. Much of Southern Web Group's recent work has been in the law, healthcare and manufacturing markets. As part of Southern Web Group's offerings, Drew frequently conducts customized seminars on website marketing, including email newsletters and search engine optimization. He has served on Keller Williams' Internet Mastermind group and has been quoted at the brokerage's Technology Mega camps. Drew also has been quoted as a web expert in articles in SmartBiz Magazine and on Microsoft's Live.com. In 2004, the Atlanta Business Chronicle named Drew one of the top 40 rising stars under 40 years old. In 2007, the International Association of Business Communicators presented Drew with its Silver Flame Award for an article he wrote about boosting Web site traffic. Drew, whose experience includes stints at Web.com and CNN.com, graduated from Emory University and resides in Atlanta.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>