Style alternate rows of a table with CSS

In this article, we will learn how to style alternate rows of a table with CSS? Using CSS we can improve the user experience by styling alternate rows of a table different from other rows.
Submitted by Abhishek Pathak, on October 31, 2017

Tables are used to present data in a tabular form on the webpage. The default styling that browser provides is not good looking. When we have lots of data to show in table, the default styling might not be very readable by the user. Using CSS we can improve the user experience by styling alternate rows of a table different from other rows.

We have a CSS psuedo class called :nth-of-type() which based on the parameter passed to it, applied style to those elements only. Suppose, we want to style odd items in a list, we can do so with the following CSS code.

Code - CSS

ul li:nth-of-type(odd) {
	color: blue;
}

Using this property, we will style the alternate rows of a table. We can choose any of them from even and odd as they will create an alternating effect. Here is the HTML structure that defines markup for table.

Code - HTML

<table>
    <tr>      
      <th>Name</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Abhinav</td>
      <td>India</td>      
    </tr>
    <tr>
      <td>Sam</td>
      <td>Russia</td>      
    </tr>
    <tr>
      <td>John</td>
      <td>USA</td>      
    </tr>
</table>

Here we define the table using standard table markup. The <tr> tag defines rows and <td> tag defines data for each column. The <th> tag defines the table headers, for letting users know the column's name. Now we need to apply CSS for alternate row effect.

Code - CSS

table {
  border-collapse: collapse;
}

td, th {
  border: 1px solid #aaa;
  padding: 5px 10px;
}

table tr:nth-of-type(even) {
  background: #ddd;
}

First, we collapse the border of the table using border-collapse property. It helps to bring together the contents of the table and make it look like a one single table. Then we define properties for td and th and define borders and padding properties for it to give it a good and spacious look.

Next, we target the tr elements that denotes the row of the table. Apply the nth-of-type(even) to these rows and we will get the desired result. See a demo to see it in action.

DEMO

HTML with CSS

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width">
		<title>CSS Table Demo</title>
		<style>
			table {
				border-collapse: collapse;
			}

			td, th {
				border: 1px solid #aaa;
				padding: 5px 10px;
			}

			table tr:nth-of-type(even) {
				background: #ddd;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>      
				<th>Name</th>
				<th>Country</th>
			</tr>
			<tr>
				<td>Abhinav</td>
				<td>India</td>      
			</tr>
			<tr>
				<td>Sam</td>
				<td>Russia</td>      
			</tr>
			<tr>
				<td>John</td>
				<td>USA</td>      
			</tr>
		</table>

	</body>
</html>

Output

Style alternate rows of a table with CSS

Hope you like the article. Share your thoughts in the comments below.

CSS Tutorial & Examples »

How to change link color on hover in CSS?

Change the perspective of an element in CSS

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples