Você pode fazer isso com colspan
e definindo um width
de acordo com a quantidade de colunas dividindo por 100%. Por exemplo: 3 colunas = 33.3%, 4 colunas = 25% e por aí vai...
Exemplo de 2 linhas de 4 x 3 colunas:
<table width="100%" border="1">
<tr>
<td width="25%"> ola </td>
<td width="25%" colspan="3"> ola </td>
<td width="25%" colspan="2"> ola </td>
<td width="25%"> ola </td>
</tr>
<tr>
<td width="33.3%" colspan="2"> ola </td>
<td width="33.3%" colspan="3"> ola </td>
<td width="33.3%" colspan="2"> ola </td>
</tr>
</table>
3x2:
<table width="100%" border="1">
<tr>
<td width="33.3%"> ola </td>
<td width="33.3%" colspan="3"> ola </td>
<td width="33.3%"> ola </td>
</tr>
<tr>
<td width="50%" colspan="3"> ola </td>
<td width="50%" colspan="2"> ola </td>
</tr>
</table>
5x4:
<table width="100%" border="1">
<tr>
<td width="20%"> ola </td>
<td width="20%" colspan="4"> ola </td>
<td width="20%" colspan="3"> ola </td>
<td width="20%" colspan="4"> ola </td>
<td width="20%"> ola </td>
</tr>
<tr>
<td width="25%" colspan="2"> ola </td>
<td width="25%" colspan="5"> ola </td>
<td width="25%" colspan="4"> ola </td>
<td width="25%" colspan="2"> ola </td>
</tr>
</table>
A lógica é meio complicada, mas se baseia nos valores dos colspan
somados e no número de colunas. Veja que na linha onde possui mais colunas, eu não especifico colspan
na primeira e última, apenas nas do meio. A soma dos colspan
+ número de colunas sem colspan
de cada linha devem ser iguais. No primeiro exemplo, veja que somando o valor de colspan="3"
na primeira linha + 2 colunas sem colspan
, dá 5. Na segunda linha também dá 5 somando os valores do colspan
. Esses números sobem à medida que vai se adicionando mais colunas.
Veja um outro exemplo com 5x3:
<table width="100%" border="1">
<tr>
<td width="20%"> ola </td>
<td width="20%" colspan="4"> ola </td>
<td width="20%" colspan="3"> ola </td>
<td width="20%" colspan="4"> ola </td>
<td width="20%"> ola </td>
</tr>
<tr>
<td width="33.3%" colspan="3"> ola </td>
<td width="33.3%" colspan="7"> ola </td>
<td width="33.3%" colspan="3"> ola </td>
</tr>
</table>
Veja que a lógica segue a mesma: somando os valores da primeira linha, 1+4+3+4+1 = 13. Na segunda linha também: 3+7+3 = 13.