This problem is common issue while displaying table on your blogspot/blogger post. Whenever you construct table using HTML inside blogger, above table a huge blank lines/white spaces are printed. In this post I will test it along with writings of how to remove those blank spaces.
Problem Demonstration
Below is the html of a simple table structure. If you are new in html arena then tag
<table> indicates you are going to draw a table.
<th> indicates table header.
<tr> indicates table row.
<td> indicates table data.
Table html is:
<table border="1">
<th>Heading 01</th>
<th>Heading 02</th>
<th>Heading 03</th>
<tr><td>Row 01 Data01</td>
<td>Row 01 Data 02</td>
<td>Row 01 Data 03</td>
</tr>
<tr><td>Row 02 Data 01</td>
<td>Row 02 Data 02</td>
<td>Row 03 Data 03</td>
</tr>
</table>
And the output of above html is
| Heading 01 | Heading 02 | Heading 03 |
|---|---|---|
| Row 01 Data01 | Row 01 Data 02 | Row 01 Data 03 |
| Row 02 Data 01 | Row 02 Data 02 | Row 03 Data 03 |
From the output you see above table large amount of blank lines is printed. This happens on your blog post. On your own machine above html shows ok and no space is printed there but in case of blogger post a large blank space is printed.
Cause of the Problem
While typing html you pressed ENTER key many times and this cause the Blogger software to add a line breaks tags for each time you press the ENTER key. That's why you are seeing a lot of white spaces above the table.
In fact the number of line breaks printed before the table, is the amount of line breaks inside your script. Blogger generated line breaks is printed before the table html.
Solution of the Problem
You can avoid blogger generated line breaks by three ways. Inside the html no line breaks avoid print line breaks in your blog post.
Method 1)Writing HTML without pressing any ENTER key.
<table border="1"><th>Heading 01</th><th>Heading 02</th><th>Heading 03</th><tr><td>Row 01 Data01</td><td>Row 01 Data 02</td><td>Row 01 Data 03</td></tr><tr><td>Row 02 Data 01</td><td>Row 02 Data 02</td><td>Row 03 Data 03</td></tr></table>
Above html output is,
| Heading 01 | Heading 02 | Heading 03 |
|---|---|---|
| Row 01 Data01 | Row 01 Data 02 | Row 01 Data 03 |
| Row 02 Data 01 | Row 02 Data 02 | Row 03 Data 03 |
Note that no white spaces are printed after html as no we did not keep any line breaks inside out html. But writing code in this way is not user friendly and also a cumbersome thing. Below is the way of using <div> which in fact turns the line breaks off inside blogger post.
Method 2)Change blogger Dashboard Setting:
i)Sign into Dashboard
ii)Select the blog that you want to change. You may have many blogs and choose as you like.
iii)Click the SETTINGS > FORMATTING tab.
iv)In the middle of the page find the "Convert line breaks" keyword by default which is set to "Yes". Make the setting "No".
v)After change it in the bottom click Save Settings.
And now you no longer find any blank lines above table in your html.
But note that by doing so, you may play havoc with the formatting of your posts such as no paragraphs. Also setting in this way will affect all posts in your blogger. So it is global setting.
Method 3: Using of style and div tag as below.
<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable">
<table border="1">
<th>Heading 01</th>
<th>Heading 02</th>
<th>Heading 03</th>
<tr><td>Row 01 Data01</td>
<td>Row 01 Data 02</td>
<td>Row 01 Data 03</td>
</tr>
<tr><td>Row 02 Data 01</td>
<td>Row 02 Data 02</td>
<td>Row 03 Data 03</td>
</tr>
</table>
</div>
Below is the output of this html,
| Heading 01 | Heading 02 | Heading 03 |
|---|---|---|
| Row 01 Data01 | Row 01 Data 02 | Row 01 Data 03 |
| Row 02 Data 01 | Row 02 Data 02 | Row 03 Data 03 |
Related Documents
No comments:
Post a Comment