Friday, June 29, 2007

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.

78 comments:

  1. That is awesome. I've always had to remove all the lines and place the code onto 1 long line to get rid of the spaces. This makes it so much easier to read/update.

    Thanks for sharing.

    ReplyDelete
  2. Hello,
    i'm Sain from malaysia..

    i just want to ask about making money with google adsense...

    i'm very excited when u said that u always got a cheque monthly from google..

    congratulations!!!..
    for ur information, i have been doing blog for adsense , and until now i still hard to get income from it..

    can u teach me how to get my first google adsense cheque???

    Thanx uncle...

    ReplyDelete
  3. Hi hssn,

    I will probably do a post on that hopefully in the very near future, as soon as I get the higher priority tasks out of the way. Will post a link from here when it is done. I am saving the URL of this post and putting it in my "to do 30" folder.

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

    ReplyDelete
  4. Hi, Peter, your site is just right for me. I was just frustrateing about the big space of table, with try your ways. Please visit us at
    http://full-time-mothers.blogspot.com

    Thanks

    RuoHoo

    ReplyDelete
  5. Thanks for the post, it worked for me as well. It was quite a struggle for 30 minutes without any result. But your remedy worked instantly. Please see the blog about our clipping path services

    ReplyDelete
  6. I'm so glad that I came across this post while trying to figure out why my table was appearing half way down the page.
    I followed the link you provided on Blogger Help Group, & in less than 10 seconds = Problem Solved!

    After working on the coding for my table for hours, then encountering the "space" problem, your solution saved my sanity. Thank you!

    ReplyDelete
  7. hi. i donno what im doing wrong, but this trick isnt working for me. im copying the exact code you gave me and doing the exact thing u r asking me to do. its working fine with the example code you gave but it isnt working for mine. are there any exceptions??

    ReplyDelete
  8. Hi Garam,

    I can't tell what is the problem, but if I am to be faced with a problem like this and don't know what to do, I will create a test blog with a different template, (for this purpose, I will use a browser like FireFox with tabbed browsing), open a new tab to get to
    blogger.com/home
    Create the test blog with different template, create a post, go back to the tab where I have the post editor window for the problem post with the table, copy the whole post as it is (I am assuming you have made no error), paste it into the new post in the test blog, publish it and see if there is any difference. If it works with a different template, then it means the problem lies in your template.

    Please note I am not saying I know what is causing the problem, but what kind of steps I will take to try to troubleshoot the problem.

    Peter Blog*Star
    Generating Revenue from your Website

    ReplyDelete
  9. Thanks for posting this tip.
    This is definitely a two-edged sword.

    I don't want "all those extra" line breaks. But I do want some line breaks within the cells. And now, when I use your trick, blogger is ignoring even my explicit line breaks!
    I guess the only alternative is to use paragraphs and fiddle with the interparagraph spacing as well!

    yep. That worked. I added .nobrtable p {margin-top: 0px; margin-bottom: 0px} to the style statement, with good results.

    ReplyDelete
  10. I like this trick so much that I modified my template. I wound up putting the CSS way at the bottom of the skin section, because when I tried at the beginning, my paragraph style settings were ignored.

    Here's what I put in the template:
    .nobrtable br { display: none }
    .nobrtable p { margin-bottom: 0px; margin-top: 0px;}

    And here's how I use it in the blog:
    <table class="nobrtable">
    <tr>
    <td><p>Line 1
    <p>Line 2
    <p>Line 3
    </td>
    <td>
    <p>Each serving contains
    <p>Cals: 302, FatCals: 18, TotFat: 2g
    <p>SatFat: 1g, PolyFat: 1g, MonoFat: 2g
    </td>
    </tr>
    </table>

    ReplyDelete
  11. Thanks, I was driving myself nuts. LOL.
    Thanks,
    Brian

    ReplyDelete
  12. Hi FamilyNutritionist,

    Thanks for the useful tip which looks like it should work. Hope to get time to test it, and if it is confirmed to work, can I use it for a post and attribute it to you?

    Peter Blog*Star
    Generating Revenue from your Website

    ReplyDelete
  13. Peter,
    Please feel free to post about my tip. I posted it here so other people could find and use it. You are the vector for that. Thanks for being an essential blogger help supplement!

    ReplyDelete
  14. That is really great. I've only just started using Blogger and have now put my first table in with the minimum of fuss. It's easy when you know how....!

    You can see the awesome results at http://worldofhiglet.blogspot.com/2008/02/news-from-verse.html

    Thanks again!

    ReplyDelete
  15. Peter, I also got the info about solving white space above tables from MLA Wire. Guess we're pilfering from the same treasure bags! If you're going to steal, might as well steal good stuff.

    ReplyDelete
  16. Worked well for me at pc-bargian-news@blogspot.com, but the rss feed shows this:

    .nobrtable br {display:none;}

    at the top of the post.

    Any ideas?

    Thanks,
    BobDad

    ReplyDelete
  17. Peter, you are a legend. For every problem I had with Blogger, I found solution here on your blog. Thank you so much and keep up the good work!

    ReplyDelete
  18. Hi Worldofhighlet,

    It is not a good idea to paste blog URL directly into a comment, especially if the URL is a long one. It gives a lot of problem, and is not active (clickable). You may be interested to read

    Make active (clickable) links in posts and comments

    Improve link popularity and PageRank by removing "nofollow" attribute for comments

    The "nofollow" attribute have been removed for comments for this blog, and it will do you a world of good to make any URL active (clickable), however, don't spam as comments are moderated and spam will not be approved.

    Peter Blog*Star
    Blogger FAQ (Frequently Asked Questions_
    (Blogger FAQ in progress. More will be added as I have the time)

    ReplyDelete
  19. Hi Peter,

    Thanks for your helpful comment regarding URLs and I have now learned from my mistake. Extra credit for taking the time to go to my blog! Thanks again,

    Worldofhiglet

    ReplyDelete
  20. Hi BobDad,

    Sorry to respond so late but please refer to Why your comments and emails are not getting prompt responses

    Regarding
    .nobrtable br {display:none;}

    I am no expert, but the HTML tag <br /> is what they call a line break. It cause the text or other stuff following it to be displayed in the next line. That may have something to what you got. It says no br, so perhaps failed to see a <br /> tag where it is expecting to see one. Just guessing.

    If I have more info, will comment later.

    Peter Blog*Star
    Food as medicine

    ReplyDelete
  21. great tip...really helped me get those awful white spaces off my posts...

    cheers mate..

    ReplyDelete
  22. I see the original remedy was posted a year ago, yet Blogger still hasn't come up with a cure on the editor!! I tried your recommended method, but sadly it didn't work for me and unless I missed some vital step, I had to resort to saving the table as text and pasting it in, where of course I lost control over adjusting the columns later.
    Are there any more solutions that are current? Additionally, when I convert the table to html by saving it as a Firefox html file, and copying and pasting into the Blogger html editor, Blogger comes up with a whole series of objections to tags and meta tags, which all have to be eradicated before it will publish the blog! Is it the same in IE?
    Thanks,
    Paul

    ReplyDelete
  23. Hi Paola,

    If this doesn't work for you why don't you try Simple but tedious method of avoiding blank space above table. But by right this method should work as I have tested it before publishing.

    Peter Chen Blog*Star
    Dream Driven Life(TM)

    ReplyDelete
  24. Worked perfectly, thank you!

    ReplyDelete
  25. Tried it on another of my sites and I had to use the tip suggested by FamilyNutritionalist. Another big help in allows us to use the line breaks within our tables. Glad to have found this site.

    ReplyDelete
  26. Thanks a lot! That code was a big help!

    ReplyDelete
  27. Ich muss mich auch für deinen Tipp bedanken.

    ReplyDelete
  28. Thanks for amazing content. I am using the knowledge gained from you for my blog for Free Indian share tips and thus hope to benefit the readers.

    ReplyDelete
  29. Brilliant. I've been frustrated by this problem for a long time. You made my day.

    http://diecastairplanecollectornews.blogspot.com/

    ReplyDelete
  30. Thanks very much for this.
    I`ll have to watch your blog from now on...

    ReplyDelete
  31. Thanks for this.
    I will have to watch your blog from now on for tips...

    ReplyDelete
  32. thanks. that solved my problem.

    Abe.

    ReplyDelete
  33. Thanks that worked like magic
    ASB

    ReplyDelete
  34. Hi Peter,

    I have a problem with table formatting.
    With the nobrtable code I solved the white space problem but it give rise to another problem. All the linebreaks within a cell are all gone as well.
    I need linebreaks in my cells, is there a way to get that done? Appreciates your help. Thx

    ReplyDelete
  35. I haven't tried it myself but I suspect you can introduce line break within the cells itself where you want a line break.

    ReplyDelete
  36. Thx so much for the response, Peter. I actually tried the way FamilyNutritionists (so thx Family Nutritionists) suggested and it works, but with additional line space in between, but I can live with that. If you want to know what I mean, visit my site and look at the table at http://daddy-o-ramblings.blogspot.com/2009/01/war-on-dengue-chikungunya.html

    If you can help me to get rid of the extra linebreak in between that cell I would be very grateful but only when you're free. Or anyone else who's free for that matter, I would appreciate your help. I'm no expert in html so I'd be happy if you can point me towards the right direction.

    Once again. Thx

    ReplyDelete
  37. OMG dude, thank you. I've been battling with this and your solution was easy and it worked perfectly. YOU ROCK IT!

    ReplyDelete
  38. Thank, I wish I found this post sooner:)

    ReplyDelete
  39. Blessed be, You sir/mam just relieved my strangled mind. I was baffled why in the world is this thing happening and have been stuck on my post for a few hours now. But, you saved the day.

    Thanks for posting this info and updating your old post, that's where I had to go in the first place!

    Peace!

    ReplyDelete
  40. Oh Thank You so much. I was going CRAZY trying to figure this out.

    ReplyDelete
  41. OMG!!!! I LOVE YOU!!!!! I have been so frustrated because I couldn't figure out why there was white space. It's fixed because of your coding. You ROCK!

    ReplyDelete
  42. Thanks Very Informative!

    ReplyDelete
  43. Ditto what Denise aka wererich said. I thought I was losing it! This worked perfectly.

    ReplyDelete
  44. Oh thank you so much for this! This was driving me crazy! :-p Yay!

    ReplyDelete
  45. Thank you thank you thank you - that is so helpful - it was driving me crazy

    ReplyDelete
  46. Muchas gracias, thank you.

    You cure my headache, now my blog looks fine:
    http://psychedelic-geometry.blogspot.com/2009/09/binomial-matrix-i.html

    ReplyDelete
  47. It worked great, thanks alot.

    ReplyDelete
  48. This really helped, thank you so much.:)

    ReplyDelete
  49. After 3 years of blogging and deleting all the white space on my tables, I have found a solution. My blog is table driven as you can see here.
    Thank you very much for the style and easy way to solve this!

    ReplyDelete
  50. Thank you very much!

    It did the trick!

    ReplyDelete
  51. Thanks !

    Useful and elegant code ...

    ReplyDelete
  52. This worked great for me too. I'm using RapidWeaver. I created a table in Word, populated cells with links from Amazon's affiliate program then copied and pasted the table into Rapidweaver.

    ReplyDelete
  53. <3 you! This worked! Finally.

    ReplyDelete
  54. Thanks so much for this post. It worked like a charm. I used it successfully here:
    http://billandria.blogspot.com/2010/03/vocabulary-list-and-speech.html

    ReplyDelete
  55. Worked like a charm, thanks!

    ReplyDelete
  56. Thank you SO much. This was driving me crazy. I couldn't figure out why there was all this white space.

    ReplyDelete
  57. It really works! Thanks for saving me a lot of time.

    ReplyDelete
  58. You have made me so happy with this post! Thanks so much! I had been stressing about the extra white space and now it is all fixed. You are amazing!

    ReplyDelete
  59. Thank so much for your trick...It works for my case...

    Best regards,
    foxman

    ReplyDelete
  60. Hiya Peter!

    Thanks for this awesome tip, I was seriously giving myself high blood pressure trying to resolve all the white spaces in my posts :( (I'm very tech unsavvy and know zip abt html! :( )

    However, like the Family Nutritionist, whilst I don't want extra white space I do want some line breaks for easy reading- would u be able to advise on how to do tt? I tried FM's tip but I guess I don't know enough abt HTML as it didn't work for me :(

    Thanks! :)

    Cheers
    Z

    ReplyDelete
  61. Thanks so much for the tip! I copied and pasted and Voila! Thank you! :)

    ReplyDelete
  62. Thank you! This was a very helpful tip!

    ReplyDelete
  63. Thank

    I adore your website - nice job!

    big white

    ReplyDelete
  64. Thank you, thank you, thank you. This has bothered me since I started blogging.

    ReplyDelete
  65. Denise I would also like to draw your attention to my latest post How to easily create tables with Windows Live Writer with which you would not even have to go through the steps described in this post.

    ReplyDelete
  66. awesome, thanks alot!!

    ReplyDelete
  67. Hello Peter,
    First let you say thanks for publishing this beautiful post. But I've found a easy way to insert the tables in web pages by google doc's as I'm also a programmer. As this section can easily done by novice programmer. I hope u like it
    1. login to gmail a/c
    2. select document which will be top left side of the navigiate bar or login to docs.google.com
    3. You will notice at left side of the bar u have "Create New" option, select new SpreadSheet
    4. Add all your data which will be in excel format.
    5. Remove extra Columns & rows from google SpreadSheet.
    6. Save the file with your relevant name.
    7. Now go to Share option which will be at the right side, top near to navigiate bar.
    8. Now in Share option select Sheets to publish. Publish your file.
    9. Next to the below you find "Get a link to the published data". Below this section you find dropdown menu -> Select HTML section
    10. You get the embedded HTML code. Copy this section & paste it in your web page.
    My blog - http://www.buildtraffic4site.blogspot.com

    ReplyDelete
  68. Excellent. Thank you so very much.

    SewCalGal
    www.sewcalgal.blogspot.com

    ReplyDelete
  69. Great, Thanks a ton! I was wondering what to do about it and nothing seemed to be working. Blogger is weird!

    ReplyDelete
  70. Sid Kal, you may be interested in an even easier way to publish tables. See easily create tables with Windows Live Writer.

    ReplyDelete
  71. Ah, you made my day! In retrospect I can't see why I didn't google the solution to this annoying Blogger bug before :o/ Thanks ever so much for this elegant way of bypassing it!

    ReplyDelete
  72. Thank you Master... This Info Cleared my Headache/

    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