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

How To Insert Tables Into WordPress Posts / Pages

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 !

Be Sociable, Share!

Related posts:

  1. Other tips about Tables of Contents
  2. How Can I Download Bulk Images That Are Hidden Behind Container Pages ?
  3. List Of 8 Students Will Be Working On WordPress In Summer Of Code Google 2009
  4. WordPress 2.6 crossed 3 million downloads
  5. How Can I Avoid WordPress Blog From Sending Pings To My Own Blog- Temporarily / Permanently ?

Author: Categories: How To's Tags:
  1. June 1st, 2009 at 01:21 | #1

    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.

  2. June 1st, 2009 at 01:26 | #2

    @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 :)

  3. Tobman
    July 1st, 2009 at 20:06 | #3

    Thanks man!

  4. 1littlebird
    May 12th, 2010 at 16:20 | #4

    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.

  5. May 15th, 2010 at 18:31 | #5

    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?

  6. May 15th, 2010 at 20:27 | #6

    @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 ?

  7. July 13th, 2010 at 05:15 | #7

    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.

  8. July 13th, 2010 at 06:58 | #8

    @Kate – that’s good link which will help wordpress users. Thanks for that.

  9. August 1st, 2010 at 17:49 | #9

    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.

  10. August 1st, 2010 at 18:27 | #10

    @Amit – I agree, may be in the next release of WP, we might find tables by default…

  11. August 15th, 2010 at 23:44 | #11

    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.

  12. August 15th, 2010 at 23:47 | #12

    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.

  13. August 16th, 2010 at 07:08 | #13

    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/

  14. mike
    August 20th, 2010 at 11:28 | #14

    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

  15. August 20th, 2010 at 19:45 | #15

    @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,

  16. August 20th, 2010 at 20:04 | #16

    @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/

  17. August 26th, 2010 at 11:35 | #17

    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.

  18. January 13th, 2011 at 15:38 | #18

    Thanks for this worked a treat

  19. January 29th, 2011 at 13:15 | #19

    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?

  20. January 29th, 2011 at 13:16 | #20

    @fever18: I doubt it…

  21. February 3rd, 2011 at 14:56 | #21

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

  22. February 9th, 2011 at 06:02 | #22

    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

  23. milind
    February 13th, 2011 at 18:19 | #23

    @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 :|

  24. February 16th, 2011 at 20:46 | #24

    Thank you, Worked great for me just need to learn how to centre it.

  25. February 17th, 2011 at 19:33 | #25

    thanks Gautam for the code. Just created my latest post by using it.

  26. February 21st, 2011 at 23:13 | #26

    Awesome….easy, next time will be easier. Come on by and take a look!
    Thank you so much!

  27. February 22nd, 2011 at 07:02 | #27

    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?

  28. February 22nd, 2011 at 11:00 | #28

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

  29. Yuuka
    March 1st, 2011 at 04:32 | #29

    Thank you very much for this. It really helped my work.

  30. April 13th, 2011 at 13:45 | #30

    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?

  31. April 13th, 2011 at 17:02 | #31

    @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,

  32. July 18th, 2011 at 11:08 | #32

    Cheers mate, works a treat!

  33. September 20th, 2011 at 02:01 | #33

    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.

  34. Friseglarn
    October 2nd, 2011 at 15:45 | #34

    Hey, thanks a bunch for the share, appreciate it!

  35. Moria
    October 2nd, 2011 at 16:21 | #35

    You Rock!
    Thanks :)

  36. October 16th, 2011 at 14:05 | #36

    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.

  37. HeidiFaith
    January 27th, 2012 at 08:06 | #37

    This technique doesn’t work on the latest WordPress updates. =/

  38. January 30th, 2012 at 08:15 | #38

    @Heidi – Which version of wordpress are you using ?

  39. April 15th, 2012 at 17:04 | #39

    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?

  1. August 11th, 2010 at 09:59 | #1