title: Table and mouse rollover effect (hover)
body: <p>I have this table:</p>
  
  <pre><code>&lt;table border="1"&gt;
  &lt;tr&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;Banana&lt;/td&gt;
      &lt;td&gt;Orange&lt;/td&gt;
      &lt;td&gt;Plum&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;Banana&lt;/td&gt;
      &lt;td&gt;1:1&lt;/td&gt;
      &lt;td&gt;1:2&lt;/td&gt;
      &lt;td&gt;1:3&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;Orange&lt;/td&gt;
      &lt;td&gt;2:1&lt;/td&gt;
      &lt;td&gt;1:1&lt;/td&gt;
      &lt;td&gt;1,5:1&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;Plum&lt;/td&gt;
      &lt;td&gt;1:3&lt;/td&gt;
      &lt;td&gt;2:1&lt;/td&gt;
      &lt;td&gt;1:1&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p></p>
  
  <p>and CSS:</p>
  
  <pre><code>    td {
      height:60px;
      width:60px;
      text-align:center;
  }
  
  td:hover{
      background-color:red;
      }
  </code></pre>
  
  <p>What I want to do, is when I for example point my mouse on 1:3 table cell, it should highlight together with Banana and Plum cells.</p>
  
  <p>Any easy way to do it?</p>
  
  <p>Here's fiddle:
  <a href="http://jsfiddle.net/CZEJT/" rel="nofollow">http://jsfiddle.net/CZEJT/</a></p>