<!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=utf-8" /> <title></title> <style type="text/css" title="text/css">table { border-top: 1px solid #c9c9c9; border-left: 1px solid #c9c9c9;}caption { padding: 0 0 10px; font: bold 120% Arial, sans-serif; text-transform: uppercase;}th { background: red; text-align: left; padding: 2px 5px; font-weight: bold; border-bottom: 1px solid #666666;}th,td { border-right: 1px solid #c9c9c9; font: 80% Verdana, Arial, sans-serif;}tfoot { background-color: #666666; color: #dddddd; font-size: 80%;}table { border: 1px solid #666666;}tfoot td { border-bottom: 0; border-right: 0;}</style> <script type="text/javascript"> function hasClass(obj) { var result = false; if (obj.getAttributeNode("class") != null) { result = obj.getAttributeNode("class").value; } return result; } function stripe(id) { var even = false; var evenColor = "#fff"; var oddColor = "#eee"; var table = document.getElementById(id); var tbodies = table.getElementsByTagName("tbody"); for (var j = 0; j < tbodies.length; j++) { var trs = tbodies[j].getElementsByTagName("tr"); for (var i = 0; i < trs.length; i++) { if (!hasClass(trs[i]) && ! trs[i].style.backgroundColor) { var tds = trs[i].getElementsByTagName("td"); for (var j = 0; j < tds.length; j++) { var mytd = tds[j]; if (! hasClass(mytd) && ! mytd.style.backgroundColor) { mytd.style.backgroundColor = even ? evenColor : oddColor; } } } even = ! even; } } } </script></head><body onload="stripe('playlist');"> <table id="playlist" width="90%" border="0" cellpadding="2" cellspacing="0" summary="A playlist"> <caption> A playlist of great music </caption> <thead> <tr> <th>Song Name</th> <th>Time</th> <th>Artist</th> <th>Album</th> <th>Play Count</th> </tr> </thead> <tfoot> <tr> <td colspan="5">Music selection</td> </tr> </tfoot> <tbody> <tr><td>A</td><td>2:35</td><td>A</td><td>A</td><td>7</td></tr> <tr><td>B</td><td>2:35</td><td>B</td><td>B</td><td>7</td></tr> <tr><td>C</td><td>2:35</td><td>C</td><td>C</td><td>7</td></tr> <tr><td>D</td><td>2:35</td><td>D</td><td>D</td><td>7</td></tr> <tr><td>E</td><td>2:35</td><td>E</td><td>E</td><td>7</td></tr> <tr><td>F</td><td>2:35</td><td>F</td><td>F</td><td>7</td></tr> <tr><td>G</td><td>2:35</td><td>G</td><td>G</td><td>7</td></tr> <tr><td>H</td><td>2:35</td><td>H</td><td>H</td><td>7</td></tr> <tr><td>I</td><td>2:35</td><td>I</td><td>I</td><td>7</td></tr> <tr><td>J</td><td>2:35</td><td>J</td><td>J</td><td>7</td></tr> <tr><td>K</td><td>2:35</td><td>K</td><td>K</td><td>7</td></tr> <tr><td>L</td><td>2:35</td><td>L</td><td>L</td><td>7</td></tr> </tbody> </table></body></html>
