Problems with table formatting in blogger or blogspot  

I was making this post on drupal vs joomla and I need to paste a table into the blogger post. I thought it would be the simplest thing till the time i tried creating the table in the blogger post. There were two problems

1) There was a large space in between the table and the post - Blogger automatically adds line breaks.
2) The formatting and everything was lost.

Finally i found a solution from one of the other persons who had suffered from this table formatting problem in blogger.

This approach has been tested on Opera, Firefox and IE 6.

At the top of post add the following line:

<style type="text/css">.nobrtable br { display: none }</style>

Then place the table within that class:


<div class="nobrtable">
<table border ="1">
<tr>
<td>Column1</td>

<td>Column2</td>
<td>Column3</td>
</tr>
<tr>

<td>Data1</td>
<td>Data2</td>
<td>Data3</td>

</tr>
</table>
</div>


The output of the above table lines should be a table as shown below.













Column1 Column2 Column3
Data1 Data2 Data3



This turns the line breaks off within this div and the table is shown properly.

I hope this post also serves as the example to display the correct way of rendering tables in the blogger post.

Just a quick note:

You can see the correct results only in published post and not preview or compose mode. I hope this helps. Once again thanks to the original author of this solution. I hope this should fix up your problems with placing tables in blogger.

AddThis Social Bookmark Button

1 comments

  • Nitin  
    July 1, 2007 at 1:29 PM

    Thanks Peter for the new post on avoiding large white spaces above tables in blogger and original link:
    http://mlawire.blogspot.com/2007/01/table-formatting-in-blogger.html

    I did not really expected that blog can be a means to a personal communication and link building, thought that is what then name of this blog is supposed to mean. I have heard quite about your google adsense income, let me know when you share a tip!

    Regards,
    Nitin

Post a Comment