
- 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 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.







{ 24 comments… read them below or add one }
You know, I have never inserted a table into a blog post – I didn’t even know you could do that!
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.
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
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.
Is bidvertizer paying?
is it not a fake service??
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
@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…
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.
Thanks for Compliment.
Creating tables with TinyMCE is a breeze and there are many advanced functions available! Have fun with it!
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?
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.
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?
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.
Oops, looks like I can’t post the code like that here. Maybe this works.
Healthcare
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.
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!
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>
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.
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?
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.
Thanks for this post! It helped a lot on my research.
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
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?
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