How to avoid large blank space above tables in Blogger

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