Hola, Omar.
No sé si seguirás todavía por aquí. He tardado lo mío porque lo que querías conseguir, para hacer que sea compatible a explorer y firefox es mucho más complicado de lo que parece. Si fuera sólo para firefox es muy fácil, pero (como siempre), para explorer es un cristo.
Es mucho más jodido de lo que parece. Creo que es uno de los retos que más complicado me ha resultado, pero como siempre, he aprendido cosas, con lo que me doy por satisfecho.
Espero que te sirva, aunque probablemente habrás buscado otra solución y ya no valga de mucho.
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tabla simulada</title>
<style type="text/css">
#contenedor { width: 320px;
margin: 0 auto;
}
.capa1, .capa6 { margin: 0pt auto;
display: block;
background-color: rgb(255, 0, 0);
font-weight: bold;
text-align: center;
font-size: 2em;
padding-top: 8px;
padding-bottom: 8px;
width: 320px;
}
.capa6 { background-color: rgb(0, 0, 102);
color: rgb(255, 255, 255);
padding-top: 8px;
padding-bottom: 8px;
}
.centro1, .centro2 {
font-size: 2em;
display: block;
float: left;
width: 160px;
}
.centro1 { border-right: 160px solid rgb(255, 255, 0);
background-color: rgb(51, 51, 255);
}
.centro2 { border-right: 160px solid rgb(255, 102, 0);
background-color: rgb(51, 255, 51);
}
.capa2, .capa3, .capa4, .capa5 {
padding-top: 8px;
font-weight: bold;
padding-bottom: 8px;
font-size: 1em;
position: relative;
width: 160px;
text-align: center;
float: left;
}
.capa3, .capa5 {
margin-right: -160px;
background-color: transparent;
}
.capa2 {background-color: rgb(51, 51, 255);
}
.capa4 {background-color: rgb(51, 255, 51);
}
</style>
</head>
<body>
<div id="contenedor">
<div class="capa1">capa 1</div>
<div class="centro1">
<div class="capa2">capa 2</div>
<div class="capa3">capa 3</div>
</div>
<div class="centro2">
<div class="capa4">capa 4</div>
<div class="capa5">capa 5</div>
</div>
<div class="capa6">capa 6</div>
</div>
</body>
</html>
Mikel.