Thursday 10 January 2013

Learn How To Create Tables in Blogger Blog Post

Sometimes bloggers want to share some statistics or arranged data or information with their blog readers but they feel awkward when they found no way to do so. To avoid such situation you need to be learn some html to get know about how to make tables in blogger or insert in blog post.  So, in this post I will teach you to make simple and basic html tables. Lets take start.

Tables are basically just blocks of data, they included rows and columns. Open New Blog post in HTML tab, starts with table tags.
<table>
</table>
Then start adding rows and dimension by adding <tr> and <td>, respectively.
<table>
<tr><td>
</td></tr>
</table>
Now add some content,
<table>
<tr><td>
Hi
</td></tr>
</table>
When you click on Compose tab you will see just simply 'Hi' text. So, to give it look like a table we should need to add borders.
<table border=1><tr><td>
Hi
</tr></td></table>
Now in preview it will look like . Currently this is a table with single Column and row. To add more columns you need to add more dimensions.
<table border=1><tr><td>Hi<td>Welcome to<td>PBT
</td></tr></table>

Now we have table with 3 column but with single row. lets add more items at bottom.

<table border=1><tr><td>Hi<td>Welcome to<td>PBT
</td></tr>
<tr><td>A New Row</td></tr></table>

Here we added a new row, with one column. And as you can clearly seen that there is a space left for two more columns. But what to do if we only have to add only one more column in the 2nd row which cover space of next two cells. For this we just need to add small attribute with new <td>
Recommended: Which Advantages Makes Blogger Better than Wordpress
 <table border=1><tr><td>Hi<td>Welcome to<td>PBT
</td></tr>
<tr><td>A New Row<td= colspan=2>With Double Cell</td></td></tr></table>
To make headings or to make text bold any where in table you just only need to use table header <th> instead of <td>
 <table border=1><tr><td>Hi<th>Welcome to<td>PBT
</td></tr>
<tr><td>A New Row<td= colspan=2>With Double Cell</td></td></tr></table>
Now, I can hope that you can create tables and use in blogger. I also created a basic structure for you friends so, you can also use it after copying and adding content.
 <table border=1>
<tr><th>11</th><th>12</th><th>13</th></tr>
<tr><td>21</td><td>22</td><td>23</td></tr>
<tr><td>31</td><td>32</td><td>33</td></tr>
</table> 

The tutorial is not end here. In next part we will use css and more tags and attributes to make blogger table more beautiful by adding background colors, borders, styles, etc. which will definitely suits your blogger template. Have a nice day.

No comments:

Post a Comment