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

HTML



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

</tr>
</thead>
<tbody>
<tr>

<td>#1</td>
<td><em>Avatar</em></td>
<td>Fox</td>
<td>2009</td>
<td>$2.8 billion</td>

</tr>
<tr>
<td>#2</td>
<td><em>Titanic</em></td>
<td>Paramount</td>
<td>1997</td>
<td>$2.2 billion</td>

</tr>
<tr>
<td>#3</td>
<td><em>The Avengers</em></td>
<td>Disney</td>
<td>2012</td>
<td>$1.5 billion</td>
</tr>
<tr>
<td>#4</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>

CSS


table {
border-collapse: collapse;
    font-size:14px;
    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;    
    text-align:left;
}

#demonstration {
    width:100%;
    height:auto;
}

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

#demonstration h3 {
	text-align:center;
}

jQuery

		
                     
     $(document).ready(function(){ 
// 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.