Wednesday, January 05, 2011

Easily create tables with Windows Live Writer


Hard coding the HTML for a table is very tedious, but here is an easy way to do it. Go download Windows Live Writer and install it into your computer as I have found with this test post Blogger versus Wordpress Comparison that Windows Live Writer is a good tool to simplify publishing tables.

(Writer is part of Windows Live Essentials. You can download just Writer or all of Windows Live Essentials. Windows Live Essentials 2011 includes Messenger, Photo Gallery, Movie Maker, Mail, Writer, Family Safety, and Windows Live Mesh, plus Bing Bar, Messenger Companion, Microsoft Silverlight, and Outlook Connector Pack (Microsoft OutlookHotmail Connector and Microsoft Outlook Social Connector Provider for Windows Live Messenger).


The first time you open Windows Live Writer, you will be required to ADD A BLOG and below is the process you will have to go through:

What blog service do you use?
Windows Live Writer works with most popular blog services. Tell us which one you use.
(  ) I don't have a blog; create one on Windows Live for me
(  ) Windows Live Spaces\
(  ) SharePoint blog
(  ) Other blog service (Blogger, WordPress, TypePad, all others
[ Next > ]


Clicking next will then take you to

Add a blog account
Web Address of your blog:
[                 ]
Username:
[              ]
Password:
[              ]
[ Next > ]


While adding a blog, it is my opinion that it is good to allow Windows Live Writer to download your blog theme (template) as you can then get a graphic preview of how the table (recommended, see below)

You may continue to add more blogs if you want, but for this post I will illustrate getting the HTML code for my test blog

Loading Live Writer will immediately take you to Live Writer post editor. If you have more than 1 blog installed for Live Writer, go to the top corner and select the blog where you intend to publish the table. The reason is that if you had allowed Windows Live Writer access to your Blogger account and the themes (template) had been downloaded into Window Live Writer, you can click PREVIEW and see the post with the table as it would be when finally published.

You may type the content of your post as you want it to be and where you want a table, go to the menu bar and click down arrow of either the table insert icon Windows Live Writer table insert icon or the INSERT button (see screen shots below:

Windows Live Writer Insert Table down arrowWindows Live Writer Insert button (Table)


Following that, type in your choice for the number of rows and number of column and the table width and do not fret too much about your choice as you can later insert or delete rows and columns as you wish (right-click the last cell and select either INSERT ROW or INSERT COLUMN).

Now if you are not already in the EDIT mode Windows Live Writer Edit Preview and Source buttons, click the EDIT button and the table with blank cells will be displayed ready for you to fill in the cell content (see screen shot below):

Window Live Writer Insert table in EDIT mode

Note that by being in the EDIT mode, you can drag-drop the border of the table to change the width of any column to your desired width (the width of the field [POST (for typing the post title)] can serve to guide you in what widths will make your table fit into the width of the main column.

Don't click SOURCE unless you want to deal with the HTML table codes directly. Type in the content of the cells as you see it and add or delete empty rows/column if any. For content, you can even put in an image by typing in the HTML image tag like what I have done for the 2 images side by side above.

When finished with the content, click PREVIEW and you will see the post exactly as if you have already published the post (minus any content added with Javascript):

Preview of post with table prepared with Windows Live Writer

I would recommend you use Windows Live Writer publish your post by going to the menu bar and click FILE > PUBLISH TO BLOG. The reason for my recommendation is because of the result in my test post Table: Blogger versus Wordpress Comparison which although I had expected huge blank space above the table and I may need to apply what is described in this post How to avoid large blank space above table Part 2, publishing the test post did not result in any blank space, most likely because Windows Live Writer upload the HTML table codes without any line break tag <br /> as you can see in the screen shot below:

post with html tag published with Windows Live Writer for table in EDIT HTML mode of Blogger post editor

17 comments:

  1. Hi! Just to let you know, there's a table plug-in available through WLW Plug-ins that's a lot better than the standard table wizard.

    Take Care,
    Peter2

    ReplyDelete
  2. Nice post Peter, I like the way you've provided some detail about what it's like to actually use WLW.

    One thing I've picked up from reading is that once you've used WLW to write a post, you pretty much always need to use it to edit that post. It's something to do with some extra codes that WLW uses, which aren't supported by Blogger's editor.

    ReplyDelete
  3. Hi! Just to let you know there's a table plug-in thats available from WLW plug-ins that's a lot better than the standard wizard.

    Take Care,
    Peter2
    Sydney Australia

    ReplyDelete
  4. Windows Live Writer is a fantastic offline blogging tool with a WYSIWYG editor. It interfaces with just about any blog service [Blogger, LiveJournal, TypePad, WordPress, etc.] If you're a blogger you'll find this tool incredibly helpful- and it's refreshingly free from Microsoft.

    Here's a link to the main Windows Live Writer gallery...
    http://plugins.live.com/writer

    That's good information… Much obliged...

    Until next time,
    Larry Henry Jr.

    ReplyDelete
  5. Larry, see I highlighted your comment over at Blogger for Dummies: Easily create tables with Windows Live Writer. Thanks for drawing our attention to the plugins.

    ReplyDelete
  6. I find that many of the tricks and tips for using the web based blogger editor are just solved when you use Windows Live Writer. For example, putting two pictures next to each other is really easy in Writer. The only thing you really cannot do is create new pages in your blogger blog with it. Also I love the fact that I can blog off line.

    ReplyDelete
  7. Ah Peter 2, just found comment moderation email in Spam folder, date of email Wednesday, January 5

    Thanks for updating us on the table plugin. Think I would search for it and try it out.

    ReplyDelete
  8. Hello Peter,

    Now you have a new simple solution to create beautiful table: http://socialcompare.com/ (with nice design and possibility to custom it...), do not hesitate to try it and make a review for your readers, here there are some details (tutorial):
    http://blog.socialcompare.com/2011/01/15/how-to-create-and-publish-tables-in-blogger-overblog-canalblog-skyrock-wordpress%E2%80%A6/

    ReplyDelete
  9. Thanks for the info!
    Does the Google Live Writer work with a Mac? If not, is there a good solution for a table on Blogger when using a Mac. I would love to be able to insert a table or chart from Excel or Mac's iwork numbers. Any ideas?

    ReplyDelete
  10. Google Live Writer? It is Windows Live Writer and you will have to go through loops to get that to work with MAC. Perhaps you are referring to Google Docs? You can also publish to the web via Google Docs. Perhaps we should investigate that further

    ReplyDelete
  11. Thanks Peter. I will give Google Docs a look. It seems like it should work with Blogger, but I haven't used it enough to know. I do use Office for Mac and it works great for Excel, but I have not figured out a decent way to get a working table into Blogger.

    ReplyDelete
  12. Peter,

    Google Docs Spreadsheet works well. After the doc is created, it is possible to make the chart/table and publish it in the blog. It is also interactive, if you so choose. When you update and save the spreadsheet, the chart/table will also update in the blog. I am still trying to figure out formatting. It doesn't quite fit like I would like, but I will play with it more and see what I can do with the formatting process. Check it out at twowheelstlouis.blogspot.com if you wish.

    ReplyDelete
  13. @Abomb -- if you post the whole thing as a draft of a post, then copy all the code and paste into a blank page, you should be able to get around that.

    Thanks for the info - I've been doing this the hard way.

    ReplyDelete
  14. Cryselle & Abomb, regarding posting to Blogger's static pages, I believe what Cryselle said about draft and "copy all the code" is referring to first writing (drafting) out the content (EDIT mode) then change to [source], copy all the codes and paste it into the Blogger PAGE post editor.

    ReplyDelete
  15. hi,

    I am having a hard time downloading windows live writer to my mac, is it even possible to do?

    thank you

    ReplyDelete
  16. What operating system does your computer has? I understand (not sure) that there are issues with Windows 7

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics