We can add color to the alternative rows to make our table more understandable for the user, so the user can easily scan the data. We may change the color of the alternative rows using CSS to get more attention from the user. In CSS, we have a style selector for changing the alternative rows. It is very easy to change the color of the alternative rows using the CSS style selector. It has the nth-child() selector which gets the even or odd rows as a parameter and then uses the background-color property inside this style selector for changing the color. In this guide, we will show you how to use the CSS style selector for changing the color of alternative rows. We will change the color of even and odd rows differently in this guide.

Syntax:

The syntax of the style selector for changing the color of alternative rows is as follows:

Example #1: Change the Color of Even Rows

Create the HTML file for making tables containing rows and columns and change the color of the alternate rows by using the CSS style selector. The software we use to perform these examples is visual code studio. We have to generate the HTML file and type the code of the HTML that we use to create the table. You can see the code for creating the table in HTML and this file must be saved with the “.html” file extension.

Here, we are going to design a table and add the data in the rows and columns of the table. The “<th>” is used to define the header cells in the table. The “<tr>” is used to define the rows in a table. And the “<td>” is to create the data cell in rows. We add six rows and three columns to a table. The first row is the header row, so we use “<hr>” with the header cells. Then we add the data in these cells inside the “<td>” tag. These “<td>” tags are inside the “<tr>” which represents a row. We then add the data in all rows.

When this table is created, we then style this table and change the color of the alternative rows. For this, we are going to design the CSS file in this following visual studio code:

CSS Code:

This code is for coloring the alternative rows of the table we created. This file will be saved with the “.css” file extension. We will use the CSS file to apply the CSS style selector for changing the alternative color of rows.

We style the table by using the “border-collapse” property which defines whether the border of the table collapses into a single border or is separated. Here, we set it as “collapse”. By using this property, we have a single border of the table. The width of this table is set to “100%”. Then comes “th” and “td” which represent the header cells and the simple cells. Now, we style these by using the “text-align” which aligns the text inside the cells to the “left” as we set it to the “left”. Then we use the style selector of CSS for changing the color of the alternative rows. We apply the “: nth-child ()” so it will change the color of the even rows of the table. We place the “light green” color as the background color of the even rows by using the CSS background-color property.

Output:

The output is rendered on the screen by pressing “ALT+B” inside the HTML file which we previously created. The output shows the green color for all the even rows as we apply the style selector to the even rows of the table.

Example #2: Change the Color of Odd Rows

In this example, we are going to change the color of the odd rows of the previous table which we designed in the first example.

CSS Code:

The table border is collapsed here so it appears as a single border. The width of the table is “110%”. The “text-align” is used for the alignment of the text. It places the text inside the cells we want. We set the “text-align” to the “center” then the text is placed in the center of the cell. The “padding” generates the space between the border of the table and the content written in the table. This “padding” is “10px”, so it is used to generate a “10px” space between the content of the table and the border. We then pass “odd” to the style selector. We set the “pink” color as the background of the odd rows, and the color of the odd rows will be rendered as “pink”. Let’s check the following output:

Output:

Here, we see that the background color of the odd rows turns pink because we changed the color of the alternative rows.

Example # 3: Change the Color of Both Even and Odd Rows

In our third example, we will change the colors of both even and odd rows using the same style selector of CSS which we also used in the previous examples. But here, we will use both even and odd on the single table.

CSS Code:

The width is selected as “100%”. The border is set to “collapse”. The padding is selected as “7px”. The “border” is “black” in color, about “2px” in width, and the border type created is “solid”. First, we set the row background color as “pink”, but when we use the style selector, the color of the rows will change. We apply the style selector to the “odd” number of rows. This will change the color of the odd rows in our table. We want to change the odd rows’ background color to light blue so, we use the “background-color” property which is provided by the CSS and set the “color” to “light blue”. Then, we also change the color of the “even” rows to “yellow-green”. We use the same style selector again and this time, we use it for changing the color of the even rows. by putting the “yellow-green” color for even rows.

Output:

In this output, the alternative rows display different colors. The odd rows are light blue and the even rows are yellow-green. This is the way of changing the color of the alternative rows using the CSS style selector.

Conclusion

This guide explained the concept of changing the alternate row colors using the CSS nth-child() selector. We explained how it works with the odd number of rows and also with the even number of rows and how it changes the color using the background-color property. In this guide, we used the nth-child() selector and applied different colors to the alternative rows, and explained each code in detail. We provided the HTML as well as the CSS code along with its respective output.