07 July 2011

How to insert simple HTML tables to Blogger posts/siderbar?

Advertisements

Most of you want to add one or more tables to their posts or to sidebar. From w3schools I got simple solution about it as follows:

To add the table to post go to New Post and click on Edit HTML next to Compose. And add following code there.

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

You will get following Table




Explanation of Tags

<table> - It defines a table.

<table border="1"> - it is the border of the table. Setting it to 0 result in no border. For more thick border you can change values to 5, 10 or more.

<tr> - table row

<td> - table cell


Adding More Rows to a table

To add more rowss to the table add the following code ABOVE </table>

<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
row 2, cell 1 row 2, cell 2
row 2, cell 1 row 2, cell 2
row 2, cell 1 row 2, cell 2


Adding More Columns to a table

Following is the row code

<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>

When you add

<td>row , cell </td> to just between the <tr> </tr> then you will add one more column/cell to that row.

row 1, cell 1 row 1, cell 2 row 2, cell 1
row 2, cell 1 row 2, cell 1 row 2, cell 2


Table Headers

<th> </th> defines the table headers as follows:

<table border="1">
<tr>
<th>Name</th>
<th>Phone</th>
</tr>
<tr>
<td>Mr. Cool Dude</td>
<td>420 00 420</td>
</tr>
</table>

Name Phone
Mr. Cool Dude 420 00 420

Following the example of vertical header

<table border="1">
<tr>
<th>Name:</th>
<td>Mr. Cool Dude</td>
</tr>
<tr>
<th>Phone:</th>
<td>420 77 420</td>
</tr>
</table>

Name: Mr. Cool Dude
Phone: 420 77 420


Split a cell into two columns

<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Phone</th>
</tr>
<tr>
<td>James Bond</td>
<td>770 00 007</td>
<td>700 00 777</td>
</tr>
</table>

Name Phone
 James Bond   770 00 007  700 00 777


Split a cell into two rows

<table border="1">
<tr>
<th>Name:</th>
<td>James Bond</td>
</tr>
<tr>
<th rowspan="2">Phone:</th>
<td>007 00 786</td>
</tr>
<tr>
<td>998 13 007</td>
</tr>
</table>

Name:  James Bond 
 Phone:  007 00 786
 998 13 007


Align (left, right, central) attribute

<table border="1" align="right">

</table>


Cellpading

It defines the space between the cell wall and the cell content.

<table border="1" cellpadding="10">
<tr>
<th>Name</th>
<th>Rank</th>
</tr>
<tr>
<td>James</td>
<td>701</td>
</tr>
</table>

Name Rank
James 701


Cellspacing

It specifies the space between the cells.

<table border="1" cellspacing="10">
<tr>
<th>Name</th>
<th>Rank</th>
</tr>
<tr>
<td>James</td>
<td>701</td>
</tr>
</table>

Name Rank
James 701


Width of table

<table border="1" width="300">
<tr>
<th>Name</th>
<th>Rank</th>
</tr>
<tr>
<td>James</td>
<td>701</td>
</tr>
</table>

Name Rank
 James  701



Adding Background color or image to a table

<table border="1" style="background-color:yellow">
<tr>
<th>Name</th>
<th>Rank</th>
</tr>
<tr>
<td>James</td>
<td>701</td>
</tr>
</table>

Name Rank
James 701

Image

<table border="1" style="background-image:url('http://4.bp.blogspot.com/_tbHfaj1A058/TAZg5JDDHaI/AAAAAAAAK6Y/8XByLv0e-5U/s320/logo.png')">
<tr>
<th>Name</th>
<th>Rank</th>
</tr>
<tr>
<td>James</td>
<td>701</td>
</tr>
</table>

Name Rank
 James  701
  Lara  213


Table Style
The table will appear different on your blog depending upon the table style added into your template. You can change table style. Go to Edit HTML and look for post table{
You will get

.post table{
border-collapse:separate;
text-align: none;
margin: 1 1px;
}

.post table,th, td{
border: 1px solid #ccc;
}

You can use two values for "border-collapse" -- collapse or separate

If the table style is not present then add above code ABOVE ]]></b:skin>

So this is all about adding a table to Blogger. If you face any problem you can ask it using the comments. Or you can join our Blogger group on Facebook.

Related Posts

1 comment

July 7, 2011 at 7:55 AM

thanks its useful for me

Post a Comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More