html table 灰色,HTML Table Color

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.

Run

Stack editor

Unstack editor

Example

.myTable1 {

width:100%;

text-align: left;

background-color: gold;

}

Header	Header
Table cell	Table cell
Table cell	Table cell
Table cell	Table cell

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.

Run

Stack editor

Unstack editor

Example

.myTable2 {

width:100%;

text-align: left;

background-color: olive;

color: white;

}

Header	Header
Table cell	Table cell
Table cell	Table cell
Table cell	Table cell

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.

Run

Stack editor

Unstack editor

Example

.myTable3 {

width:100%;

text-align: left;

background-color: gold;

border: 10px solid yellowgreen;

border-radius: 5px;

}

Header	Header
Table cell	Table cell
Table cell	Table cell
Table cell	Table cell

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: