Another Way to add HTML Table Easily to Your Wordpress Post

Those of you who are used to coding HTML table in html editors might find it is such a pain to do it in Wordpress. Although there are plugins, for example the WP-Table-Reloaded available for creating table in Wordpress but it is not as friendly as it should be. In my previous post, “How to Create Tables Easily for Your Wordpress Blog?”, I mentioned that the WP-Table-Reloaded plugin offers a lot of table functionality that a normal HTML table including hover effect, alternate row color and manipulating the table with sort, hide, add and move functions. Nevertheless, when comes to building a table from scratch, it is still not the best option due to awkward cells in the table.

TinyMCE Advanced

Eventually, I found another plugin which behave exactly like a normal html table editor, it is a plugin called “TinyMCE Advanced”.  This little plugin is a great time-saver and help me to re-discover the joy and efficiency of formatting a table even in not-so-format-friendly Wordpress environment. If you are interested, download a copy from wordpress.org and follow the below steps to try out yourself.

1. Download and activate the “TinyMCE Advanced” plugin in your wordpress dashboard.
2. Once activated, the “TinyMCE Advanced” will appear under the “Settings” at the left hand panel.
3. Click on “TinyMCE Advanced” and you will see the screen as below.
   

4. You will realize that “TinyMCE Advanced” offer more functions than just creating a table but at the moment, we are only interested with the table tool so simply drag the table tool from below bar to the top empty row or toolbar, see picture below.

5. Then click on the green button “Save Changes” to save the setting.
6. You can now go to the page or post you want to add table and you should see a new table tool is added to your toolbar.
   (Note: It is only viewable in the visual mode so make sure you are in the “Visual” tab to use the tool.)
7. To create a table, just click on the “Inserts a Table” button to start.
   
   
   
   

8. A “Insert/Modify Table” will popup to prompt you to enter the number of rows and columns that you want for your table.
9. It also allow you to edit other table properties like cell padding, cell spacing, border, alignment, width and height of the table.
10. If you want to set the border or background color, click on the “Advanced” tab in the popup box to do it.
11. Once the table has been inserted, you will see other functions in the table toolbar are now available for use. For example, the table row properties, table cell properties, insert row before, insert row after, delete row, insert column before, insert column after, remove column, split merged table cells, merged table cells and delete table functions.
12. You can now start editing the table with ease with these functions.

Table Columns Not Visible

Unfortunately, there seem to have a problem with this plugin. The column might not visible in the Wordpress editor; all you see could be just one straight row across instead of many columns as shown in below screen.

By right, you should be seeing a table with grid such as the following screen.

If you are unable to see the grids or columns, you will it is hard to enter text or data. However, there are still ways around it, you can either enter the data by using the “forward -> arrow” to tab to next column or switching to html mode if you are familiar with coding in html.

Despite its shortcoming, it is still a useful tool, if you need more details, you can check out at the plugin website but the author does not seem to response to questions now.

If you have ways to solve the above problem, please share it in the comment below.