Solution: This scenario happens because your blog editor will add the <br> tags at the end of each line in your html code. The editor adds the tags because the blog editor is set to convert line breaks.
To get rid off this error, just copy the html code into a text editor like notepad and write the code in one line (Disable the word wrap feature), now as the code is all written in one line the editor will not add those extra break tags.
How to add html tables in posts ?
There are a number of ways you can go about it, they are as listed below:-
- Manually coding the Html in a text editor:- This is a way i would not recommend as it takes up lot of time to type the code and also it is not possible to remember all the options of html tags.
- Using an html editor:- This alternative is the one you should prefer because it reduces the time to type the code and also provides easy preview of how the code is going to appear in your blog. I use " Dream weaver " for coding the html part, it just helps in making coding easier and faster. The only thing's that you need to remember are the basic tags of html.
The basic tags that you must know are as follows, the general properties of the tags that are used can be added with the help of an editor and are explained after the basic tags :-
Basic Tags:
1.<tr>: It creates a new row
2.<td>: It creates a new column
3.<tbody>: The body of the table
The properties:
1. For the <table> tag :-
a) bgcolor="color hexadecimal value" : The background color of the table
b) border=0|1 : If set to 1 displays the table border else the border is not shown
c) align=center|left|right: It aligns the table in the direction specified
d) cellpadding= value in pixels: This specifies the space between the cell boundary and the cell content
e) cellspacing= value in pixels: the space between the cells.
2. For the <td> and <tr> tags:
a) bgcolor="color hexadecimal value" : The background color of the column or row
b) align=center|left|right|justify: It aligns the column or row in the direction specified
sample code and table is shown below, make sure that when you paste or modify the code, all of it is written in one line because here i have written the code in separate lines so that it is more readable:
The code:-
<table border="1" cellpadding="5" cellspacing="5" bgcolor="#3366FF">
<tbody>
<tr>
<td align="left" > S.no </td> <td align="left"> Customer name </td>
</tr>
<tr>
<td align="left">1</td> <td align="left"> abcd</td>
</tr>
<tr>
<td align="left">2</td> <td align="left">xyz</td>
</tr>
</tbody>
</table>
The table:-S.no Customer name 1 abcd 2 xyz - Use the automated table generators :- This is the fastest way but you end up learning nothing. The dream weaver CS3 that i use provides the facility to generate custom tables and all the other html editors also provide this facility.
