Hola
Farookh_Bulsara
La pregunta es: ¿Y tiene que ser una tabla?. Porque eso se puede hacer muy bien con div y css (es muy simple). O también puedes componerlo con dos tablas juntas (sin que se perciba gráficamente la unión).
Como no dices cuál será el uso de ese mosaico, es díficil concretar una respuesta.
Te pongo el código de lo que pides con dos tablas juntas (gráficamente parece una única tabla), pero si lo vas a utilizar para otra cosa distinta de tabular datos, es mucho mejor que uses una composición de divs y css.
Los colores son sólo a efectos didácticos-visuales:
Código HTML:
<!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>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Composición de tablas con celdas irregulares</title>
<style type="text/css">
#envolvente {
width: 600px;
height: 100px;
background-color: #000;
margin: 0 auto;
padding: 0;
}
.tabla1 {
border-collapse: collapse;
border: 1px solid #777;
border-bottom: 0;
width: 600px;
height: 50px;
}
.tabla2 {
border-collapse: collapse;
border: 1px solid #777;
border-top: 0;
width: 600px;
height: 50px;
}
.cien {
width: 100px;
height: 50px;
background-color:#ffc
}
.dosc {
width: 200px;
height: 50px;
background-color: #CCCCCC
}
.ccin {
width: 150px;
height: 50px;
background-color: #cc0
}
.trec {
width: 300px;
height: 50px;
background-color: #FF5050
}
.cinc {
width: 50px;
height: 50px;
background-color: #6666FF
}
.tabla1 td {
border: 1px solid #999;
border-bottom: 0;
}
.tabla2 td {
border: 1px solid #999;
}
</style>
</head>
<body>
<div id="envolvente">
<table id="tbl1" class="tabla1">
<tr>
<td class="cien">100</td>
<td class="dosc">200</td>
<td class="ccin">150</td>
<td class="ccin">150</td>
</tr>
</table>
<table id="tbl2" class="tabla2">
<tr>
<td class="dosc">200</td>
<td class="trec">300</td>
<td class="cinc">50</td>
<td class="cinc">50</td>
</tr>
</table>
</div>
</body>
</html> Saludos
