In this post, we will learn how to change the table row background color alternatively using CSS. If we want to show table more attractive and more readable then we highlight the table row alternatively. How we can do this, we will learn in this post.


How To Change Table Row Background Color Alternatively Using CSS ?


Change The Table Row Background Color Alternatively

To change the table row background color alternatively we use :nth-child(n) selector. We also call it pseudo-class. This pseudo-class takes an argument. We can change this argument according to our requirement like n, 2n, 3n, 2n+1 etc. For change the table row background color alternatively we take an argument 2n. 


We follow the following steps to change the table row background color alternatively:


Step 1: In this step we write HTML code.


<!DOCTYPE html>
<html>
<head>
<title>How To Change The Table Row Background Color Alternatively Using CSS ?</title>
<style>

/*Paste CSS code here...*/

</style>
</head>
<body>

<table>

<tr>
<th>No.</th>
<th>First Column</th>
<th>Second Column</th>
<th>Third Column</th>
</tr>

<tr>
<td>1</td>
<td>First Row 1</td>
<td>First Row 2</td>
<td>First Row 3</td>
</tr>

<tr>
<td>2</td>
<td>Second Row 1</td>
<td>Second Row 2</td>
<td>Second Row 3</td>
</tr>

<tr>
<td>3</td>
<td>Third Row 1</td>
<td>Third Row 2</td>
<td>Third Row 3</td>
</tr>

</table>

</body>
</html> code-box

Step 2: Now we write CSS code.


table{
border-collapse: collapse;
border: 1px solid #888;
}

table tr{
border-bottom: 1px solid #ddd;
}

table tr:last-child{
border-bottom: none;
}

table tr:nth-child(2n){
background: #f1f1f1;
}

table th, table td{
padding: 15px;
} code-box


Put this CSS code in HTML code and then our zebra-stripped color table is ready.



Summary

In this post we learned how to change the table row background color alternatively using CSS. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts.

Post a Comment

Previous Post Next Post