How to Create Tables Easily for Your Wordpress Blog?

If you are trying to create a table for your wordpress page, it could be really tedious and painful. Generally, people including myself will use a html editor to code the table separately before copying the code into the wordpress page then use a CSS stylesheet to control its look.


Fortunately, I learnt about a wordpress plugin - WP-Table-Reloaded from a member in Headway Forum. It is an excellent and time-saving plugin to create complicated tables in wordpress. It has several features that can make your life a lot of easier if you need to create many tables in your blog.

Features of WP-Table Reloaded

• You can manipulate the table easily with hide, sort, add and move functions.
• Single click of button can place alternate background colors to the table rows.
• It allows you to add pagination to your tables.
• TableTools function is built in which allow readers to copy and paste the table data to other places easily.
• When mouseover rows, it shows color highlight across the row which help readers to see long table easily.
• Readers to your blog can sort your data in individual columns in either ascending or descending order.
• Readers can filter or search your table.

With all the advantages given above, it is worth to try out the plugin for your blog.

WP-Table-Reloaded Plugin
You can download the plugin from here and install it like normal wordpress plugins and then activate to use. Once activated, at the wordpress admin panel under the “Tools” option, you will see a “WP-Table Reloaded” added to the last row.  To start creating table for your blog, follow the below steps to start.

1. Click on “WP-Table Reloaded” to start.

2. This plugin offers two main ways of creating a table. You can either create it from scratch or importing the table from somewhere. The importing option allows you to import from various formats such as csv, html and xml. You can import source from your hard disk, a URL, server or manual input.

3. Since I’ve tables already created in my old websites, I decided to import them in as html. (Note: The html code used must be in lower case. Somehow, the old html editor that I used displayed all html code in uppercase. This created problem when I tried to import them inside WP-Table Reloaded so if you encounter problem while importing, do double check your html code.)

4. Click on “Import a Table”, select “html” at “Select Import Format”.

5. Leave “Add as new Table” as default and click on “File Upload” if you want to upload from your hard disk.

6. Select the html file and click on “import” to complete.

7. Once successfully imported, go to the top and click on “List Table” and then hover over the table filename and click “Preview” to preview.

8. If you need editing, hover over the table filename and click “Edit” to edit.

Add Table to Blog Page/Post

1. To add the newly created table to your blog page or post, hover over the filename and click on “Shortcode”.
2. A popup will appear to show you the table ID, for example “[table id=18 /]”.
3. Copy the code and go to the blog page or post.
4. Click on the “html” tab and paste in the code.
5. Save by clicking the “Update” button and the table can be now displayed at your blog.

Customized the look of the Table

1. If you wish to customize the look of the table, you can do it in the WP-Table Reloader custom CSS.
2. At the top right hand corner of WP-Table Reloader screen, you can click on “Plugin Options” to edit the custom CSS.
3. If for example, you wish to change the background color of table header (th) to a different color and the text to white, use the following code:

.wp-table-reloaded th {

  color: #ffffff!important;

  text-align:center;

  border-width:0px;

  background-color:#8c044a;

}

4. Remember to insert “!important” behind the color code to override the default setting.

Customized the look of a particular Table

1. If you have a lot of tables in blog, the above code can be used to apply globally using selector “wp-table-reloaded” and its properties.
2. However, if you want to customize only one particular table, you can add in an ID (the table ID can be found in the Shortcode or Table information in WP-Table reloaded screen).
3. If you, for example, want to align the text in first column to left while having the rest of data align center, you can use the following code:

.wp-table-reloaded-id-18 .column-1 {

  text-align:left;

  padding-left:8px;

}

For more information on “WP-Table Reloaded”, visit the plugin’s website at  http://tobias.baethge.com/. More styling examples of the table is available by clicking here.