Порежьте всё на квадратики, чтобы удобнее было понять габариты каждой ячейки.
Можете в стилях записать объединение границ соседних ячеек (border-collapse), а также фиксированный размер каждой ячейки td (30 на 30) и черную рамку в 2 пикселя:
тут таблица
Объявите таблицу:
тут строки tr и в них ячейки td
Затем для каждой строчки объявите <tr></tr>.
В каждом <tr> напишите <td></td> для каждой ячейки, которая еще не была объявлена в предыдущих строчках.
Смотрите на длину ячейки, если она вытянута по горизонтали.
Посчитайте число квадратиков и запишите его в атрибут colspan (длина в столбцах).
Смотрите на высоту ячейки, если она вытянута по вертикали.
Посчитайте число квадратиков и запишите его в атрибут rowspan (высота в строках).
Объявлять ячейку, вытянутую по вертикали, нужно только в той строчке, где находится верхний конец этой ячейки.
Взглянув на этот план, вы без особого труда составите разметку.