A+ A-
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. :>
 
Top