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 style="background-color:#FFFFE0;">
<tr>
<th>Table Header</th><th>Table Header</th>
</tr>
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td><td>Table cell 4</td>
</tr>
</table>

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 style="background-color:#FFFFE0;">
<tr style="background-color:#BDB76B;color:#ffffff;">
<th>Table Header</th><th>Table Header</th>
</tr>
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td><td>Table cell 4</td>
</tr>
</table>

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 style="background-color:#FFFFE0;">
<tr style="background-color:#BDB76B;color:#ffffff;">
<th>Table Header</th><th>Table Header</th>
</tr>
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td><td style="background-color:#ff0000;">Table cell 4</td>
</tr>
</table>

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

<!-- Start Styles. Move the 'style' tags and everything between them to between the 'head' tags -->
<style type="text/css">
.myTable { background-color:#eee;border-collapse:collapse; }
.myTable th { background-color:#000;color:white;width:50%; }
.myTable td, .myTable th { padding:5px;border:1px solid #000; }
</style>
<!-- End Styles -->
<table class="myTable">
<tr>
<th>Table Header</th><th>Table Header</th>
</tr>
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td><td>Table cell 4</td>
</tr>
</table>

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

<!-- Start Styles. Move the 'style' tags and everything between them to between the 'head' tags -->
<style type="text/css">
.myOtherTable { background-color:#FFFFE0;border-collapse:collapse;color:#000;font-size:18px; }
.myOtherTable th { background-color:#BDB76B;color:white;width:50%; }
.myOtherTable td, .myOtherTable th { padding:5px;border:0; }
.myOtherTable td { font-family:Georgia, Garamond, serif; border-bottom:1px dotted #BDB76B; }
</style>
<!-- End Styles -->
<table class="myOtherTable">
<tr>
<th>Table Header</th><th>Table Header</th>
</tr>
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td><td>Table cell 4</td>
</tr>
</table>

Table Header	Table Header
Table cell 1	Table cell 2
Table cell 3	Table cell 4