Как можно это реализовать на языке HTML?

Задание:

Создать html-документ, разметить его в соответствии с вариантом (см.

далее по тексту). Для ВСЕХ ВАРИАНТОВ в разметке html-документа

использовать:

 тег <DOCTYPE>

 тег <meta> для определения кодировки текста;

 тег <!-- --> комментария;

 теги: <p>, <br>, <div>, <span>, <hr>, один из <h1>  <h6>, <b>, <i>,

<u>, <sub>, <sup>, <pre>, <mark>, <details>, <summary>;

 продемонстрировать отличие в тегах <div> и <span>;

 теги <figure>, <img>, <figcaption> для вставки изображения;

 тег <a> для разметки гиперссылок, разметить ссылки: на другой

документ, в пределах размечаемого документа, на email;

 теги для разметки списка, таблицы, формы в соответствии с вариантом

Что именно? Из скриншота не очень понятно о чем речь, поля форм внизу непонятные.

Ну и для динамической генерации того, что сверху, одного HTML явно не хватит. Это либо JavaScript, либо серверная часть (PHP, …).

Если вопрос именно про таблицы сверху и они статичные (не меняются формой внизу), то см. colspan, rowspan у ячеек (<td>).

http://htmlbook.ru/html/td/colspan
http://htmlbook.ru/html/td/rowspan