How to Highlight Alternate Table Row Color Using CSS

Last Updated on February 6, 2021 by Roshan Parihar

In this tutorial, learn how to highlight alternate table row color using CSS. The Short answer is: Use nth-child selector of CSS to give a background color to alternate table rows.

You can apply background, borders, or any other CSS to alternate table rows using the method given here. Give CSS to odd rows of a table or even rows of a table or both using CSS.

Highlight Alternate Table Row Odd

To highlight odd alternate rows of a table, you can use the keyword ‘odd’ in the nth-child selector. To apply CSS for the odd rows of a table, use the below syntax.

You can also use the number expression to apply the CSS to the odd alternate table rows of a table. To apply the odd alternate table rows, you have to use the number expression 2n+1. This applies the CSS to the odd rows of the table from the start.

Below is the simple example which uses the same number expression to apply and highlight alternate table row in odd numbers.

Output

Sr. No.	Name	Country	Highest Score
1	Mahendra Singh Dhoni	India	183*
2	Chris Gayle	West Indies	215
3	Rohit Sharma	India	264
4	Fakhar Zaman	Pakistan	210*

The above example applies the background color to the odd rows of a table. Apply any CSS to the alternate rows of a table using the above-given method.

Alternate Even Row of A Table Highlighting

If you want to apply the CSS to the even rows of a table, you can use the keyword ‘even’ in the nth-child selector. Use the below-given method to apply the CSS to even alternate rows of a table.

In addition to this, you can also apply CSS to even rows of a table using the keyword expression also. To apply CSS to even rows, use the number expression 2n in the nth-child selector as given below:

Output

Sr. No.	Name	Country	Highest Score
1	Mahendra Singh Dhoni	India	183*
2	Chris Gayle	West Indies	215
3	Rohit Sharma	India	264
4	Fakhar Zaman	Pakistan	210*

The above example contains the table with highlighted alternate even rows.

Both Even and Odd Row Highlight

If you want to background color to alternate table rows and highlight both even and odd row together, you have to use the example as given below:

Output

Sr. No.	Name	Country	Highest Score
1	Mahendra Singh Dhoni	India	183*
2	Chris Gayle	West Indies	215
3	Rohit Sharma	India	264
4	Fakhar Zaman	Pakistan	210*

The above example applies different background colors to even and odd rows of a table as you find above.

You may also like to read.

• How to change background transparency of div element.
• Center align the div element horizontally using CSS.
• CSS remove dotted outline around links.
• Write Comments in CSS Codes.
• how to define CSS for Internet Explorer and add IE-only stylesheet

I hope you like this tutorial on how to highlight alternate table row colors using CSS.