How to insert tables in WordPress

I am actually quite new to WordPress and still learning the amazing features the WordPress provides. I can change my themes and layouts very easily; with the WYSIWYG (What you see is what you get) editor, I don’t need to worry about the layout of my post. However, I found it very inconvenient that WordPress doesn’t allow me to insert table into my post. I googled “WordPress table” and found that there was actually one and the only single one plugin that allowed you to insert tables into your post. It was called “WP-Table” but the thing was that the latest version of WP-Table was 1.52 that supports up to WordPress 2.3 and haven’t been updated since 2007-10-15. So I didn’t even want to give it a try and sought an alternate way to do it. Well, I guess there are only two ways right now. First, wait for someone to develop it or I develop it myself, but I have to admit that I haven’t studied WordPress thoroughly enough so this project won’t be started in near future. So I have to go for my second option, code your table with html. If you are familiar with HTML, you can just click the “HTML” besides “Visual” tab when you write a post and just type in your table in HTML; then close your browser and do something else as this post is written for those who is not familiar or new to HTML. Let me show you one the most simple table code here:

<table border=”0″> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table>

Month Savings
January $100

The above table is what you will see when you type in the code in the “HTML” field. I don’t want to get into too much detail of it; basically, if you want to add one more row, just add one moreĀ  <tr> </tr> before the </table> tab and you can put the <td></td> tab in between <tr> and </tr> to make columns. Then all the contents you want to show is in between <td></td> tabs. If you want to learn more of the HTML usage, W3C is a very good place to go.

For today, I will show you how to generate a table without knowing a single line of HTML with Dreamweaver or any other WYSIWYG HTML editor.

  • First I will launch Adobe Dreamweaver and create a new HTML file by choosing “Files –> New..–>HTML”. Then in the menu bar I chose “Insert –> Table”:InsertTable
  • Then choose your own setting in the panel:PanelSetting
  • This is what you can see in the live view mode:tableview
  • Now you fill in the cell where you want to put your content to:FillContent
  • And let’s go get the code now by switch to Code panel:SwitchToCode
  • You will see your code needed right away, what you can do is copy everything after <body> and before </body>, then paste into your HTML file of your post.GetCodeWhen you click “Visual” tab back to your normal mode, you will see your table right there:Copy-to-wordpress

Side Note: The post Software for switchers from Windows to Mac was created and managed using this method.

Don’t have Adobe Dreamweaver? No problem, you can find tons of free HTML editors on your own by Googling. Still not very confident with all these steps? Well, this is just a basic idea how you can get this job done. You can achieve it by various methods or software. Someone even use Microsoft Word to generate the table and then save the document as a HTML file then copy and paste the code inside. If I were you, however, this is the last thing I will do because the code generated by Microsoft Word is messy and will do nothing better than giving you painfully slow post loading.

POST NOTES: This method is straight forward and easy to use; however, this is only considered to be an alternate way just because WordPress don’t have table insert nor any available useful plugin.

  • Pros: Easy for those who are not familiar with HTML code. Users don’t even need to know any single lines of code, but of course, having basic knowledge of the HTML will be definitely helpful for your WordPress posting.
  • Cons: Can’t edit the table (like adding or deleting rows) easily. If you want to stay away for the coding, you can copy and past the code back to your editor and use live view mode to modify your table then put the updated code back to your post.

UPDATE: If you want a better solution, seems like you can use FCKeditor to replace the original WordPress editor and FCKeditor does support table.

Filed Under: General

Tags:

RSSComments (1)

Leave a Reply | Trackback URL

  1. Tables in wordpress says:

    Thanks for this useful post. never knew we could add tables to wp posts

Leave a Reply




If you want a picture to show with your comment, go get a Gravatar.