Tuesday, September 2, 2008
Tables in blogger
Blogger posters often have problems with huge spaces at the tops of tables. There seem to be three main solutions.

  1. The easiest solution is to change your formatting settings under "Convert line breaks" to "No" (the default is "Yes"). This will fix the table but will completely annihalate other posts because everything in a post will now effectively be in one continuous line without line breaks. Tables will look peachy but you will have to apply div styles to every post without a table.
  2. Another solution is to create tables in Notepad and paste the into Blogger posts. Whatever you do, if you want to use this method, do NOT create the table in Word or even in Blogger because both applications include a lot of problematic formatting. This also works but is cumbersome and really unpleasant to edit because you have to go back to the original in order to be sure not one single Blogger code slips in.
  3. The third solution was provided by the wonderful Malaysian blogger Peter Chen (a/k/a/ Blogstar) and modified by FamilyNutritionist in a comment (bless him!). Here are the steps:

    (a) paste or type these two lines at the end of your css style codes (you may have to experiment with ideal placcement but I find it works best at the end):

    . nobrtable br { display: none } (do not add spaces after the periods)
    . nobrtable p { margin: 0px; } (do not add spaces after the periods)
    In blogger posts, table formatting doesn't mirror post/text formatting and therefore it may be good to add font size and line spacing to either or both of these, too, such as
    . nobrtable p { margin: 0px; font: 8.5pt/1.4 Verdana; }

    (b) at the start of your table, type or paste this line:

    < class="nobrtable"> (without spaces)

    (c) if you want a new line in a column without having to make a new row or column, press enter and at the start of each line, type:

    < "p" > (without spaces or quotation marks)

    (d) at the end of your post, type:

    < /table class > and < /div > (without spaces except between table and class)
If you have any problems with any of this, as I do if my table has dozens of lines, add this at the start of the post too, even though it's already in the css code. Sometimes redundancy works, right?!

< type="text/css">.nobrtable br { display: none } < /style > (without spaces at brackets)
< class="nobrtable"> (without spaces)

Labels: ,

Permalink | | posted by jau at 9:17 AM


1 more:
Blogger Family Nutritionist — at 2:44 PM, October 30, 2008:
Thanks for the reference. I hope I can help make it work every time.
< class="nobrtable"> shouldn't work. You need to make that a div.
< /table class> -- don't put anyting in the closing tag. just use < /table>

You can do
< table class="nobrtable">
....
< /table>

Or you can do
< div class="nobrtabl">
anything you want here, really
< "p">and another line, too
< table>
....
< /table>
< /div>

Either one should work. You could do a whole post within a "nobrtable" div if you wanted.

You can see it in action on my blog http://familynutritionist.blogspot.com. 29-oct-2008 post has a table, and all the CSS is readily available if you "view source".

w3schools.com has some great tutorials for html and css basics, which should help understanding tricks like these.

Hope this helps!
 

< home >


Post a Comment

< home