title: Styling tables using CSS
body: <p>I have a problem with styling tables using CSS.</p>
  
  <p>So I have a table in my HTML file:</p>
  
  <pre><code>&lt;table class="altrowstable" id="alternatecolor"&gt;
  &lt;tr&gt;
      &lt;th&gt;Info Header 1&lt;/th&gt;&lt;th&gt;Info Header 2&lt;/th&gt;&lt;th&gt;Info Header 3&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;Text 1A&lt;/td&gt;&lt;td&gt;Text 1B&lt;/td&gt;&lt;td&gt;Text 1C&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;Text 2A&lt;/td&gt;&lt;td&gt;Text 2B&lt;/td&gt;&lt;td&gt;Text 2C&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;Text 3A&lt;/td&gt;&lt;td&gt;Text 3B&lt;/td&gt;&lt;td&gt;Text 3C&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;Text 4A&lt;/td&gt;&lt;td&gt;Text 4B&lt;/td&gt;&lt;td&gt;Text 4C&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;Text 5A&lt;/td&gt;&lt;td&gt;Text 5B&lt;/td&gt;&lt;td&gt;Text 5C&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Here is my JavaScript file:</p>
  
  <pre><code>function altRows(id){
  if(document.getElementsByTagName){  
  
      var table = document.getElementById(id);  
      var rows = table.getElementsByTagName("tr"); 
  
      for(i = 0; i &lt; rows.length; i++){          
          if(i % 2 == 0){
              rows[i].className = "evenrowcolor";
          }else{
              rows[i].className = "oddrowcolor";
          }      
      }
    }
   }
   window.onload=function(){
  altRows('alternatecolor');
   }
  </code></pre>
  
  <p>And here is my CSS file:</p>
  
  <pre><code>table.altrowstable {
      font-family: verdana,arial,sans-serif;
      font-size:11px;
      color:#333333;
      border-width: 1px;
      border-color: #a9c6c9;
      border-collapse: collapse;
  }
  table.altrowstable th {
      border-width: 1px;
      padding: 8px;
      border-style: solid;
      border-color: #a9c6c9;
  }
  table.altrowstable td {
      border-width: 1px;
      padding: 8px;
          border-style: solid;
      border-color: #a9c6c9;
  }
  
  table.oddrowcolor{
      background-color:#d4e3e5;
  }
  table.evenrowcolor{
      background-color:#c3dde0;
  }
  </code></pre>
  
  <p>The problem is that it is not changing color neither odd rows nor even odd.</p>
  
  <p>What am I doing wrong?</p>
  
  <p>Thanks.</p>