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 Code | Result |
|---|
| Table Header | Table Header | | Table cell 1 | Table cell 2 | | Table cell 3 | Table cell 4 | | | Table Header | Table Header | | Table cell 1 | Table cell 2 | | Table cell 3 | Table 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 Code | Result |
|---|
| Table Header | Table Header | | Table cell 1 | Table cell 2 | | Table cell 3 | Table cell 4 | | | Table Header | Table Header | | Table cell 1 | Table cell 2 | | Table cell 3 | Table 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 Code | Result |
|---|
| Table Header | Table Header | | Table cell 1 | Table cell 2 | | Table cell 3 | Table cell 4 | | | Table Header | Table Header | | Table cell 1 | Table cell 2 | | Table cell 3 | Table 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 Code | Result |
|---|
| Table Header | Table Header | | Table cell 1 | Table cell 2 | | Table cell 3 | Table cell 4 | | | Table Header | Table Header | | Table cell 1 | Table cell 2 | | Table cell 3 | Table 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 Code | Result |
|---|
| Table Header | Table Header | | Table cell 1 | Table cell 2 | | Table cell 3 | Table cell 4 | | | Table Header | Table Header | | Table cell 1 | Table cell 2 | | Table cell 3 | Table cell 4 | |