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.


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>

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.



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

  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.

  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
    echo -n $LINE >>table-no-eol
    - 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"...

  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.

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

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

  7. Anonymous1/14/2007

    What do you think of this solution?

    Table Formatting in Blogger

  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

  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.

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

  11. Hi Dr. David,

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

    Dummies Guide to Google Blogger
    "online book" in progress

  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,

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


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


  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

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


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

  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.


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



  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!!

  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!

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

  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.

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

  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:


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

  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:


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



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

  26. thanks. i fixed it in my blog

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

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


  29. Perfect! Thanks for this post!

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

  31. Thank you for the tip.

    You are a star.



  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.


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

  34. Hi Peter-
    I was talking about the second post
    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.


  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;
    style="color: black;

    BTW are you preparing your post in the Compose mode?

  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

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

  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!

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

    Please elaborate on the above to make it clearer

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

  41. This comment has been removed by the author.

  42. This comment has been removed by the author.

  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.

  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


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