<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSSnewbie Example: Easy Zebra Striping Tables</title>
<style>
body {
background-color: #eee;
font: 62.5%/1.3 Verdana, Arial, Helvetica, sans-serif; }
#wrap {
font-size: 130%;
width: 550px;
padding: 10px 50px;
margin: 0 auto;
border: 1px solid #ccc;
background-color: #fff;}
/* Table Styles */
table {
width: 100%;
border: 1px solid #cef;
margin: 1em 25px;
text-align: left; }
th {
font-weight: bold;
background-color: #acf;
border-bottom: 1px solid #cef; }
td,th {
padding: 4px 5px; }
.odd {
background-color: #def; }
.odd td {
border-bottom: 1px solid #cef; }
</style>
<script language="javascript" type="text/javascript" src="../../js/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
$("tr:even").addClass("even");
$("tr:odd").addClass("odd");
});
</script>
</head>
<body>
<div id="wrap">
<h1>Easy Zebra Striping Tables</h1>
<p><a href="http://www.cssnewbie.com/styling-zebra-striped-tables-with-css/">Return to the original article.</a></p>
<p>The table below has been zebra-striped to improve scanability and aesthetics. The CSS to accomplish this sort of look is simple, and with a bit of help from jQuery, it can be even easier.</p>
<table cellpadding="0" cellspacing="0">
<tr>
<th>State</th>
<th>Date of Poll</th>
<th>% Voting Dem.</th>
<th>% Voting GOP</th>
</tr>
<tr>
<td>AR</td>
<td>10/27</td>
<td>44</td>
<td>54</td>
</tr>
<tr>
<td>AZ</td>
<td>10/23</td>
<td>41</td>
<td>49</td>
</tr>
<tr>
<td>CO</td>
<td>10/26</td>
<td>51</td>
<td>42</td>
</tr>
<tr>
<td>FL</td>
<td>10/26</td>
<td>50</td>
<td>43</td>
</tr>
<tr>
<td>GA</td>
<td>10/27</td>
<td>47</td>
<td>48</td>
</tr>
</table>
<p>Note: The data contained within this table is intended as an example only. That having been said, I got it from <a href="http://www.fivethirtyeight.com/2008/10/todays-polls-1028.html">FiveThirtyEight</a>, a very cool polling website. And <em>that</em> having been said, I still can't promise I copied and pasted correctly.</p>
</div>
</body>
</html>