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