Table cell colors html

HTML Tag

A simple HTML table, with two rows and four table cells:

More «Try it Yourself» examples below.

Definition and Usage

An HTML table has two kinds of cells:

The text in elements are bold and centered by default.

Browser Support

Attributes

Attribute	Value	Description
colspan	number	Specifies the number of columns a cell should span
headers	header_id	Specifies one or more header cells a cell is related to
rowspan	number	Sets the number of rows a cell should span

Global Attributes

Event Attributes

More Examples

Example

Example

How to add background-color to table cell (with CSS):

Example

How to set the height of a table cell (with CSS):

Example

How to specify no word-wrapping in table cell (with CSS):

Example

Example

How to set the width of a table cell (with CSS):

Example

How to create table headers:

Example

How to create a table with a caption:

Example

How to define table cells that span more than one row or one column:

Related Pages

Default CSS Settings

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Table Color

This page demonstrates how to set the table color within your web pages and other HTML documents.

In HTML, table color is defined using Cascading Style Sheets (CSS). You can change the color of the whole table, part of the table (eg, table cells or table borders), and the text within the table cells.

The CSS property to use will depend on which element you’re changing the color of. For example, to change the background color, you need to use the background-color property. To change the color of the text within the table, simply use the color property.

Below are some examples of applying a table border in HTML.

Table Background Color

You can use the CSS background-color property to change the background color of the whole table.

Table Row Color

You can change the background color of a table row:

Table Cell Background Color

You can change the background color of an individual table cell:

Table Text Color

You can change the color of text within a table. To change the color of the text within the table, you need to use the color property. By the way, you don’t need to apply this element against each piece of text — you can apply it to the whole table.

In this example, I change the color of the text to black, but I also change the table header text to white:

Table Border Color

You can set a table border and change its color too. To do this, you can use the border property. You also need to specify how wide the border is and what style.

In the following example, we use CSS classes to set the border color and other properties against the table and its cells.

Table Color with CSS Classes

You should use CSS classes where ever possible when setting styles for your HTML documents. You can define these classes in an embedded style sheet or external style sheet.

Here’s an example of using an embedded style sheet to define the styles of your HTML tables. Note that the styles are set in between the opening and closing tags.

Источник

Colorizing a HTML Table

In this post you will be shown how you can edit the font color and the background color of the cells as you wish.

In order to make a HTML table visually appealing, you can colorize it. In this post you will be shown how you can edit the font color and the background color of the cells as you wish.

For example, I added a table of the current Formula1 team standings down below. To recognize the teams more easily, I colorized the cells in the team colors.

Additionally, I changed the font color of «Ferrari» and «Red Bull» to white, in order to get a better contrast.

Team	Points
Mercedes	438
Ferrari	288
Red Bull	244

The HTML code for this table looks like this:

 
 
Team
 
Points
 
 
Mercedes
 
438
 
 
Ferrari
 
288
 
 
Red Bull
 
244
 
 
 

Background color of the cell

In order to change the background color of a cell to silver, you have to change the brackets to . After that, you enter the regular text that should be displayed in the cell.

Font color

Changing the font color to white demands changing the brackets to . In the given example this was combined with a new background color. Several attributes are seperated by blank characters:

HTML color codes

The colors in HTML can be adressed in different ways. On one hand it is possible to just name the color, like «silver» or «darkblue». This works well, but results in a relatively small color palette.

It is also possible to use HTML color codes. This way, the color can be defined exactly, like I did above with «Ferrari». In this case it is not simply «red», but the color code #DF0101. On the website HTML-Color-Codes you can get the color code for any color.

Источник

Coloring CSS Tables

The previous chapter covered how to change the basic styles of the table using CSS. In this chapter we are going to a give more styles to the tables using CSS. Once you create the structure of the table in the markup, its easy to adding a layer of style to customize its appearance.

CSS Table Background color

The CSS background-color property allows you to color background of a table, row and cells.

The above code color the background of each row as green color and foreground color as white.

Source Code

How to color specific row in a CSS Table

You can use the tr:nth-child(rownumber) to color a particular row in a table using CSS.

Above code select the 3 row from top (including table head row) and color background as green and foreground as white.

CSS Code

Applied this CSS code to the Example 1 HTML Table

How to color specific column in a CSS Table

You can give background color to specific column by suing td:nth-child(columnnumber) .

Above code color the first coloumn background color as Orange.

CSS Code

Applied this CSS code to the Example 1 HTML Table

How to color CSS Table cell only

The following source code shows how to color a particular cell in a table using CSS.

CSS Table Alternate row coloring

You can use tr:nth-child(rowOrder) to give alternating row color to a Table using CSS. The rowOrder must be «odd» or «even».

Above code color every even row order to background color as orange.

CSS Code

Applied this CSS code to the Example 1 HTML Table

For CSS table alternate column coloring you can use the CSS code like the following.

Above code color alternate column to Orange background.

CSS Table Color first column and first row

Using a simple technique, you can color the first row and first column of a CSS table.

Источник

HTML Table Background Color

This page contains HTML table background color code. These are HTML codes for specifying or changing the background color of your tables within your blog or web page.

In HTML, table background color is specified using Cascading Style Sheets (CSS). In particular, you use the CSS background-color property to set the background color for your table. You can also specify a separate background color for your table rows and table cells if you like.

Background Color for the Whole Table

To change the background color of the whole table, use the background-color property against the table tag.

Background Color of a Table Row

To change the background color of a table row, you apply the same code, but to the table row in question (i.e. the tr tag).

Here we also use border-collapse:collapse; to collapse the border.

Background Color of a Single Cell

To change the background color of a single table cell, you apply the same code, but to the table cell in question (i.e. the td tag or the th tag, depending on whether the cell is a normal table data row or part of a table header).

Using Classes

The above examples use inline style sheets to set the CSS properties. This is only because it makes it easier for demonstration purposes. I strongly encourage you to use a CSS class defined in an external style sheet to set your styles. Even embedded style sheets are usually better than inline.

Here’s an example of setting the table’s background color and other properties using a CSS class.

Источник