Windows Live Writer table plugin

For many bloggers creating HTML tables are a nightmare, right? Well, I'm here to tell you that all changes with ComputerJy's free Windows Live Writer (WLW) table plug-in.

I've been using this table plug-in for sometime now and I can guarantee it does an excellent job. The options far exceed what

Read rest of post >>>

Continue reading →

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

Read rest of post >>>

Continue reading →

Avoid large white space above table in Blogger Part 2

I have previously published a post Avoid large white space above table for Blogger. That is an easy but messy way of doing it because you cannot type your table in a standard format that is easy to follow and debug, for example, like this (if you want an easier way to create tables without problems, refer to How to easily create table with Windows Live Writer:

<table border="1">
<tr>
<td>Heading 1</td><td>Heading 2</td><td>Heading 3</td>
</tr>
<tr>
<td>row 1 col 1</td><td>row 1 col 2</td><td>row 1 col 3</td>
</tr>
<tr>
<td>row 2 col 1</td><td>row 2 col 2</td><td>row 2 col 3</td>
</tr>
</table>

If you do this, you will get large white space above the table because Blogger adds a <br /> tag for each time you press the EMTER key to start a new line, causing a line break to be created.

To avoid this, add this before HTML for your table or tables if you have more than 1:

<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable">

Then type the HTML for the table or tables. At the end of the table or tables, add this:

</div>

I have tested the method and you can see the result here:
Testing another way of avoiding large white spaces above the table in Blogger. To make things clearer, I will put the script to display that test post with a short description, 2 headings and two tables in the scroll box below:

I have previously posted about <a href="http://blogger-tricks.blogspot.com/2006/08/how-to-avoid-large-white-space-above_21.html">How to avoid large white space above tables in Blogger</a>.

Got some information from one of my blog reader about another way to do it, so will test it here to see if it works:
<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable">

<h3>First table</h3>
This is the first table I am using for the test. The "data" in the table are actually hyperlinks.

<table border ="1">
<tr>
<td>My First Blogger blog</td>
<td>My Second Blogger blog</td>
<td>My Third Blogger blog</td>
</tr>
<tr>
<td><a href="http://bloggerfordummies.blogspot.com" target="_blank">Blogger for Dummies</a></td>
<td><a href="http://blogger-tricks.blogspot.com" target="_blank">Blogger Tips and Tricks</a></td>
<td><a href="http://dummies-guide-to-google-blogger.blogspot.com" target="_blank">Dummies Guide to Google Blogger</a></td>
</tr>
</table>

<h3>Second table</h3>

<table border="1">
<tr>
<td>Heading 1</td><td>Heading 2</td><td>Heading 3</td>
</tr>
<tr>
<td>row 1 col 1</td><td>row 1 col 2</td><td>row 1 col 3</td>
</tr>
<tr>
<td>row 2 col 1</td><td>row 2 col 2</td><td>row 2 col 3</td>
</tr>
</table>

</div>

Update: As you can see, there are not large white space above the table.

Acknowledgement: This post was prepared thanks to an alert from a blogger Nitin of Problems with table formatting with Blogger or blogspot whose information I used with some modification.

Update 2011: For an even easier method of publishing tables without creating unwanted blank space, see How to easily create tables with Windows Live Writer

Update 2: Nitin said in his blog he got the information from another site. He didn't give the link to the site. I was contacted by another blogger saying he probably got it from his site Table formatting in Blogger. This post was dated Saturday, January 13, 2007 while Nitin's post was dated Wednesday, June 27, 2007.

Continue reading →

How to avoid large blank space above tables in Blogger

Update: Another easy way is to use Windows Live Writer for tables etc

This is a common complaint. When a Blogger blogger uses HTML to construct a table, he often finds that there are large blank spaces above the table. If you are not curious about the reasons for blank space, just skip over to methods to avoid blank space above table

Reason for large blank space above table

Since I had wanted to test Blogger Beta, I decided to test doing a table in Blogger Beta to see if it has the same result. The result is here to see: Testing posting tables in Blogger Beta. Well, the result is the same, large blank spaces are created above the table. In fact, I hope if you clicked on that link, you wouldn't think that is an empty post because the table is way down the page.

Below is the actual draft plus the HTML for the table for that post:

This post is to test if the normal way of formatting a HTML for a table causes large spaces as in the standard Blogger.

<table>
<tr>
<td>Item</td><td>Price</td>
<tr>
<td>apple</td><td>$3.00</td>
<tr>
<td>orange</td><td>$2.20</td>
</tr>
<tr>
<td>pear</td><td>$3.40</td>
<tr>
<td>pineapple</td><td>$2.40</td>
</tr>
<tr>
<td>banana</td><td>$1.80</td>
</tr>
<tr>
<td>papaya</td><td>$1.40</td>
</tr>
</table>

Note that in order to type that HTML, I have to press the ENTER key many times, and this cause the Blogger software to add a line breaks
tags for each time I press the ENTER key. That is why you are seeing a lot of white spaces above the table.

Method to avoid large blank space above table

Update: Rather than wasting your time, perhaps it is best to draw your attention to an easy way to avoid large blank space above the table or tables when using HTML <table> tag

There are 2 ways for you to get around this. One is to sign into Dashboard, select the blog, click the SETTINGS > FORMATTING tabs, and somewhere near the bottom of the page you will see CONVERT LINE BREAKS. You will have to set this to NO, but by doing so, you may play havoc with the formatting of your posts such as no paragraphs, etc.

The other way is to write the HTML code for the table in one single line, without pressing the ENTER key. Alternatively you can type the table codes first in an easily understood format and when everything is done, use the DELETE button to get the codes into a single line without line breaks.

Below is the draft including the HTML code for the table that I used for this test. (see post Testing to see if the normal way of doing a table without large spaces works in Blogger Beta)

This table is created by typing the HTML for the table in a single line, without line breaks: <table><tr><td>Item</td><td>Price</td><tr>
<td>apple</td><td>$3.00</td><tr><td>orange
</td><td>$2.20</td></tr><tr><td>pear</td>
<td>$3.40</td></tr><tr><td>pineapple</td>
<td>$2.40</td></tr><tr><td>banana</td><td>
$1.80</td></tr><tr><td>papaya</td><td>$1.40
</td></tr></table>

Note: the codes were actually typed in a single line without once pressing the ENTER key, but I had to break it up as otherwise, the long line of codes will cause my sidebar to slide to the bottom of the page.

Notice now that the table you see in the second link doesn't have any large white spaces above the table.

Update 12 September 2007: This update should have come earlier, but as they say, better late than never. There is an easier way. Refer to Easier way to avoid large space above the table or tables when using HTML codes for table for Blogger.

NEWER POST

OLDER POST

Continue reading →