Menu com abas

Menu com abas com as seguintes características:
- Fundo personalizado para a aba e o conteúdo selecionado;
- Ativação por clique no mouse;

Instruções de uso:
- Vide comentários no código-fonte.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Abas</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.unsel {
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #0000FF; <!-- Cor da borda da aba -->
	font-style: normal;
}
.sel {
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: 0px;
	border-left-width: thin;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: none;
	border-left-style: solid;
	border-top-color: #0000FF;<!-- cor da borda da aba-->
	border-right-color: #0000FF;<!-- cor da borda da aba-->
	border-left-color: #0000FF;<!-- cor da borda da aba-->
	font-weight: bold;
	background-color: #66CCFF;<!-- cor de fundo-->
}
.divsel {
	visibility: visible;
	position: absolute;
	left: 10px;<!-- distância do conteúdo em relação à esquerda do browser-->
	top: 57px;<!-- distância do conteúdo em relação ao topo-->
	height: 520px;<!-- altura do conteúdo-->
	width: 984px;<!-- largura do conteúdo-->
	background-color: #66CCFF;<!-- cor de fundo do conteúdo-->
	right: 10px;
	bottom: 10px;
}

.divunsel {
	visibility: hidden;
}
-->
</style>
</head>

<body>
<div align="center" id="aba">
	<script language="JavaScript">
		function sel(idaba){
			var aba=document.getElementById(idaba);
			var nAbas="5"; <!-- colocar o número de abas  1-->
			for(var i="1";i<nAbas;i++){
				var id="aba"+i;
				document.getElementById(id).className="unsel";
			}
			aba.className="sel";
			
			for(var u="1";u<nAbas;u++){
				var idt="textaba"+u;
				document.getElementById(idt).className="divunsel";
			}
			var iddiv="text"+idaba;
			document.getElementById(iddiv).className="divsel";
		}
	</script>
	<table width="100%" border="0" align="center" cellspacing="0" id="t_abas">
		<tr id="tr_abas">
			<td width="16,67%" class="unsel">&nbsp;</td>
			<td id="aba1" width="16,67%" class="sel" onClick="sel(this.id)">Aba 1</td><!-- colocar as abas aqui. Cuidado para não mudar as id das abas: formata: aba+número. ver exemplo-->
			<td id="aba2" width="16,67%" class="unsel" onClick="sel(this.id)">Aba 2</td>
			<td id="aba3" width="16,67%" class="unsel" onClick="sel(this.id)">Aba 3</td>
			<td id="aba4" width="16,67%" class="unsel" onClick="sel(this.id)">Aba 4</td>
			<td width="16,67%" class="unsel">&nbsp;</td>
		</tr>
	</table>
</div>
<div id="textaba1" class="divsel">Conteúdo da aba1 aqui</div><!-- colocar aqui o conteúdo das abas. Atenção para seguir o mesmo modelo de id.-->
<div id="textaba2" class="divunsel">Conteúdo da aba2 aqui</div>
<div id="textaba3" class="divunsel">Conteúdo da aba3 aqui</div>
<div id="textaba4" class="divunsel">Conteúdo da aba4 aqui</div>
</body>
</html>

Nós queremos saber sua opinião aqui