Alternate table row color using CSS

In this tutorial we are going to learn how we can implement alternate colors to our table rows. So here is the code i implement in css to get the required table output.

table {
    border-collapse: collapse;
    width: 400px;
    border:1px solid #000;
}
  
th, td {
    text-align: left;
    padding: 8px;
}
  
tr:nth-child(even) {
    background-color: lightgrey;
}

Lets me show you the output of the above code and then we will discuss what is responsible for what purpose.

Lets discuss the code now.

inside table code we used border-collapse: collapse; this is used to make single border instead of default separate borders.

tr:nth-child(even) { background-color: lightgrey; } — tr is responsible for rows and in this code we used nth-child (even) this will make every even number row give background-color. If we give ” odd ” instead of ” even ” then colors will set to 1,3,5,7 and so on to rows. 

That’s it. I hope this tutorial helps our reader to understand how to give colors to table.