How To Add And Manage Tables In WordPress Posts

by Mr. I · 24 comments

in Content, Resources

editing an XML file in a WYSIWYG editor
Image via Wikipedia

The TinyMCE editor of WordPress is feature rich and easy to use. But by default, it does not have any options to add and edit tables, a headache for beginners who do not know much HTML.

If you always wanted to add nice tables in your blog posts, then one of the following plugins can make the job easy for you.

First one is TinyMCE Advanced which  extends the functionality of the default WYSIWYG editor.  The plugin not only lets you easily add tables, but comes with many other formatting options.

Using TinyMCE Advanced

First, install the TinyMCE Advanced plugin from WordPress Plugin Directory. Activate it and go to Settings -> TinyMCE Advanced.

You will see a Drag and Drop interface similar to the WordPress editor. You can drag and drop the icons to arrange/delete buttons. The table menu item is a group of 11 buttons:

TinyMCE Advanced Tables

TinyMCE Advanced Table Options

Drag it to the toolbar and it will appear in the editor. Just click Insert table button(first one) and you will be able to add table and define advanced properties easily without messing with code.

Second Option is to use the WP-Table Reloaded plugin.

Using WP-Table Reloaded

WP-Table Reloaded is suited for bloggers who have to use same tables again in posts. This plugin lets you create a table through an easy interface and then you can embed it in posts.

After installing WP-Table Reloaded,  go to Tools -> WP-Table reloaded. Click Add new table in top menu and enter table name, description and number of rows and columns. Click Add Table button and then go to Edit table. Click the table you just created. You will be presented with an easy interface where you can add values.

