HTML Table Color

This page contains HTML table color code. In other words, HTML codes for specifying or changing the color of your tables within your web page.

HTML table color is specified using Cascading Style Sheets (CSS).

Change Table Background Color

To change the background color of a table, use the CSS background-color property.

The following example sets the background color for the whole table. You can also set the background color of a table row and an individual table cell.

To do this, see HTML Table Background Color.

Example:

Code	Result
<table style="background-color:lightblue;"> <tr> <th>Table header</th><th>Table header</th> </tr> <tr> <td>Table cell 1</td><td>Table cell 2</td> </tr> </table>	Table header Table header Table cell 1 Table cell 2

Change Color of Text in Table

To change the color of the text inside the table, you need to use the CSS color property. As with the background-color property, you can apply this against the whole table, a single row, or a single cell.

Example:

Code	Result
<table style="background-color:lightblue;"> <tr style="background-color:blue;color:white;"> <th>Table header</th><th>Table header</th> </tr> <tr> <td>Table cell 1</td><td>Table cell 2</td> </tr> </table>	Table header Table header Table cell 1 Table cell 2

Table Border Color

To change the color of the border, you need to use one of the CSS border properties. In most cases, the best one to use is the border property. You need to provide this property with 3 values: a value for the width of the border, a value for the style of border (solid, dotted, etc), and another for the color of the border.

You'll notice that the following example only has a border around the outside of the table. This is working correctly - you can apply the border property against the whole table, or against single cells.

There are a few considerations to take into account when doing this. See HTML table borders for a more detailed explanation of table borders.

Example:

Code	Result
<table style="border:3px solid olive;"> <tr> <th>Table header</th><th>Table header</th> </tr> <tr> <td>Table cell 1</td><td>Table cell 2</td> </tr> </table>	Table header Table header Table cell 1 Table cell 2

About HTML Colors

The examples on this page use basic color names to define the color to be used. HTML/CSS provides several different means of defining color. Here are some useful links to help you pick a color for your table:

• HTML Color
• HTML Color Picker
• HTML Color Names
• Hex Color Codes

Enjoy this page?

2. Link to this page (copy/paste into your own website or blog):
   <a href="http://www.quackit.com/html/codes/tables/html_table_color.cfm">HTML Table Color</a> from Quackit.com
3. Link to Quackit using one of these banner ads.

Thanks for supporting Quackit!