Tuesday, August 22, 2006

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

45 comments:

  1. Unfortunately, neither solution is ideal. :( They are aware of the problem, but have yet to fix it. We are all anxiously waiting…

    ReplyDelete
  2. I don't think there will be any fixes. The way the Blogger program works is to enable people to format text as they type. And when that is inconvenient, then they allow people to disable the ENABLE LINE BREAK. I suppose, after the need for that is over, one can always enable it back again for normal posting.

    ReplyDelete
  3. Thanks for the tips guys and an explanation as to why this is happening - i spent ages assuming it was something i'd overlooked!?
    Anyway, i've followed your advice & removed all line breaks. I created a script to do this so that i can modify the original table occasionally....
    cat table | while read LINE
    do
    echo -n $LINE >>table-no-eol
    done
    - modify table
    - paste table-no-eol into blog
    It would be really nice if you could add some html before the table to say (to blogger at least) "ignore line breaks for this section"...

    ReplyDelete
  4. My solution is to create the table, and then go back through and remove line breaks, so that the HTML is runon. I do the same with lists, for the same reason.

    ReplyDelete
  5. Anonymous11/14/2006

    Thanks a lot :). I wanted a table in my post and was having problems with the white space in front of it. I found the 1st solution somewhere, but it didn't work for me as it was screwing up all my older posts where line-breaks were required.

    After reading your post, I removed all the line-breaks in my table and man, now it all looks good :). The edit HTML page is a mess, but well, I'm not really going to change the post anytime soon :).

    ReplyDelete
  6. Anonymous11/14/2006

    Thanks a lot :). I wanted a table in my post and was having problems with the white space in front of it. I found the 1st solution somewhere, but it didn't work for me as it was screwing up all my older posts where line-breaks were required.

    After reading your post, I removed all the line-breaks in my table and man, now it all looks good :). The edit HTML page is a mess, but well, I'm not really going to change the post anytime soon :).

    ReplyDelete
  7. Anonymous1/14/2007

    What do you think of this solution?

    Table Formatting in Blogger

    ReplyDelete
  8. That sounds like a nice solution if it works. I will test it at this blog Testing Blogger Beta when I am done with other more urgent things. It probably will work, and if if does, it will help greatly in doing tables with HTML and Blogger.

    Peter a.k.a. Enviroman
    Enviroman Says

    ReplyDelete
  9. Hi just wanted to say a BIG thanks. I have been trying to work out why I had a big white space in front of my table. It was driving me mad. I took out the line breaks and it is now gone. Hooray! Thank you so much.

    ReplyDelete
  10. Thanks, very helpful. I used word processor to remove all my line breaks from my HTML and it looks great.

    ReplyDelete
  11. Hi Dr. David,

    Thanks for taking the time and trouble to leave a comment and for the extra information.

    Peter
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  12. Thank you so much, this is working for me!

    And it helps having your sample, and then just changing your labels whilst I'm in the COMPOSE mode, not in the edit mode.

    Take care,
    Paula

    ReplyDelete
  13. Thank you very much for the help. I tried it here, and it works great

    http://mookiepics.blogspot.com/2007/06/evas-birthday.html

    I'll go on a clicking spree on your google ads.

    Victor

    ReplyDelete
  14. Hi Victor,

    I am glad my post helped you and you appreciated it. However, regarding going on a clicking spree on my blog, I am grateful for the thought, but PLEASE DON'T DO THAT. You may think you are doing me a good deed but you may get my AdSense account banned. Please only click on ads that offers things that interest you, otherwise, please leave them alone.

    Thank you.

    Peter (Blog*Star 2006 and 2007)
    Generating Revenue from your Website

    ReplyDelete
  15. No need to worry. I know the rules for adsense.

    :)

    ReplyDelete
  16. I think I have a solution posted at Table formatting in blogger that neither effects your other posts nor does it needs a lot of workaround. It just shows cleanly how to get around this problem using a little technical detail. I hope it helps some of you. Thanks to the Peter for opening up this issue and helping out people, your blog is awesome ;)

    ReplyDelete
  17. Peter, the solution given by nitin for this is exactly what I gave on 1/14 on this thread.

    Nitin acknowledges "another" blogger for the info, which I suspect was me.

    http://mlawire.blogspot.com/2007/01/table-formatting-in-blogger.html

    Would you consider adding me to the credits in your most recent post on this topic?

    Cheers,

    MLA

    ReplyDelete
  18. Hi Peter and MLA,


    Yes MLA is right, his blog had the original solution. I have read his solution some time back and as a habbit saved the solution in my personal help repository, I finally posted it out on my blog at Avoiding whitespaces in tables on blogger and I have also posted MLA's link now in response to Peter's comment.

    Thanks to both of you :)

    - Nitin
    Blogging is good :)
    Once again thanks to mla for his solution. Great work!!

    ReplyDelete
  19. Thank a ton. You are a dude! The large blank spaces were driving me mad...right after i had thought i had learnt a bit of html!

    ReplyDelete
  20. EXTREMELY helpful. Thanks a bunch. Though i do wish I could have figured out something as relatively simple as that out myself.

    ReplyDelete
  21. That helped me out a lot! Thanks! I wondered if that might be the issue but didn't want to delete all the breaks. After reading your article I did and it fixed it.

    ReplyDelete
  22. Thanks a lot. This is really a great blog to find out a lot of thing about Blogger.

    ReplyDelete
  23. I like MLA / Nitin's solution, though there is a simpler one that people have overlooked. I just used HTML comment tags to span the line breaks, and blogger conveniently inserts the <br /> tags within the comment. Example:

    <table><!--
    --><tr><td>L1</td><td>R1</td></tr><!--
    --><tr><td>L2</td><td>R2</td></tr><!--
    --><tr><td>L3</td><td>R3</td></tr><!--
    --></table>

    This becomes:
    <table><!-- <br /> --><tr>...

    ReplyDelete
  24. Hi Peter,

    This is a great blog. I have a question about tables in blogger. I used your tips and tricks but how do I reduce the space between the columns to get more items across my blog post. Take a look at:

    http://blog.studiomac.com/2009/01/books-i-am-reading.html

    As you can see the 4th book won't display to the right of the rest. Instead it gets forced to another row.

    Thanks

    Mark

    ReplyDelete
  25. I've been trying to figure this out for weeks. You rock.

    ReplyDelete
  26. thanks. i fixed it in my blog

    ReplyDelete
  27. Thank you very much! I am surprised that Google has not fixed this problem. You have saved the day!

    ReplyDelete
  28. This works great!! Thank you for posting this helpful information and keeping is simple for a novice blogger.

    Cheers!

    ReplyDelete
  29. Perfect! Thanks for this post!

    ReplyDelete
  30. Good Job Bro! Thx a lot for the trick! ;)

    ReplyDelete
  31. Thank you for the tip.

    You are a star.

    Regards,

    http://www.pickahorse.blogspot.com

    ReplyDelete
  32. Hi Peter-
    Don't know if this is the appropriate place for this but I'm having difficulties and this was closest category.

    My blog: http://nutritioninfoandfun.blogspot.com/

    If you scroll all the way down to my first post, you'll see a white strip going across the page with a black title in it. How do I get rid of white strip???

    Something went awry when I started playing with that title and I don't know what I did wrong.

    Thanks.
    Laura

    ReplyDelete
  33. First post? This: Eat for energy and health? I see no white strip across the page?

    ReplyDelete
  34. Hi Peter-
    I was talking about the second post
    http://nutritioninfoandfun.blogspot.com/
    If you scroll down you'll see the title of a paragraph "Start with Fruit" and you'll see a white strip running through the words and across the page.

    Thanks.

    ReplyDelete
  35. You have this in your template:

    </div><div style="background-color: white; color: black; font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><b>Start with Fruit </b><br />

    Change this
    style="background-color: white; color: black;
    to
    style="color: black;

    BTW are you preparing your post in the Compose mode?

    ReplyDelete
  36. Thanks a lot! This really helped. A tip too (if it's not been already mentioned) is that in blogger once you have a working table if you need to make changes to the content you can switch over from html to compose and change it there (much easier than trying to find it amongst all the code). You can't add extra columns or anything but you can change color, centering, text, etc. that way

    ReplyDelete
  37. Thanks for the tips. I made a table and I wanted to get rid of large space. Your tips worked for my blog.

    ReplyDelete
  38. Hello All,

    I'm having the same problem with large spaces between image and text in the side bar of my blog. Since I am fairly new to blogger I am somewhat challenged. May I just copy and paste the above text or do I need to do manually? Help!

    ReplyDelete
  39. "large spaces between image and text in the side bar of my blog"

    Please elaborate on the above to make it clearer

    ReplyDelete
  40. Thanks for sharing, the second option really worked like wonder.

    ReplyDelete
  41. This comment has been removed by the author.

    ReplyDelete
  42. This comment has been removed by the author.

    ReplyDelete
  43. Hopefully third time lucky, I tested this one as a blog post.

    I have tried all the tips suggested in this blog and many others to no avail. Tables are unstable in Blogger period, for me anyway. A friend came to my rescue and gave me a tip that works. I have not seen it posted anywhere else so I thought I would pay it forward by posting it in at least one blog like this one.

    1) Upload the images to your post, one under the other, aligned to the left.

    2) In the Edit HTML window, look for the <img></img> image code. Before the img code there should be a <a href></a> link code. Delete ALL the link codes and leave only the image codes and the extreme outer div codes and then place the image CODES side by side. Your final HTML code should look something like this:
    <div class="separator" style="clear: both; text-align: left;"><img></img><img></img></div>

    3) In the WYSIWIG Compose window, the images should now appear side by side, except possibly for alignment and size issues which you can now adjust for as appropriate.

    ReplyDelete
  44. Hey great solution. I'm going to try it out later when I get home. I've been having that blank space problem too.

    James from seminar tables

    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