jQuery: Create a Zebra Stripes table effect

jQuery Practical exercise Part - I : Exercise-7

Create a Zebra Stripes table effect.

Sample solution :

HTML Code :

<!DOCTYPE html>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>Create a Zebra Stripes table effect</title>
<div class="table_style">
		<th>Student Name</th>
		<th>Marks in Science</th>

CSS Code:

.table_style {
	width: 500px;
	margin: 0px auto;
	width: 100%;
	border-collapse: collapse;
	table tr td{
	width: 50%;
	border: 1px solid #ff751a;
	padding: 5px;
	table tr th{
	border: 1px solid #79ff4d;
	padding: 5px;
	background-color:  #ff0066;

JavaScript Code :


See the Pen jquery-practical-exercise-7 by w3resource (@w3resource) on CodePen.

Contribute your code and comments through Disqus.

Previous: Blink text using jQuery.
Next: Print a page using jQuery.

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.

Follow us on Facebook and Twitter for latest update.