Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to set alternate table row color using CSS?
Tables are used to present data in a structured and organized format. It is an essential part of web design. Alternate row colors are used to enhance the readability and aesthetics of tables. Alternate row color is a design technique in which the background color of every other row in a table is different from the adjacent rows. This technique helps readers to differentiate rows and improves the overall look of the table.
Basic CSS Syntax for Alternate Row Color
The :nth-child() pseudo-class selector in CSS is used to set an alternate row color for a table. The nth-child selector allows to select elements based on the position in a group of siblings. Basic syntax for setting alternate row color −
tr:nth-child(even) {
background-color: #f2f2f2;
}
Here, the tr:nth-child(even) selector selects every even numbered tr (table row) element and applies the background color of #f2f2f2.
Steps
Follow the below-given steps to set alternate table row color using CSS −
Step 1: Create the Table
To set alternate table row color, we need to create a table using HTML. A basic table structure consists of the <table> element, <thead>, <tbody>, and <tr> and <td> elements. For example −
Example
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
<tr>
<td>Row 3, Column 1</td>
<td>Row 3, Column 2</td>
<td>Row 3, Column 3</td>
</tr>
</tbody>
</table>
Here, we have created a table, it has three columns and three rows including header row.
Step 2: Add CSS Styles
The next step is to add CSS styles to set the alternate row color. In CSS, the alternate row color is set using the nth-child pseudo-class selector. For example −
tr:nth-child(odd) {
background-color: lightblue;
}
tr:nth-child(even) {
background-color: lightgreen;
}
In the above CSS code, we have set the background color of rows with an odd number of tr:nth-child(odd) selectors to lightblue, and the tr:nth-child(even) selector sets the background color of even-numbered rows to lightgreen.
Step 3: Apply the Styles to the Table
The final step is to apply the CSS styles to the table. For example −
Example
<html>
<head>
<style>
tr:nth-child(odd) { background-color: lightblue; }
tr:nth-child(even) {background-color: lightgreen;}
</style>
</head>
<body>
<h3>Set alternate table row color using CSS</h3>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
<tr>
<td>Row 3, Column 1</td>
<td>Row 3, Column 2</td>
<td>Row 3, Column 3</td>
</tr>
<tr>
<td>Row 4, Column 1</td>
<td>Row 4, Column 2</td>
<td>Row 4, Column 3</td>
</tr>
</tbody>
</table>
</body>
</html>
Conclusion
Alternate row color is a simple and effective design technique to enhance the readability of tables. By following the step-by-step above guide, we can set alternate row color using CSS.
6K+ Views
