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:
<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 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.
|
|
Note : You will find a confirmation link in your inbox or junk folderIf You Enjoyed This Post Please Take 5 Seconds To Share It.