Project Avant Facebook Page Project Avant Twitter Page

tutorial #1: zebra-striping

For this demonstration, you will see how to create a zebra-striped table. jQuery is used to select and decorate elements without changing the CSS. You will learn how to build the jQuery code needed and learn the purpose of each line, as well as how to create the zebra-striped table in HTML and CSS.

Below is a demonstration of zebra-striping./p>

The 5 Highest-Grossing Movies Of All Time

Rank Movie Studio Release Date Total Worldwide Gross
#1 Avatar Fox 2009 $2.8 billion
#2 Titanic Paramount 1997 $2.2 billion
#3 The Avengers Disney 2012 $1.5 billion
#4 Harry Potter and the Deathly Hallows Part II Warner Brothers 2011 $1.3 billion
#5 Iron Man 3 Disney 2013 $1.2 billion

The How-To


<h2>The 5 Highest-Grossing Movies Of All Time</h2>
<table id="zebra">
<th>Release Date</th>
<th>Total Worldwide Gross</th>


<td>$2.8 billion</td>

<td>$2.2 billion</td>

<td><em>The Avengers</em></td>
<td>$1.5 billion</td>
<td><em>Harry Potter and 
the Deathly Hallows Part II</em></td> <td>Warner Brothers</td> <td>2011</td> <td>$1.3 billion</td> </tr> <tr> <td>#5</td> <td><em>Iron Man 3</em></td> <td>Disney</td> <td>2013</td> <td>$1.2 billion</td> </tr> </tbody> </table>


table {
border-collapse: collapse;
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin:0 20px 20px 20px;

th     {
border-bottom: 2px solid #015287;
color: #0C5A7A;
font-family: Biko,"Century Gothic";
font-size: 16px;
font-weight: 900;
padding: 15px 15px 5px 7px;
text-align: left;
text-transform: uppercase;

td     {
padding: 10px;    

#demonstration {

#zebra  {
	border-collapse: collapse;
    height: auto;
    width: 100%;

#demonstration h3 {


// This is needed to make the document ready and functional.
  $('#zebra tbody tr:even').css( 
// Here, is the selector, you must use a 'id' or 'class' first, followed by html elements.     
    {'background-color': '#155a7a', 'color': '#ffffff'}
// Like CSS, you can change the properties inside curly braces.  
//To use multiple properties, separate the values with a comma.  
//Close the selector. 
//Close the function.