This simple page is meant as a guide for your own work. You can see how striping your tables this way makes it much easier for people to read the tables while at the same time making them look good!
You can download a zip file that contains both the sample HTML page and the Javascript file that contains the code that makes this work.
To see what's going on in the page you should look at the source code on the bottom half of the page, or use your browser to view the source. [View -> Source] in IE.
Back to the HTML formatting article
| TABLE 1 | |
| some information WITH ZEBRA STRIPES | YES |
| some information WITH ZEBRA STRIPES | NO |
| some information WITH ZEBRA STRIPES | WHAT |
| TABLE 2 | |
| some information WITH ZEBRA STRIPES | YES |
| some information WITH ZEBRA STRIPES | NO |
| some information WITH ZEBRA STRIPES | WHAT |
| TABLE 3 | |
| some information WITH ZEBRA STRIPES | YES |
| some information WITH ZEBRA STRIPES | NO |
| some information WITH ZEBRA STRIPES | WHAT |
| TABLE 4 | |
| some information - BUT NO ZEBRA STRIPES! :( | NO |
| some information - BUT NO ZEBRA STRIPES! :( | YES |
| some information - BUT NO ZEBRA STRIPES! :( | WHAT |
--------------------- SOURCE CODE ---------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="no">
<title>KILLER ZEBRA STRIPES SAMPLE PAGE</title>
<style media="screen" type="text/css">
p {
width:500px;
font-family: "lucida grande", verdana, sans-serif;
font-size: 10pt;
}
/* REQUIRED KILLER ZEBRASTRIPES CSS */
.taglist {
border: 1px solid #666666;
margin-top:40px; margin-bottom:30px;
}
.taglist tbody tr td {
font-family: "lucida grande", verdana, sans-serif;
font-size: 8pt;
padding: 3px 8px;
border-left: 1px solid #D9D9D9;
}
.taglist tbody tr.selected td {
background-color: #3d80df;
color: #ffffff;
font-weight: bold;
border-left: 1px solid #346DBE;
border-bottom: 1px solid #7DAAEA;
}
/* REQUIRED KILLER ZEBRASTRIPES CSS */
</style>
<script language="javascript" src="killerZebraStripes.js" type="text/javascript"></script>
</head>
<body onload="stripeTables('table1','#CAE8C8','table2', '#E1E1F0', 'table3', 'red');">
<a href="http://www.killersites.com/">
<img src="../imagesNew/killersitesLogo_Syntax.gif" alt="Home" width="199" height="37" border="0" >
</a>
<P>
This simple page is meant as a guide for your own work. You can see how striping your tables this way
makes it much easier for people to read the tables while at the same time making them look good!
</P>
<p>
To see what's going on in the page you should look at the source code: [View -> Source] in IE.
</p>
<table width="482" border="0" cellspacing="3" cellpadding="3" id="table1" class="taglist">
<tr>
<td>
<STRONG>TABLE 1 </STRONG></td>
<td align="center"> </td>
</tr>
<tr>
<td>some information WITH ZEBRA STRIPES</td>
<td align="center">YES</td>
</tr>
<tr>
<td>some information WITH ZEBRA STRIPES</td>
<td align="center">NO</td>
</tr>
<tr>
<td>some information WITH ZEBRA STRIPES</td>
<td align="center">WHAT</td>
</tr>
</table>
<table width="482" border="0" cellspacing="3" cellpadding="3" id="table2" class="taglist">
<tr>
<td width="382"><STRONG>TABLE 2 </STRONG></td>
<td width="36" align="center"> </td>
</tr>
<tr>
<td>some information WITH ZEBRA STRIPES</td>
<td align="center">YES</td>
</tr>
<tr>
<td>some information WITH ZEBRA STRIPES</td>
<td align="center">NO</td>
</tr>
<tr>
<td>some information WITH ZEBRA STRIPES</td>
<td align="center">WHAT</td>
</tr>
</table>
<table width="482" border="0" cellspacing="3" cellpadding="3" id="table3" class="taglist">
<tr>
<td width="382"><strong>TABLE 3 </strong></td>
<td width="36" align="center"> </td>
</tr>
<tr>
<td>some information WITH ZEBRA STRIPES</td>
<td align="center">YES</td>
</tr>
<tr>
<td>some information WITH ZEBRA STRIPES</td>
<td align="center">NO</td>
</tr>
<tr>
<td>some information WITH ZEBRA STRIPES</td>
<td align="center">WHAT</td>
</tr>
</table>
<table width="482" border="0" cellspacing="3" cellpadding="3" class="taglist">
<tr>
<td width="382"><strong>TABLE 4 </strong></td>
<td width="36" align="center"> </td>
</tr>
<tr>
<td>some information - BUT NO ZEBRA STRIPES! :(</td>
<td align="center">NO</td>
</tr>
<tr>
<td>some information - BUT NO ZEBRA STRIPES! :(</td>
<td align="center">YES</td>
</tr>
<tr>
<td>some information - BUT NO ZEBRA STRIPES! :(</td>
<td align="center">WHAT</td>
</tr>
</table>
<div style="margin-bottom:50px; ">
© 2004 KillerSites.com – all rights reserved
</div>
</body>
</html>