How To Insert Tables Into WordPress Posts / Pages
I just realized it’s a bit tricky when it comes to including tables in wordpress posts or pages. If you are not a technical personal and if you do not have experience handling html then you might find yourself fumbling when you have have to insert a table in a wordpress post or page.
This code will help you insert tables into wordpress posts and pages easily :
<table style=”text-align: center; height: 152px;” border=”1″ cellspacing=”0″ cellpadding=”0″ width=”390″>
<tbody>
<tr style=”background-color: #e9e9e9; font-weight:bolder;”><td>Month</td>
<td>Mobile Networks</td>
<td>Month</td>
<td>Mobile Networks</td>
</tr><tr>
<td>Argentina</td>
<td>Movistar</td>
<td>Argentina</td>
<td>Movistar</td>
</tr><tr>
<td>Argentina</td>
<td>Movistar</td>
<td>Argentina</td>
<td>Movistar</td>
</tr></tbody>
</table>
1> Copy the code,
2> Go to your wordpress editor (post or page),
3> If you have visual editor enabled then you’ll have have two options ‘Visual / HTML’, select HTML
4> Paste the above copied code
and when you switch to “Visual” mode, you’ll have a table which will look like
You can change the height and width of the table by clicking on the ‘small box’ at the corner of the table and dragging them to a dimension of your choice.
<tr>
<td>Argentina</td>
<td>Movistar</td>
<td>Argentina</td>
<td>Movistar</td>
</tr>
represents a row with four columns. by adding an extra <td>content</td> you’ll be adding an extra column data element. And by copy pasting the entire block, you’ll add an extra row to the existing table.
Some know issues are, at times you won’t be able to type anything before or immediately after the table in the visual mode. In such case, go to HTML mode and type before <table> or after</table> respectively.
Alternatively, you can use the wp-table plugin. But I feel this one’s much easier than the wp-table plugin when I want something done quick !
If you want to create some fancy looking tables then you can follow this tutorial
Feel free to ask me doubts if you have any, and I’ll clear all of them for you !
Related posts:
- Other tips about Tables of Contents
- How Can I Download Bulk Images That Are Hidden Behind Container Pages ?
- List Of 8 Students Will Be Working On WordPress In Summer Of Code Google 2009
- WordPress 2.6 crossed 3 million downloads
- How Can I Avoid WordPress Blog From Sending Pings To My Own Blog- Temporarily / Permanently ?
Thanks for this beautiful code. It works perfectly to me. Yeah I agree with this one pretty easy than using the wp-plugin. Thanks again.
@Andi – I felt the wp-insert table was a little extra complicated for such a simple task. If any one has a bit of HTML knowledge, this is easy as breeze, otherwise also
Thanks man!
thank you! I was messing around with plugins to try and add multiple images uniformly but none seem to do it cleanly. This does what I need perfectly.
Good article and clearly explained. But it confirms what I already feared. You have to do tables the hard way, in HTML. Whilst that is fine for me, it is horrible for non techy users! Hardly “grandma-friendly” is it?
Seems astonishing that WordPress does not do WYSIWYG tables when pretty much every other CMS does, e.g, Joomla, Moodle etc. Seems to me the WP devs have concentrated too much on silly widgets and have ignored the basic tasks that users actually need to do, don’t you think?
@Mr.Goose – I totally agree with your point. May be the developers at WordPress think that we bloggers never use tables, which is so wrong ! There were a few plugins which I tried, but heck most were not user friendly as I expected them to be. May be some developer who has time in hand can look into this issue.
Develop a plugin for inserting tables into wordpress will be a cool thing to work on sure. Anybody ?
Everytime I made a change in a table design in WordPress, I had to hop all over the place trying to find my place in the HTML again and preview what I had done and then struggle to find where I left off.
A real hassle!
Using the Try It Yourself page at W3Schools.Com HTML made it easy to get the HTML right and then copy it into WordPress HTML tab.
And, yes, tables are critical for WordPress bloggers and writers. I write technical stuff and need them.
@Kate – that’s good link which will help wordpress users. Thanks for that.
This did the trick, thank you!
However, they should really include an easy tables editor without first copying the HTML code (like Google-Sites) does.
@Amit – I agree, may be in the next release of WP, we might find tables by default…
Does anyone know if it is possible to “collapse” the table so that it does not expand to fill out the column in WP equally. ie the table width always expands to fill out the available space so items in the table are spread out and I would like for them to be closer together.
In the above example, I get no effect by reducing the size of the table with the handles.
If you mention the size of the table, I do not see how the table spreads out. Can you explain the scenario with more details, I’m curious to know whats happening.
Say I have a table with 3 columns that contain only 3 letters XXX. The table will always spread out to fill the available space in the column. I can’t make a table that is only , say, 30 pixels wide. The table will always expand regardless of the width specified in the code. I am using WP 3.0 and MistyLook 3.8RC
Take a look at this page. the table holding the books is 3 columns. Notice how it will all equally space out.
http://pixelpointgraphics.com/journal-store/
What am I doing wrong? I can’t get the text on the left to be up at the top.http://s102783.gridserver.com/?page_id=50
Thanks, Mike
@Mike – Please refer to this link for guidance. It is self explanatory. Create tables as per your requirement and then paste the same in html of your wordpress blog.
Let me know if it works.
Cheers,
@dan mckinney
Well, I had to resort to building a table with extra columns and I fill the right columns with a trusty spacer (blank) graphic to force the table graphics to position on the left side of the column. WP still tries to spread the table out to fill the column but is tricked by this process into presenting my info on the left of the column where I want it.
Admittedly, extra work but it gets the job done!
A table constructed in this manner is displaying the two journal cover graphics at the bottom of this page:
http://pixelpointgraphics.com/bookbinding/the-book-of-christmas-eves/
You can also use FCK Editor to Visually insert Tables into your post, no need to bother about any code.
You can download it from
http://wordpress.org/extend/plugins/fckeditor-for-wordpress-plugin/
Enjoy.
Thanks for this worked a treat
i am looking forward for some plugin to do this..
is there any plugin which can help me to insert the table in wp posts?
@fever18: I doubt it…
@Tahir Yasin
Thank You Very Much! I appreciate that nudge towards the fckeditor. That has to be the best addition to WordPress ever. It has everything and does everything beautifully that you could ever want or need in a WYSIWYG Editor.
The only thing disappointing about it is not finding it sooner than I did.
Thanks again for supplying that info.
Great post. I used this on my blog and it worked great. I know tables are on the way out but there are times when nothing else will do. THANKS
@1littlebird
mahn even em tryin somethin similar and if this works ill b very very thankful just trying!! em messing wid the plugins from 4 days
Thank you, Worked great for me just need to learn how to centre it.
thanks Gautam for the code. Just created my latest post by using it.
Awesome….easy, next time will be easier. Come on by and take a look!
Thank you so much!
I have 50 wordpress categories that I would like to set up on a wordpress page in a table format. Can I use this coding and where you have “Argentina” and “Movistar” enter the coding to link the wordpress categories?
@Cathy – Yes you can, a bit of customizing is required, where you pull only one page, and display all categories in that page. The whole process has to be executed manually.
Thank you very much for this. It really helped my work.
every time I paste tables in when I publish it the tables have big pink highlights when you mouse over the table. Can anybody help me clear this up?
@Paul – Can you take an image of what the problem looks like, upload it to ww.picpaste.com and leave the URL in the image so that I can look into it and see if it’s a generic problem ..
Cheers,
Cheers mate, works a treat!
Thanks for the code
Nice and simple, after fiddling around with table plugins I found it is so much simpler and easier to customize this code for what I need and its 2 years since you posted this!
Thanks again.
Hey, thanks a bunch for the share, appreciate it!
You Rock!
Thanks
Thanks for the HTML, it inserted the table for me, but not exactly how i wanted it.
Wordpress doesn’t have a proper formatting for the tables. I think I need to configure .TR and .TD in my CSS to get a well formatted output.
The current HTML just inserts the Table, I cannot modify the Width of rows and columns.
This technique doesn’t work on the latest WordPress updates. =/
@Heidi – Which version of wordpress are you using ?
How insert loop post in table?
I have create custom page (ex: custom_page1.php) in my theme. I want echo post by category in table? How?