Make HTML Table with Background Colors in BlogSpot

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

1 Create HTML Tables 2 [a href="http://www.mybloggertricks.com/2011/09/change-border-color-and-size-of-html.html" target="_blank"]Change Border Colors Of Tables[/a] 3 [a href="http://www.mybloggertricks.com/2011/09/make-colorful-tables-in-blogspot.html" target="_blank"]Make Colorful Tables[/a]

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

Source: http://www.mybloggertricks.com/2011/09/make-html-table-with-background-colors.html