Zebra striping effect on HTML table rows

arp14 CSS, HTML, Tutorial Tags: , , , , , 0

Howdy folks! Today I am going to show you how to achieve zebra striping effect on HTML tables by using various methods. The zebra striping effect is basically used to differentiate each table rows from the previous and next one. Regular tabular data messed up while we read it without adding any kind of style to it. But the zebra striping effect not only looks good but also effectively increases user readability – user friendliness.

The old long boring even-odd method

HTML

<table>
	<tr class="odd">
		<td>a1</td><td>a2</td><td>a3</td>
	</tr>
	<tr class="even">
		<td>b1</td><td>b2</td><td>b3</td>
	</tr>
	<tr class="odd">
		<td>c1</td><td>c2</td><td>c3</td>
	</tr>
	<tr class="even">
		<td>d1</td><td>d2</td><td>d3</td>
	</tr>
	<tr class="odd">
		<td>e1</td><td>e2</td><td>e3</td>
	</tr>
	<tr class="even">
		<td>f1</td><td>f2</td><td>f3</td>
	</tr>
</table>

CSS

table, tr, td {
  border: 1px solid #000;
  border-collapse: collapse;
  padding: 10px;
}
tr.even {
	background: lime;
}

tr.odd {
	background: yellow;
}

Result

a1a2a3
b1b2b3
c1c2c3
d1d2d3
e1e2e3
f1f2f3

Explanation

In the code above we have added class “even” on even rows and class “odd” on odd rows – by count in the HTML. Then we selected “tr” tag with “even” class and again “tr” tag with “odd” class. Then we styled them individually. This method is old, long, time-consuming to achieve zebra striping effect. We have to write more and more codes. Now days we – developers are lazy enough, so we are going to use New CSS3 method.

New CSS3 method

HTML

<table>
	<tr>
		<td>a1</td><td>a2</td><td>a3</td>
	</tr>
	<tr>
		<td>b1</td><td>b2</td><td>b3</td>
	</tr>
	<tr>
		<td>c1</td><td>c2</td><td>c3</td>
	</tr>
	<tr>
		<td>d1</td><td>d2</td><td>d3</td>
	</tr>
	<tr>
		<td>e1</td><td>e2</td><td>e3</td>
	</tr>
	<tr>
		<td>f1</td><td>f2</td><td>f3</td>
	</tr>
</table>

CSS

table, tr, td {
	border: 1px solid #000;
	border-collapse: collapse;
	padding: 10px;
}

tr:nth-child(even) {
	background: #fdf;
}

tr:nth-child(odd) {
	background: #dfd;
}

Result

a1a2a3
b1b2b3
c1c2c3
d1d2d3
e1e2e3
f1f2f3

Explanation

In the code above we are using CSS3 to achieve zebra striping effect. This method is less time-consuming than the previous old method. We have not added any class in “tr” tags this time. We have used “:nth-child()” selector of CSS3. We just selected “tr” tag and added a sub selector “:nth-child()” with value of “even” and “odd” to achieve the effect. For value “even” – it selects all even-numbered rows and for value “odd” – it selects all odd-numbered rows by counting them from top to bottom starting from zero. These are awesome built-in features of CSS3.

Selecting rows by custom “n” values in nth-child function

tr:nth-child(2n) {
	background: #fdf;
}

tr:nth-child(2n+1) {
	background: #dfd;
}

Note: The value of “n” is number of row starting from zero and it increases by each row from top to bottom on counting.

Calculation of nth-child (equation of “n”)

2n = Select 2nd, 4th, 6th, 8th, etc. even-numbered rows.

 

2n + 1 = (2 x 0) + 1 = 1st row

2n + 1 = (2 x 1) + 1 = 3rd row

2n + 1 = (2 x 2) + 1 = 5th row

2n + 1 = (2 x 3) + 1 = 7th row

2n + 1 = (2 x 4) + 1 = 9th row

 

-n + 3 = -0 + 3 = 3rd row

-n + 3 = -1 + 3 = 2nd row

-n + 3 = -2 + 3 = 1st row

-n + 3 = -3 + 3 = 0 (no match)

 

n2n + 14n + 14n + 44n5n – 2-n + 3
01143
1358432
25912881
3713161213
4917201618
51121242023

 

Leave a Reply

Note: Your email address will not be published. Required fields are marked *