After adding values, save the table. You can insert table in any post/page by adding shortcode [table id=-your-table's-id- /].

One notable feature of this plugin is that it lets you export and import tables from CSV, XML and HTML formats.

Which One Will Be Better For You?

If you do not use a lot of tables in your posts, thenTinyMCE Advanced is the better option. Apart from tables, it also adds a lot of extra features to WordPress editor which are very useful.

If you use Tables in every second post and need to repeat/export/import them regularly, WP-Table Reloaded will suit you better.

Do you know of any other plugin that can do a good job with tables? Let us know through comments.

Mr. I
Hi, I am a 17 year old Blogger from India. I am very passionate about blogging and also co-founder of Blogging With Success. Read my other posts. I manage Twitter account of Blogging With Success. You can see I love guest posting!

{ 24 comments… read them below or add one }

Creative Junkie June 12, 2009 at 6:10 PM

You know, I have never inserted a table into a blog post – I didn’t even know you could do that!

Reply

George Serradinho June 13, 2009 at 12:03 AM

I have used TinyMCE Advanced but learned html so I just code it. It’s quicker for and I’m also trying to keep the total amount of plugins lower.

Reply

timethief June 14, 2009 at 5:57 AM

Tables can be very useful on web pages and from time to time I create them and use them. Like George I code them myself and also like him I’m a minimalist when it comes to plugins. For beginners who want to try their hand at coding I recommend HTML Table Basics as it’s easy to understand and accomplish creating a table in moments http://www.pageresource.com/html/table1.htm

Reply

SBA June 15, 2009 at 8:41 PM

We’ll add that to our CSS styling resource list. Thanks! I think more bloggers can make use of tables for displaying images (like an album). On row or column could hold text. Also images could be thumbnails, click and get larger link to decrease page loading.

Reply

Devi Mahapatra June 14, 2009 at 4:33 PM

Is bidvertizer paying?
is it not a fake service??

Reply

SBA June 15, 2009 at 8:47 PM

Well, do you know something we don’t ? — please share. Based our our reviews and actual use, we don’t think it is a “fake.” Read the review http://bloggingwithsuccess.net.....devertiser

Reply

SBA June 15, 2009 at 8:32 PM

@Creative Junkie – now you know, so give it a whirl. Let us know if you run into any problems.

@George Serradinho – I also use html and have coded tables within tables for complex ‘data.’ Still the point and click icons make it easier/faster with fewer mis-typings. Anyone creating tables with the plugin can better understand the html if they want to go behind the scenes…

Reply

Ruchi June 17, 2009 at 4:17 PM

I was not aware that it can be done so easily with Tiny MCE Editor, i tried manually but was never successful , thanks for the information provided.

Reply

Mr. I June 18, 2009 at 1:56 PM

Thanks for Compliment.
Creating tables with TinyMCE is a breeze and there are many advanced functions available! Have fun with it!

Reply

Matt Baehr June 29, 2009 at 8:05 PM

I am using TinyMCE advanced, but it seems that not everything works right with my formatting. I have put in width and border=0, but it keeps showing a border and not the right width.

Any help?

Reply

SBA June 29, 2009 at 8:34 PM

Matt, we’d love to help — Can you give me the post with the bad table, or send the html code in our contact form.

Reply

Matt Baehr June 29, 2009 at 11:42 PM

Thanks. Here is the code that is created. I have only entered data in one cell so far.

Healthcare

Here is what is looks like live though – http://trailblazerresearch.com/

Not right at all. Do I have to change something in my style sheet?

Reply

SBA June 30, 2009 at 4:07 AM

I see the table source code (view page source) and will send a response to your email. I noticed you have unordered list within the first cell — I’ve experienced lots of edit problems with list inside of other things like tables and even block quotes…. but let me look more closely.

Reply

Matt Baehr June 29, 2009 at 11:43 PM

Oops, looks like I can’t post the code like that here. Maybe this works.

Healthcare

Reply

SBA June 30, 2009 at 6:31 AM

I think the table styles are set within your template for articles/posts:

*** this is just part of the styling but it is what sets the ‘border’ on the first or header columns. the color is #819292 as specified below.

.article th, .article td
{
padding: 2px;
border: solid 1px #819292;
vertical-align: top;
text-align:left;
}

So if this table is different then you need to give it a new class. I notice if you remove class=”aligncenter” then the width you want takes effect.. Hope this helps.

Reply

Matt Baehr June 30, 2009 at 9:45 AM

Thanks so much. I figured they were in the stylesheet somewhere, but I am a little new to editing them. I got rid of the border and removed the class like you suggested. Now it works. The only minor detail is that the text seems very far from the bullets now, and I am not sure why.

http://trailblazerresearch.com/

On this page, the text is right on the bullet.

http://trailblazerresearch.com.....-help-you/

Is there another place in the style sheet for bullets within tables? I didn’t see one, but I could have missed it.

Thanks again for all your help!

Reply

SBA June 30, 2009 at 8:22 PM

Yes there is bullet styling but it’s for anything in a post (your table just inherits the settings: It spaces in 9px to allow room for the background bullet image — so don’t change it !

.Post ul li, .Post ol ul li
{
background-image: url(‘images/bullet2.jpg’);
background-repeat:no-repeat;
padding-left:9px;
}
So I think the difference in the two bullet list does have to do with the table but it may be the fact that this is the only row in the table (th) and is styled to center and spread out in the available space of 740 with only 4 cells.
*** added on July 2:
You can do the same thing without tables!!! Assuming you have only one line across the page. Replace the table code with:
<div>
<ul>
<li style="display:inline; padding-right:75px">Healthcare</li>
<li style="display:inline; padding-right:75px">Technology</li>
<li style="display:inline; padding-right:75px">Sports and Leisure</li>
<li style="display:inline; padding-right:0px">Consumer Advantage</li>
</ul>
</div>

Reply

Paul Schlegel September 7, 2009 at 9:33 AM

One thing that has me perplexed about WP-Tables reloaded is that sometimes Google picks up the table entries and sometimes it doesn’t.

Has anyone else experienced this?

I just asked about it in WordPress plugin support. So if I get an answer there, I’ll post it here.

Reply

Greg U September 11, 2009 at 1:52 AM

Is there any possible way of being able to move the tables in the editor?

In my editor, I can’t put tables side by side , they automatically create a line break. Is there a possibility of being able to “move” or “drag” the tables ( like one would do with images?). Am I missing a parameter in the options?

Reply

SBA September 11, 2009 at 3:30 AM

Greg,
You can not drag and drop tables. You can’t even safely highlight the rows and copy/paste in Compose Mode since you’ll miss the full table variables. Naturally you can highlight in html mode but it’s hard to find.

The safest way to move is to first turn on border to see the cells, then add an anchor word on the line above and below the table. Use those anchor lines to copy the words and the table, delete since it’s now in the clipboard, then paste into the new location. Turn off border, clean up anchor words.

As for side by side, You can create a single row, 2 cell table and copy-paste one table into each cell. Need to be careful they fit the width of your post column.

Reply

snowivy November 19, 2009 at 1:17 PM

Thanks for this post! It helped a lot on my research.

Reply

John January 11, 2010 at 8:54 AM

I was about to pull my hair out with this topic, trying to get a background image in the post.

I just ran across a free WP plugin that does the work for you! VERY EASY!

In your dashboard, go to Plugins -> Add New and type in Post Background. The name of the plugin is: Custom Post Background. Hope that helps!

John

Reply

SBA January 11, 2010 at 9:48 PM

John, thanks for info about the Post Background plugin. However the description only talks about changing post background colors. This article is about tables. Does the plugin also do tables?

Reply

Ningbo January 13, 2010 at 7:44 PM

WP-Table Reloaded is a very useful plugin for publishing any kind of table. I am starting a new hotel guide type of website and I needed to list all the hotel options in several tables.
I did a try with TinyMCE advanced functions (worked alright) but found that WP-table reloaded produced an even much cleaner code.
True that this plugin has been totally rewritten for WP 2.8 and above.

But I would like to mention here its author, Tobias Bäthge, which attitude is very positive and helpful for the WP community.

I needed help and opened a thread on the WP forum. In less than an hour I had a reply from Tobias.
I thought I was lucky but when I checked his tracklist, I found he always managed to answer in about 1 or 2 hours.(!)

For sure this guy doesn’t save his energy to keep its plugin running as well as giving help to lots of users.
I even contacted him by mail for a specific request and had a very clear and explicit answer in about 1 hour.

Not so common today, this is why I decided to mention it here.

Paul

Reply

Leave a Comment

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Previous post:

Next post: