Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to set alternate table row color using CSS?
Setting alternate table row colors using CSS, also known as zebra striping, improves table readability by making it easier to distinguish between rows. This technique is essential for creating professionallooking data tables.
Syntax
/* Using nth-child selector */
tr:nth-child(even) {
background-color: color;
}
tr:nth-child(odd) {
background-color: color;
}
Method 1: Using nth-child Selector
The nth-child() selector is the most popular method for creating zebra striping. It selects elements based on their position among all sibling elements
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
th {
background-color: #2c3e50;
color: white;
padding: 12px;
text-align: left;
}
td {
padding: 12px;
border: 1px solid #ddd;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:nth-child(odd) {
background-color: #ffffff;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Department</th>
<th>Salary</th>
</tr>
<tr>
<td>John Smith</td>
<td>Engineering</td>
<td>$75,000</td>
</tr>
<tr>
<td>Sarah Johnson</td>
<td>Marketing</td>
<td>$65,000</td>
</tr>
<tr>
<td>Mike Davis</td>
<td>Sales</td>
<td>$55,000</td>
</tr>
<tr>
<td>Lisa Brown</td>
<td>HR</td>
<td>$60,000</td>
</tr>
</table>
</body>
</html>
A table with alternating row colors appears: header row is dark blue, odd rows are white, and even rows are light gray.
Method 2: Using nth-of-type Selector
The nth-of-type() selector works similarly but only considers elements of the same tag type
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
th, td {
padding: 12px;
border: 1px solid #ddd;
text-align: center;
}
th {
background-color: #34495e;
color: white;
}
tr:nth-of-type(even) {
background-color: #ecf0f1;
}
tr:nth-of-type(odd) {
background-color: #ffffff;
}
</style>
</head>
<body>
<table>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>Laptop</td>
<td>$999</td>
</tr>
<tr>
<td>Mouse</td>
<td>$25</td>
</tr>
<tr>
<td>Keyboard</td>
<td>$75</td>
</tr>
</table>
</body>
</html>
A product table with alternating colors: header is dark gray, data rows alternate between white and light gray backgrounds.
Method 3: Using Class Selectors
This manual approach uses custom classes for more control over styling
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
th, td {
padding: 12px;
border: 1px solid #ddd;
}
th {
background-color: #27ae60;
color: white;
}
.odd-row {
background-color: #e8f5e9;
}
.even-row {
background-color: #c8e6c9;
}
</style>
</head>
<body>
<table>
<tr>
<th>City</th>
<th>Population</th>
</tr>
<tr class="odd-row">
<td>New York</td>
<td>8.4 million</td>
</tr>
<tr class="even-row">
<td>Los Angeles</td>
<td>4.0 million</td>
</tr>
<tr class="odd-row">
<td>Chicago</td>
<td>2.7 million</td>
</tr>
</table>
</body>
</html>
A city population table with green-themed alternating row colors and manual class-based styling.
Method 4: Using :not() Selector
The :not() pseudo-class excludes specific elements from selection
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
th, td {
padding: 12px;
border: 1px solid #ddd;
text-align: center;
}
th {
background-color: #e74c3c;
color: white;
}
tr:not(:first-child):not(:nth-child(odd)) {
background-color: #fadbd8;
}
tr:not(:nth-child(even)) {
background-color: #ffffff;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Course</th>
<th>Duration</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML</td>
<td>2 weeks</td>
</tr>
<tr>
<td>CSS</td>
<td>3 weeks</td>
</tr>
<tr>
<td>JavaScript</td>
<td>6 weeks</td>
</tr>
</tbody>
</table>
</body>
</html>
A course table with red header and alternating white and light pink row colors using the :not() selector approach.
Conclusion
CSS provides multiple methods for creating alternate table row colors. The nth-child(even/odd) approach is most commonly used due to its simplicity and automatic application. Choose the method that best fits your project's requirements and maintainability needs.
11K+ Views
