Não sou um mestre em JavaScript, estou aprendendo, mas isso faz tudo o que você quer:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
function mouseOver( id, color ) {
var id = document.getElementById( id );
id.style.backgroundColor = color;
}
function mouseOut( id, color ) {
var id = document.getElementById( id );
id.style.backgroundColor = color; /* Define a cor de fundo padrão */
}
function mostraDetalhes( id, show )
{
var IE = (navigator.appVersion.indexOf("MSIE") > - 1);
var id = document.getElementById( id );
id.style.display = ! show ? "none" : IE ? "inline" : "table-row";
}
</script>
</head>
<body>
<table width="100%" border="1" style="border-collapse: collapse;">
<tr id="linha1" onmouseover="mouseOver( this.id, '#f3ffff' );" onmouseout="mouseOut( this.id, '#ffffff' );" onclick="mostraDetalhes( 'divOculta', true );">
<td> </td>
</tr>
<tr id="divOculta" style="display: none;">
<td>
Óia eu aqui!
<br />
<strong><a href="java script:void(0)" onclick="mostraDetalhes( 'divOculta', false );">[ Fechar ]</a></strong>
</td>
</tr>
<tr id="linha2" onmouseover="mouseOver( this.id, '#f3ffff' );" onmouseout="mouseOut( this.id, '#ffffff' );" onclick="mostraDetalhes( 'divOculta2', true );">
<td> </td>
</tr>
<tr id="divOculta2" style="display: none;">
<td>
Óia eu aqui de novo!
<br />
<strong><a href="java script:void(0)" onclick="mostraDetalhes( 'divOculta2', false );">[ Fechar ]</a></strong>
</td>
</tr>
<tr id="linha3" onmouseover="mouseOver( this.id, '#f3ffff' );" onmouseout="mouseOut( this.id, '#ffffff' );" onclick="mostraDetalhes( 'divOculta3', true );">
<td> </td>
</tr>
<tr id="divOculta3" style="display: none;">
<td>
Óia eu aqui outra vez!
<br />
<strong><a href="java script:void(0)" onclick="mostraDetalhes( 'divOculta3', false );">[ Fechar ]</a></strong>
</td>
</tr>
</table>
</body>
</html>
Tem as linhas, mudam de cor com o mouse em cima (onMouseOver), voltam para, no caso branco, sem o mouse (onMouseOut) e abrem uma linha de tabela oculta ao clicar (onClick).
Fiz baseado em tabela pois você deu a entender que vai usar tabelas, se fosse usar somente DIV's no melhor estilo Tableless, a função mostraDetalhes() seria um pouco diferente.
Agora é só você estudar o código, estilizar a tebale e ser feliz.
Testado no IEca 7 e no Firefox 2.0.0.2
[]'s