- HTML Table Color
- Change Table Background Color
- Change Color of Text in Table
- Table Border Color
- About HTML Colors
- Related
- Colorizing a HTML Table
- Background color of the cell
- Font color
- HTML color codes
- HTML Table Background Color
- Background Color for the Whole Table
- Background Color of a Table Row
- Background Color of a Single Cell
- Using Classes
- Coloring CSS Tables
- CSS Table Background color
- Source Code
- How to color specific row in a CSS Table
- CSS Code
- How to color specific column in a CSS Table
- CSS Code
- How to color CSS Table cell only
- CSS Table Alternate row coloring
- CSS Code
- CSS Table Color first column and first row
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.
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.
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.
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:
Related
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.
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.
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.