title: Background Color stripes in a single row <tr> element in a table
body: <p>I have a table with a single row and 3 cells. I am looking to change the color of the entire row which will have 3 stripes. I am not sure how to go about it.</p>
  
  <pre><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;first cell&lt;/td&gt;
      &lt;td&gt;second cell&lt;/td&gt;
      &lt;td&gt;third cell&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Had it been a div I would have placed 3 div inside it and I would be able to do something like this:</p>
  
  <pre><code>    &lt;style&gt;
      #someDiv{
          border: 1px;
         // background-color: grey;
          width:100%;
          height:102px;
      }
      #divthree{
          background-color:green;
          height:34px;
      }
      #divone{
          background-color:#FF6600;
          height:34px;
      }
      #divtwo{
          background-color:white;
          height:34px;
      }
  &lt;/style&gt;
  
  &lt;div id="someDiv"&gt;
      &lt;div id="divone"&gt;&lt;/div&gt;
      &lt;div id="divtwo"&gt;&lt;/div&gt;
      &lt;div id="divthree"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Something like this <a href="http://jsfiddle.net/5mdEK/" rel="nofollow">http://jsfiddle.net/5mdEK/</a></p>
  
  <p>Here's how it worked out: <a href="http://jsfiddle.net/H4Hr7/" rel="nofollow">http://jsfiddle.net/H4Hr7/</a></p>