How To Add Table To WordPress Post

The other day I wanted to create a table to the wordpress blog post. In fact I had already created the table in excel -- which I prefer as a very fast way of creating tables and essentially wanted to just copy paste it in the wordpress post.  This is when I realized that using tables in wordpress was not all that simple. To insert a table in to wordpress either I had to use a plugin like WP-Table or write some html code to achieve the same.

However, after some experimentation, I could figure out an easy way to do so without the need for either a plugin or HTML. All you need to do is a small copy paste and a one line edit -- and your are done. Lets see how to do it ( Steps validated on WordPress 2.9 ).

Step 1 -- Create the table

As I mentioned above, I prefer to create my table in excel( you can also use word if you are comfortable with it ). I can quickly enter data in cells and change column widths to get the desired output. Refer the snapshot below to see the sample table created in excel.

Table in Excel

Step 2 -- Copy the Table

Just select this table and copy it using Ctrl-C or the Edit->Copy menu.

Copy From Excel

Step 3 -- Bring Table to WordPress Post

In the wordpress post editor, there is an option called <Paste From Word>. Select that option from the editor after choosing the place in the post content where  you need to insert a table in the post. Refer snapshot below ( notice the red circle )

Wordpress Paste From Word

Press <Ctrl-V> and paste the table that was just copied from excel in the pop-up window that appears. Click on <Insert> button on right bottom which should paste your table in the wordpress post.

Paste From Excel

Step 4 -- Format Your Table

Once you paste the table in the post as mentioned above, it would look like the snapshot below. Note that there is no border around the table.

Pasted Table

Now to get the border, all you need to do is a one character edit by switching to HTML view ( by clicking on HTML tab on top right of above snapshot ). Followng snapshot shows the corresponding HTML code generated for the table pasted above. In case you pasted the table eg in middle of the post content, to locate the code of your table -- you can look for the piece of text below which you inserted the table in the HTML view.

Table HTML

Now all you need to do is change <table border=”0” to <table border=”1” and your are done!! This tells the code to draw border around the cells of the table. The final snippet should look like the one below ( notice border=”0″ changed to border=”1″ )

Table HTML Border 1

Now your are all set, do a preview of the post and table would look like the following.

Wordpress Table

The interesting thing is that now you can tune your table by going back to the Visual view ( we went to HTML view to change table border ). You can click inside a cell and align the text within it to left or right using the post edit menu. You can also increase/decrease size of the table by pulling the pointer at the corners of the selected table. As an example, I made the first row headings in bold just by selecting the top row cells and clicking on <Bold> icon in the post edit menu and also increased the size of the table. The result is as given below which finally enables to conveniently add a table to wordpress post.

Final Table

So next time you need to create a table in wordpress post, do try the above method and let us know your feedback. If you liked this post and found it useful, do share it using the buttons available below this post. You can also submit to us any usefool tools/web services that help improve productivity.

If you know of any other better way to insert tables in wordpress post -- do share it with us in the comments section.





Inficone runs on the Genesis Framework

Genesis Framework
Genesis empowers you to quickly and easily build incredible websites with WordPress. Whether you're a novice or advanced developer, Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go. It's that simple - start using Genesis now!
Follow On Twitter
Follow On Facebook
Follow Using RSS
Follow Using Email
Tweet This Post
Share Post On Facebook
Digg This Post
Stumble Upon

Comments

  1. Thank you very much.
    I also had to change following to “1” and it worked <table border="1" frame="1" rules="1"

  2. This is good…but is there any plugins for it?

  3. Your tutorial help me a lot…Thanks.

  4. is there a way to add custom sort to tables in WordPress..?

Speak Your Mind

*

This blog is kept spam free by WP-SpamFree.