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.
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 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 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
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 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.
Full Source
<!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>