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 !

SHARE

44 COMMENTS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  18. @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 πŸ™‚

LEAVE A REPLY