Guide to insert table into WordPress post – Tablepress

 

I have written more than 50 articles and for some of the articles I needed a table to put in my contents of comparison. For a long time I didn’t know how to create a table for my WP blog. I used to create a table in Excel, make it attractive with putting colors and shades, take a screen print of it, crop it as I need and attach it as an image file on to the blog. For example, check out the article Expand Storage Capacity of your wireless device. In this article I have used an image of the excel table to compare the specification comparison of the storage devices. It is not that I didn’t have a proper plugin to insert table, I did had plugins but they were not good and few of them require a bit of coding too.

I am sure some of you might have gone through the same situation, probably in your early days as a blogger and used excel image for the table (I have seen excel images used on other blogs). Believe me using excel images on your blog, that’s not how a compare table should be created. Because there are drawbacks in it, like you cannot add link in any of the cells of the table, auto sort a table as per the content or as per the viewer’s need, dynamic update of the table – adding a row or column, etc.

Recently I have been working on a niche site and had a need of a good plugin to create a table dynamic enough. I certainly cannot use excel for this I had to have links in the table’s cells. After doing a good amount research and going through other’s niche site projects like the one from NichePursuits.com and SmartPassiveIncome.com, I came to know that inserting, updating and maintaining tables in a WP article is very simple using a free plugin called TablePress. Let us see how to add a table, maintain it and go thru some of the key features of TablePress.

Once you install the plugin, Tablepress will appear on the left main menu of you WordPress admin. Click on it and you will see the below window. The good thing about the tables made with Tablepress is that the tables are maintained separately from the article in with it is used.

 Art49_1

Adding a Table

Click on the Add New tab to add a new table. Type in the name for the Table, a bit description of the table and how many rows and column you will need initially (dont worry, you can still add or delete rows and columns after this stage).

 Art49_3

Manipulating Table

Click on Add Table button and start editing the table, put in the contents for each of the cell. To add one or many row select the check box of the row below which you want to add another row/s and click Add button next to the row(s), under the Table Manipulation section.

 Art49_4

Similarly to delete rows or columns select the row and column and click the Delete button which is last in line under Selected Columns: section. If you have a huge table and the contents cannot be seen in a single window then select the Hide option to temporarily hide few of the rows which you dont want to edit for now. To combine cells of a row or column then use the Combine Cells option. It works in the same way like Cell Merge feature of Excel.

Inserting a image and a link to a cell is also easy using the Insert Link and Insert Image options. To insert link first click the Insert Link button and then click on the cell where you want to add the link. To insert image click the Insert Image button and then click on the cell where you want to add the image. Once done the images from your library will be displayed. You can either choose these images or add it through an URL or even upload a new image from your computer. Click the Show option and the below window will be displayed. After selecting the various options click Insert into Post.

 Art49_7

You can also define if the first row of the table is a header or the last row is a footer. This can be done by selecting the check boxes under the Table Options section. The options here are very self explanatory.

Art49_9

You can even select the features of the DataTables JS library using the below options. Generally I keep the standard options only and avoid any manipulation to the JS library. One of the good feature of TablePress is the Sorting feature. Any viewer who is viewing the table in the posted article can sort the table column wise. To activate this option of self sorting select the box next to Enable Sorting for the table by the visitor. Similarly, searching and filtering by the viewer is also possible. The Pagination option will allow the table to be displayed page wise, that is you can choose to display only 5 rows per page. This is very helpful if the table spans to more than 10 rows and is not able to fit in a single page view.

Art49_10

Add the table to Article

After you are done with the table editing scroll to the bottom and Save the changes. To add the table to an article go the article and edit it. Position the cursor where you want the table to be displayed. Go to the edit option of the article. There will be a TablePress icon at the last on the first edit rows. Click button and you will be shown another window to select the table. There click on the Insert Sort Code.

Art49_11

Art49_12

Hence you have successfully created a table and inserted it to the article. Now if in future you want to edit the or update the tableès contents then just edit only the table, no need to edit the article. Thatès the beauty and flexibility of it.

Art49_13

 

Speak Your Mind

*