How to set alternate table row color using CSS?
To set alternate table row colors using CSS, utilize the :nth-child() pseudo-class to target even and odd rows. Apply background-color styles to each row accordingly, ensuring readability and enhancing the visual presentation of tabular data.
Using the :nth-child() pseudo-class
The :nth-child() selector in CSS is used to match the elements based on their position in a group of siblings. It matches every element that is the nth-child.
Syntax:
:nth-child(number) {
// CSS Property
}
Where number is the argument that represents the pattern for matching elements. It can be odd, even or in a functional notation.
- odd: It represents the elements whose position is odd in a series: 1, 3, 5, etc.
Syntax:
element:nth-child(even)
- even: It represents the elements whose position is even in a series: 2, 4, 6, etc.
Syntax:
element:nth-child(odd)
Example 1: In this example we sets alternate table row colors using CSS. It applies a light green background to even rows, enhancing readability and visual organization of the table content.
<!DOCTYPE html>
<html>
<head>
<!-- CSS style to set alternate table
row using color -->
<style>
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: Lightgreen;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Designation</th>
<th>Salary</th>
</tr>
<tr>
<td>Steve</td>
<td>Manager</td>
<td>1,00,000</td>
</tr>
<tr>
<td>SURAJ</td>
<td>Assistant Manager</td>
<td>50,000</td>
</tr>
<tr>
<td>Khushboo</td>
<td>Analysist</td>
<td>65,000</td>
</tr>
<tr>
<td>Kartik</td>
<td>Worker</td>
<td>20,000</td>
</tr>
<tr>
<td>Saksham</td>
<td>Worker</td>
<td>20,000</td>
</tr>
</table>
</body>
</html>
Output:
Example 2: In this example we CSS to set alternate row colors in a table. Odd-numbered rows have a light green background, providing visual distinction and improving readability of the table content.
<!DOCTYPE html>
<html>
<head>
<title>
Set alternate row in table
</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
text-align: left;
padding: 8px;
}
tr:nth-child(odd) {
background-color: Lightgreen;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Designation</th>
<th>Salary</th>
</tr>
<tr>
<td>Steve</td>
<td>Manager</td>
<td>1, 00, 000</td>
</tr>
<tr>
<td>SURAJ</td>
<td>Assistant Manager</td>
<td>50, 000</td>
</tr>
<tr>
<td>Khushboo</td>
<td>Analysist</td>
<td>65, 000</td>
</tr>
<tr>
<td>Kartik</td>
<td>Worker</td>
<td>20, 000</td>
</tr>
<tr>
<td>Saksham</td>
<td>Worker</td>
<td>20, 000</td>
</tr>
</table>
</body>
<html>
Output:
Supported Browser: