Make HTML Table with Background Colors in BlogSpot

So 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. :>

SHARES

Share

Pin it

Tweet

Share

Share

Print

Buffer

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 »

Mohammad 9/10/2011