Preserved Topic: Table background change with CSS

Hmm... an often discussed topic. I know how to do a basic table background change with a mouseover, BUT I'm trying to make an advanced one like on the new MS Germany site (www.microsoft.de) with a border around it. Well, see for yourself. I've tried to rip code from them but this is tiring because its all done with javascripts and I'm looking for a clean solution with CSS. Any ideas?

[patric design]

Take a look at: http://www.ozoneasylum.com/Forum2/HTML/000671.html & http://development.runningwolf.com/development/code/border_test.htm

Here's what I have in my site:

<script language="JavaScript">
var isIE4 = false;
function CheckBrowser()
{ if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.charAt(0) >= 4) { isIE4 = true; }}
function mOvr(src,clrOver)
{ if (!src.contains(event.fromElement)) { src.style.cursor = 'hand'; src.bgColor = clrOver; src.children.tags('A')[0].style.color = '#000000'; src.style.border = "1px solid #635A29";}}
function mOut(src,clrIn)
{ if (!src.contains(event.toElement)) { src.style.cursor = 'default'; src.bgColor = clrIn; src.children.tags('A')[0].style.color = '#000000'; src.style.border = "1px solid #CCBC54";}}
function mClk(src)
{ if(event.srcElement.tagName=='TD'){src.children.tags('A')[0].click();} }
</script>

The style.color is the link color (if I remember right) and the style.border is the border attributes. in the <td> tag you stick
onMouseOut="mOut(this,'#CCBC54');" onMouseOver="mOvr(this,'#DCCC64');
in. The mouseover is the color the background is when you mouseover it, and the mouseout is the color when your cursor gets off of it.