Sometimes when you have a bit of data you want to be able to present it in a table to make sense of it. This was the case for one of my clients recently who wanted to be able to display the latest homeloan rates on one of his pages to share with his network of estate agents and other lead generators.

There are a couple of main ways to do this…

Creating Tables

1. Install the Ultimate TinyMCE plugin which allows you to create a table pretty easily straight from the edit post or page screen. This is a table created by this plug in. You can customise the borders, cells and use styles to make it look how you want. Not bad. You could of course create a table using HTML if you know how to do so.

Please note that you should install this plug in anyway to allow for loads of additional editing features not included in the standard WordPress install.

 
 This is a basic table  Cell 1  Cell 2  Cell 3 Cell 4
 You can style how you want!
 Quite easy really… Ha Ha

2. However, I prefer the TablePress plug-in by Tobias Bäthge for adding tables to a website.

First of all, you need to install the plugin and can be easily found by searching for the name. Once this is done, you are free to go ahead and create your first table. Here’s how…

Creating a Table with TablePress

Now you have installed and activated your TablePress plug-in, you will find it to the left in your dashboards main menu. (You can move it from here if you really want by going to the plug-ins options – personally doesn’t bother me).

Go ahead and click on Add New Table.

Add TablePress

 

You won’t find many options, it really is pretty simple. Choose a table title and description (if you want one – I find it easier to leave blank and add a title and description in the page or post directly), and choose the number of rows and columns that you will need. Don’t worry if you might need more as you can change these later.

Add a Table with TablePress

 

You now have your table editing screen and it really is quite self explanatory.

Editing a table in TablePress

 

To start editing the table cells, click directly into a cell and add your content by typing. You add a link or an image by clicking on the relevant buttons. You can also click the Advanced Editor button for some ability to apply limited styles or add an image or link again.

You can insert and delete rows just as you would do in a spreadsheet, and you can combine columns and rows for longer titles by using the rowspan or colspan buttons.

In the Table Options you can do the following:

  • Choose what rows you want to be a Header or Footer for a more appealing look.
  • Create alternate tow colours so that the cells are a little easier to read
  • Highlight a row when the user hovers over it – a cool look.
  • Whether you want the table title and description to appear above or below the table (see my previous note).

Advanced Features

For the purpose of this post we will also look at some of the advanced features that are displayed in the JavaScript library below the above and allow for more functionality.

  • Enable sorting of columns – this will allow your users to sort ascending or descending the data held in the column.
  • Enable search bar – if you have a large table with lots of data.
  • Show a pagination – if you have lots of columns but only want to display a certain amount on the page at any time. You can also allow the user to control this.
  • Showing info about the table contents like the number of rows.
  • Enable horizontal scrolling – again, for bigger tables.

With the table that I have created below, I haven’t used any of the advanced features as they weren’t really needed. It is a basic table but I think it looks good and serves its purpose well.

For even more advanced features of the table, head over to the documentation.

Latest Mortgage Rates Table

 

If you have any other experiences with tables that you have encountered then please share…