Table Background Color

This tutorial reveals how change the background colors in a table by adding an inline style sheet to Tables (table) and Table Data Cells (td).

Start with any HTML table such as this example with existing content:

Add the style attribute to the Table, Table Data Cell or both:

Add the CSS background-color: property:

Add a hex color value to the background-color: property:

In this example, we are using colors from the DarkOrchid range.

Output

#9932CC
#6B248E	#EFCFFE	#DF9FFE

Additional Formatting

Additional formatting can be achieved by adding more style rules. Pay special attention to the color: property and how it is used to change font colors.

Output

#9932CC
#6B248E	#EFCFFE	#DF9FFE

Tip

If many tables are to be styled the same, it is better to create an external style sheet and declare style rules with the class attribute. This way, if you ever want to change the colors, font sizes etc, you only need to change one file to make changes accross your entire web site.