1. <table>
<tbody>
<tr>
<td rowspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
2. <table>
<tbody>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</tbody>
</table>
3. <table>
<tbody>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
4. <table>
<tbody>
<tr>
<td></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</tbody>
</table>
Старайтесь мыслить шире и искать решение в интернете! Существует множество генераторов HTML разметки для ваших целей! Удачи! Насчёт квадратов по 100 пикселей, задайте через атрибут style width: 100px
