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