Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Set Alternate Table Row Color Using CSS
To set alternate table row color using CSS, is also known as zebra striping. It is helpful in improving the readability of table as it is easier to distinguish between rows.
In this article, we will be understanding four different approaches to set alternate table row color using CSS. We are having a 5*2 table, our task is to set alternate table row color using CSS.
Approaches to Set Alternate Table Row Color
Here is a list of approaches to set alternate table row color using CSS which we will be discussing in this article with stepwise explaination and complete example codes.
- Alternate Row Color Using nth-child Selector
- Alternate Row Color Using nth-of-type Selector
- Alternate Row Color Using class Selector
- Alternate Row Color Using not Selector
Alternate Row Color Using nth-child Selector
To set alternate table row color using CSS, we have used CSS nth-child() selector which selects elements based on their position among the children of their parent element.
- We have created a table using HTML table tag, we have created five rows using tr tag and one header using th tag, and used td tag to fill the table data.
- We have used element selectors to style our table like setting the width of the table, setting the background-color and text color of the heading and setting the padding, border and text-alignment of table data.
- We have used "tr:nth-child(even)" selector on tr which selects all the even rows and change it's background-color.
- We have used "tr:nth-child(odd)" selector on tr which selects all the odd rows and change it's background-color.
- We can also use mathematical expression like 2n for even and 2n+1 for odd rows instead of using even and odd in argument of nth-child selector.
Example
Here is a complete example code implementing above mentioned steps to set alternate table row color using CSS nth-child selector.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
To set alternate table row color using CSS
</title>
<style>
table {
width: 20%;
border-collapse: collapse;
}
th {
background-color: #04af2f;
color:white;
}
th,td {
padding: 10px;
border: 1px solid #ccc;
text-align: center;
}
tr:nth-child(even) {
background-color: #c8e6c9;
}
tr:nth-child(odd) {
background-color: #e8f5e9;
}
</style>
</head>
<body>
<h3>
To Set Alternate Table Row Color Using CSS
</h3>
<p>
In this example we have used <strong>nth-child
</strong> psuedo-class selector to set
alternate table row color using CSS.
</p>
<table>
<tr>
<th>Name</th>
<th>Phone</th>
</tr>
<tr>
<td>Ravi</td>
<td>7045689765</td>
</tr>
<tr>
<td>Amit</td>
<td>9876543210</td>
</tr>
<tr>
<td>Priya</td>
<td>9123456789</td>
</tr>
<tr>
<td>Sunil</td>
<td>8234567890</td>
</tr>
<tr>
<td>Neha</td>
<td>9654321098</td>
</tr>
</table>
</body>
</html>
Alternate Row Color Using nth-of-type Selector
In this approach, we have used CSS nth-of-type psuedo class selector which is similar to nth-child selector and matches elements based on their position among siblings of the same type (tag name).
- First we have created and designed a 5*2 table which is same as first approach.
- We have used "tr:nth-of-type(even)" which selects all tr tag and changes background-color of even rows.
- We have used "tr:nth-of-type(odd)" which selects all tr tag and changes background-color of odd rows.
Example
Here is a complete example code implementing above mentioned steps to set alternate table row color using CSS nth-of-type selector.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
To set alternate table row color using CSS
</title>
<style>
table {
width: 20%;
border-collapse: collapse;
}
th {
background-color: #04af2f;
color:white;
}
th, td {
padding: 10px;
border: 1px solid #ccc;
text-align: center;
}
tr:nth-of-type(even) {
background-color: #c8e6c9;
}
tr:nth-of-type(odd) {
background-color: #e8f5e9;
}
</style>
</head>
<body>
<h3>
To Set Alternate Table Row Color Using CSS
</h3>
<p>
In this example we have used <strong>nth-of-type
</strong> psuedo-class selector to set alternate
table row color using CSS.
</p>
<table>
<tr>
<th>Name</th>
<th>Phone</th>
</tr>
<tr>
<td>Ravi</td>
<td>7045689765</td>
</tr>
<tr>
<td>Amit</td>
<td>9876543210</td>
</tr>
<tr>
<td>Priya</td>
<td>9123456789</td>
</tr>
<tr>
<td>Sunil</td>
<td>8234567890</td>
</tr>
<tr>
<td>Neha</td>
<td>9654321098</td>
</tr>
</table>
</body>
</html>
Alternate Row Color Using class Selector
In this approach to set alternate table row color, we have used basic approach to use two classes i.e even and odd with each tr tag.
- First we have created and designed a 5*2 table which is same as first approach.
- Then we have used odd class to set the background-color of odd rows and even class for even rows.
Example
Here is a complete example code implementing above mentioned steps to set alternate table row color using CSS class selector.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
To set alternate table row color using CSS
</title>
<style>
table {
width: 20%;
border-collapse: collapse;
}
th {
background-color: #04af2f;
color:white;
}
th,td {
padding: 10px;
border: 1px solid #ccc;
text-align: center;
}
.odd {
background-color: #e8f5e9;
}
.even {
background-color: #c8e6c9;
}
</style>
</head>
<body>
<h3>
To Set Alternate Table Row Color Using CSS
</h3>
<p>
In this example we have used <strong>class
</strong> selector to set alternate table
row color using CSS.
</p>
<table>
<tr>
<th>Name</th>
<th>Phone</th>
</tr>
<tr class="odd">
<td>Ravi</td>
<td>7045689765</td>
</tr>
<tr class="even">
<td>Amit</td>
<td>9876543210</td>
</tr>
<tr class="odd">
<td>Priya</td>
<td>9123456789</td>
</tr>
<tr class="even">
<td>Sunil</td>
<td>8234567890</td>
</tr>
<tr class="odd">
<td>Neha</td>
<td>9654321098</td>
</tr>
</table>
</body>
</html>
Alternate Row Color Using not Selector
In this approach we have used not() pseudo-class selector to set alternate table row color. It excludes element specified in it's argument.
- we have used "tr:not(:first-child):not(:nth-child(odd))" on tr tag with arguments as first-child selector and nth-child selector which does not selects first row and odd rows, that is, it changes background-color of only even rows.
- Similarly, we have used "tr:not(:nth-child(even))" which excludes even rows and sets the background-color of odd rows.
Example
Here is a complete example code implementing above mentioned steps to set alternate table row color using CSS not selector.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
To set alternate table row color using CSS
</title>
<style>
table {
width: 20%;
border-collapse: collapse;
}
th {
background-color: #04af2f;
color:white;
}
th,td {
padding: 10px;
border: 1px solid #ccc;
text-align: center;
}
tr:not(:first-child):not(:nth-child(odd)) {
background-color: #c8e6c9;
}
tr:not(:nth-child(even)) {
background-color: #e8f5e9;
}
</style>
</head>
<body>
<h3>
To Set Alternate Table Row Color Using CSS
</h3>
<p>
In this example we have used <strong>not</strong>
psuedo-class selector to set alternate table row
color using CSS.
</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ravi</td>
<td>7045689765</td>
</tr>
<tr>
<td>Amit</td>
<td>9876543210</td>
</tr>
<tr>
<td>Priya</td>
<td>9123456789</td>
</tr>
<tr>
<td>Sunil</td>
<td>8234567890</td>
</tr>
<tr>
<td>Neha</td>
<td>9654321098</td>
</tr>
</tbody>
</table>
</body>
</html>
Conclusion
In this article we have understood how to set alternate table row color using CSS. We discussed four different approaches to set alternate table row color which are: by using CSS nth-child selector, by using CSS nth-of-type selector, by using CSS class selector and by using CSS not selector. Out of these four approaches, nth-child and nth-of-type are most commonly used approach.
10K+ Views
