How to color table using CSS

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.

tr { background-color:green; color:white; }

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

css html table background color

Source Code

<!DOCTYPE html> <html> <head> <style> table,th,td { border:2px solid red; } table { border-collapse:collapse; width:20%; } td { height:40px; } tr { background-color:green; color:white; } th { background-color:yellow; color:black; } </style> </head> <body> <table> <tr> <th>Roll No</th> <th>Name</th> <th>Team</th> </tr> <tr> <td>1001</td> <td>John</td> <td>Red</td> </tr> <tr> <td>1002</td> <td>Peter</td> <td>Blue</td> </tr> <tr> <td>1003</td> <td>Henry</td> <td>Green</td> </tr> </table> </body> </html>

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.

tr:nth-child(3) { background-color: green; color:white; }

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

css html table color selected row

CSS Code
<style> table,th,td { border:2px solid red; } table { border-collapse:collapse; width:20%; } td { height:40px; } tr:nth-child(3) { background-color: green; color:white; } th { background-color:yellow; color:black; } </style>

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) .

td:nth-child(1) { background-color: orange; }

Above code color the first coloumn background color as Orange.

css html table color selected column

CSS Code

<style> table,th,td { border:2px solid red; color:white; } table { border-collapse:collapse; width:20%; } th { background-color: maroon; } td { height:40px; } td:nth-child(1) { background-color: orange; } td:nth-child(2) { background-color: blue; } td:nth-child(3) { background-color: green; } </style>

Applied this CSS code to the Example 1 HTML Table

How to color CSS Table cell only

css html table color selected cell

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

<!DOCTYPE html> <html> <head> <style> table,th,td { border:2px solid black; } table { border-collapse:collapse; width:20%; color:black; } td { height:40px; } #orange { background-color: orange; } </style> </head> <body> <table> <tr> <th>Roll No</th> <th>Name</th> <th>Team</th> </tr> <tr> <td>1001</td> <td>John</td> <td>Red</td> </tr> <tr> <td>1002</td> <td id="orange">Peter</td> <td>Blue</td> </tr> <tr> <td>1003</td> <td>Henry</td> <td>Green</td> </tr> </table> </body> </html>

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"

tbody tr:nth-child(even) { background: orange; }

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

css html table alternate row coloring

CSS Code

<style> table,th,td { border:2px solid green; } table { border-collapse:collapse; width:20%; } td { height:30px; } tbody tr:nth-child(even) { background: orange; } </style>

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..

tbody td:nth-child(even) { background: orange; }

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.

css html table first row first column coloring

Full Source Code

<!DOCTYPE html> <html> <head> <style> th { background: orange; height:30px; } table,th,td { border:2px solid green; } table { width:30%; color:black; text-align:center; } </style> </head> <body> <table> <tr> <th>Sr. No</th> <th>Roll No</th> <th>Name</th> <th>Team</th> </tr> <tr> <th>1</th> <td>1001</td> <td>John</td> <td>Red</td> </tr> <tr> <th>2</th> <td>1002</td> <td>Peter</td> <td>Blue</td> </tr> <tr> <th>3</th> <td>1003</td> <td>Henry</td> <td>Green</td> </tr> </table> </body> </html>