Make HTML Table with Background Colors in BlogSpot


html table background colorsSo far we learnt how to create HTML tables then we learnt on how to style border colour and border size of tables in blogger, and now we will do the last thing and that is adding background colors to HTML Tables to make it stand out. The steps are extremely simply if you have already read the previous two tutorials. Lets start playing with some more CSS.

Add Background Colors To Tables

A customized HTML Table with neat borders and two rows and two columns would have the following coding,

<table style="border:1px solid #ddd;" cellspacing="0" cellpadding="2" width="400"><tbody>

<tr>
<td style="border-right:1px solid #ddd; border-bottom:1px solid #ddd;" >Row 1, Column 1</td>

<td style="border-bottom: #ddd 1px solid; >Row 1, Column 2</td>
</tr>

<tr>
<td style="border-right:1px solid #ddd;">Row 2, Column 1</td>

<td>Row 2, Column 2</td>
</tr>

</tbody></table>

 

To add background color to any cell we just need to make a little modification to the code, as shown below,

<table style="border:1px solid #ddd;" cellspacing="0" cellpadding="2" width="400"><tbody>

<tr>
<td style="background:#FE6602; border-right:1px solid #ddd; border-bottom:1px solid #ddd;" >Row 1, Column 1</td>

<td style="background:#666666; border-bottom: #ddd 1px solid;" >Row 1, Column 2</td>
</tr>

<tr>
<td style="background:#2681AC; border-right:1px solid #ddd;">Row 2, Column 1</td>

<td style="background:#FE0000; ">Row 2, Column 2</td>
</tr>

</tbody></table>

OUTCOME:

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

The only code I substituted was background:#color; and the rest was all same what we already discussed in yesterday's tutorial of changing border size and color.

As you can see there is nothing so difficult about it. You just need to add a color to each cell i.e. <td> and style it. Now lets create a dummy and more good looking HTML table using blogger editor tools also. You can highlight the text inside a table to further edit it using your blogger editor or windows live writer.

No.

Table Style

1 Create HTML Tables
2 Change Border Colors Of Tables
3 Make Colorful Tables

Need Help?

If you faced any difficulty in creating and designing these tables then please do not hesitate to let me know. I just hope you find this tutorial useful and easy to implement. Have fun buddies. :>

Need Quick Help within 24 Hours? ASK NOW



If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

5 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

  1. Hi Bro its great but i want to ask you some question, i've make a menu horisontal-vertical sub with css3 menu but when i add in my blogger, the vertical menu not appear. please help me.
    Thank You.

    ReplyDelete
  2. @fAchrul

    Did you try our menus?
    http://www.mybloggertricks.com/2010/01/25-vertical-navigation-menus-for.html

    ReplyDelete
  3. okey i will try but i think i'll succed or nope.. every menu vertikal or horisontal its i install not working properly. i hope this worked. Thanks Brother.

    ReplyDelete
  4. Can I set width for each column?

    ReplyDelete