Вопрос Как продлить границы таблицы в html как на рисунке? Подскажите пожалуйста.

Думаю, что через after и before tr { position:relative; } th::before { background: #ddd; content: ""; height: 1px;/*высота линии*/ position: absolute; right: -10px; top: -1px; width: 10px; /*ширина линии*/ } и с td::before тоже самое, только подровнять уровень линии надо правильно и задать класс к тем td и tr, к которым будут применяться линии, что бы не было накладок на внутренние линии таблицы

Тебе придётся добавить туда ещё ячеек небольшого размера и стили зовать их

варианты:
1) псевдоэлементы before и after
2) дополнительные ячейки, которые ты так застилишь (повесишь класс и застилишь класс)
3) если делается по макету, то картинку фона и паддинги (дцп вариант, но я видел людей, которые так делают в 2016 году:17_64