Rollover in Tabellen?!

[Sebastian Brüll]

Hallo zusammen ich bins mal wieder,

also ich bin dabei einige Dinge auszuprobieren um hinterher die beste Lösung für meine Web-Gallery zufinden,
im Moment bin ich dabei die Auswahlseite für die Bilder mit einer Tabelle zu erstellen, ich habe in die Mitte eines Tabellenkastens das Vorschaubild und drumherum noch etwas Platz gelassen, welcher wie der Rahmen des jeweiligen Bildes wirken soll.
Nun hätte ich gerne das, wenn der Cursor auf das jeweilige Tabellenkästchen kommt, der HG dunkler wird und der Verweis sich nicht nur auf das Bild bezieht sondern auf das ganze Kästchen.

HIer ein auszug aus dem body tag der HTML Seite

<div id="main">

<table align="center" style="border-spacing:5px">
    <tr>
      <td><h4>Schmetterlinge</h4></td>
      <td></td>
      <td></td>
      </tr>
      <td></td>
    <tr>

<td id="gallery" width="130px" height="130px" align="center"><a href=""><img src="gallery/thumbs/sb070782th.jpg" onfocus="if (this.blur) this.blur()"></a></td>
      <td id="gallery" width="130px" height="130px" align="center"><a href=""><img src="gallery/thumbs/sb070782th.jpg" onfocus="if (this.blur) this.blur()"></a></td>
      <td id="gallery" width="130px" height="130px" align="center"><a href=""><img src="gallery/thumbs/sb070782th.jpg" onfocus="if (this.blur) this.blur()"></a></td>
      <td id="gallery" width="130px" height="130px" align="center"><a href=""><img src="gallery/thumbs/sb070782th.jpg" onfocus="if (this.blur) this.blur()"></a></td>
   </tr>
    <tr>
      <td id="gallery" width="130px" height="130px" align="center"><a href=""><img src="gallery/thumbs/sb070782th.jpg" onfocus="if (this.blur) this.blur()"></a></td>
      <td id="gallery" width="130px" height="130px" align="center"><a href=""><img src="gallery/thumbs/sb070782th.jpg" onfocus="if (this.blur) this.blur()"></a></td>
      <td id="gallery" width="130px" height="130px" align="center"><a href=""><img src="gallery/thumbs/sb070782th.jpg" onfocus="if (this.blur) this.blur()"></a></td>

<td id="gallery" width="130px" height="130px" align="center"><a href=""><img src="gallery/thumbs/sb070782th.jpg" onfocus="if (this.blur) this.blur()"></a></td>
    </tr>
    </table>
  </div>

Und hier noch der Teil aus der CSS Datei welcher die links steuern soll

td#gallery {
 width:150px; height:150px;
 background-color:#efefef;
}
td#gallery a {
 width:150px; height:150px;
 background-color:#efefef;
}
td#gallery a:hover {
 width:150px; height:150px;
 background-color:#565656;
}

Was mache ich falsch??

Viele Grüße
Bati