Customizing Tables in Blogger Post

Yesterday, I wrote an article about Adding Tables in Blogger Post Editor and it features only the basic components of an HTML Tables. To make it more lively in appearance, it is advisable to add a little css codes on it. Now, I will show on how to add colors to your table borders and to its background.

Customizing Tables in Blogger Post


Step 1. Go to your Blogger Post Editor or Create New Post
Step 2. Copy and paste the code below to your Blogger Post Editor page (switch it on HTML mode).

<table cellpadding="0" cellspacing="0" style="border: 5px solid #158aee; width: 400px;"><tbody>
<tr>
      <td style="background: blue; border-bottom: 5px solid #FF0000; border-right: 5px solid #FF0000;">Row 1, Column 1</td>
      <td style="background: #D703FC; border-bottom: 5px solid #FF0000; border-right: 5px solid #FF0000;">Row 1, Column 2</td>
      <td style="background: #3BE21D; border-bottom: 5px solid #FF0000;">Row 1, Column 3</td>
</tr>
<tr>
      <td style="background: #A77C58; border-right: 5px solid #FF0000;">Row 2, Column 1</td>
      <td style="background: #F6FF00; border-right: 5px solid #FF0000;">Row 2, Column 2</td>
      <td style="background: #FCFFA3;">Row 2, Column 3</td>
</tr>
</tbody></table>

The above codes will create a type of table below:

Row 1, Column 1 Row 1, Column 2 Row 1, Column 3
Row 2, Column 1 Row 2, Column 2 Row 2, Column 3

We will take a closer shot on the above codes:
  • The tag style="border: 5px solid #158aee represents the style i.e. border around the table which is 5px solid in size and 158aee in color. You can select border styles here.
  • In the first cell (Row 1, Column1) and second cell  (Row 1, Column 2) we only styled the border bottom and border right  because they are covered by table outside main border. 
  •  In the third cell (Row 1 Column 3) we only styled the border bottom because it is being style by neighboring lines and main outside borders.
  • In the fourth cell (Row 2, Column 1) and fifth cell (Row 2 Column 2), it is only styled in both in border right because it is also influenced by the neighboring lines or borders respectively.
  • And lastly in the sixth cell (Row 2,Column 3), we did not apply any border style because it is also covered by other neighboring border cells.
  • Be careful in Adding Border Styles to each table cell because the border(s) of the other cell will be affected and cause  overlapping of the borders as shown below. 

  • Row 1, Column 1 Row 1, Column 2 Row 1, Column 3
    Row 2, Column 1 Row 2, Column 2 Row 2, Column 3

    The last cell (Row 2, Column 3) has two top borders because I add a css style which is border-top: 5px solid #176D87 that is not necessary.
  • If you want to change the background color of each cell, just replace the hexadecimal colors in each cell (it is preceded by the tag <td style="background:. You can choose a variety of hexadecimal colors here.
If there are still confuse or there are things which are not so clearly discussed, feel free to write us in the comment box below and we will try our very best to answer it.
Have a nice day to everyone and Enjoy !
Credits goes to mybloggertricks with some modifications from the author.


About the Author:
tilt  hover effect
Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
Follow him @ Twitter |Facebook

No comments :

Post A Comment!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

GOLDEN WORKS TV

Related Posts Plugin for WordPress, Blogger...