Table Background Color

This page demonstrates how to set the table background color within your web pages and other HTML documents. You can use the same colors presented here, or use any background color you like, as long as the color is specified in a way that is recognized by HTML.

In HTML, table background color is defined using Cascading Style Sheets (CSS). Specifically, you use the background-color property to define background color. You can apply this property against the whole table, a row, or a single cell.

Below are some examples of applying background color to a table in HTML.

Background Color for Whole Table

Source CodeResult
Table HeaderTable Header
Table cell 1Table cell 2
Table cell 3Table cell 4

Background Color for Table Row

Here, we add a different background color to the first row, which happens to be the table header row. Therefore, we have one background color for the table, and a different background color for the table header row. Note that we also change the text color for the table header - this makes it easier to read.

Source CodeResult
Table HeaderTable Header
Table cell 1Table cell 2
Table cell 3Table cell 4

Background Color for Table Cell

You can also change the background color of an individual table cell. To do this, simply apply the styles against the <td> tag of the table cell in question.

Source CodeResult
Table HeaderTable Header
Table cell 1Table cell 2
Table cell 3Table cell 4

Using CSS Classes

It's good practice to keep your CSS separate from the table when setting its styles. For example, you can define all your styles at the top of your HTML document or even in a separate CSS file. When you do this, you can create a "class" that holds all the styles for your table (or any other element). Then, to use these styles, you simply add class="{class name}" where {class name} is the name of your class.

Here's an example of using an embedded style sheet to define the background color of your HTML tables. Note that the styles are set in between the <style></style> tags.

Source CodeResult
Table HeaderTable Header
Table cell 1Table cell 2
Table cell 3Table cell 4

Here's another example, but this one's using a different set of styles, including a different background color for the table and the table header.

You'll notice that we've also modified the bottom border of each table cell and changed the font family within each table cell (but not the table headers).

Source CodeResult
Table HeaderTable Header
Table cell 1Table cell 2
Table cell 3Table cell 4

About HTML.am

HTML.am was created in order to provide HTML tools, codes, tutorials, and other resources to help webmasters create and maintain their HTML documents.

HTML.am aims primarily at beginners, but may also be useful to web professionals.

About the HTML Codes

The HTML codes on this website are provided free of charge, for you to use however you wish. Feel free to modify the code to suit your own needs.

Need Hosting?

Our partner site ZappyHost provides website hosting, domain names and related products at some of the best prices on the web. If you need web hosting, check them out!