какая-то мелочь не пускает к следующему заданию. Уже кучу времени потерял. Не могу найти ошибку.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Испытание: итоговая таблица</title>
    </head>
    <body>
        <h1>Итоговая таблица</h1>
        <table>
            <tr class="darkcyan">
                <th class="pl">Город</th>
                <th class="two">Посещений</th>
                <th class="three">%</th>
            </tr>
            <tr>
                <td class="pl">СПб</td>
                <td class="two">199</td>
                <td class="three">65.12</td>
            </tr>
            <tr class="lightyellow">
                <td class="pl">Москва</td>
                <td class="two">69</td>
                <td class="three">21.3</td>
            </tr>
            <tr>
                <td class="pl">Киев</td>
                <td class="two">5</td>
                <td class="three">8</td>
            </tr>
            <tr class="lightyellow">
                <td colspan="2" class="pl">Посещений за весь период</td>
                <td class="three">273</td>
            </tr>
        </table>
                              
    </body>
</html>`
body {
    width: 350px;
    margin: 0;
    padding: 0 10px;
    font-size: 14px;
    font-family: Arial, sans-serif;
}
table {
    border-collapse: collapse ;   
}

th {
   width: 30%;
   height: 35px;
   border-bottom: solid lightgray 1px;
}
td {
   height: 35px; 
   border-bottom: solid lightgrey 1px;
}
.two {
   text-align: center;   
}
.three {
    text-align: right;
    padding-right: 10px;
}
.lightyellow {
   background: lightyellow;
}
.darkcyan {
     background: darkcyan;
     color: #fff;
     border: solid 1px;
     border-color: black;
     border-left: none;
     border-right: none;
}
.darkcyan .two {
   background: lightblue;   
}
.pl {
   padding-left: 10px;   
}
.darkcyan th {
   border-bottom: none;
}
.darkcyan .pl {
   text-align: left;   
}

Чтобы в вашем скрине был какой-то смысл, картинки должны быть разными. А здесь получается, что вы демонстрируете дважды свой результат.
Размеры ячеек определяются отступами в этом задании, высоту задавать не надо.
HTML-код не вижу, чтобы можно было сказать больше.

Нет, это ваш вариант и… ваш вариант. Вкладка образца левее.
Отступы сверху и снизу составляют высоту ячейки.
Код форматируется с помощью кнопки </>, то есть вы выделяете весь код в сообщении и нажимаете эту кнопку.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Испытание: итоговая таблица</title>
    </head>
    <body>
        <h1>Итоговая таблица</h1>
        <table>
            <tr class="darkcyan">
                <th class="pl">Город</th>
                <th class="two">Посещений</th>
                <th class="three">%</th>
            </tr>
            <tr>
                <td class="pl">СПб</td>
                <td class="two">199</td>
                <td class="three">65.12</td>
            </tr>
            <tr class="lightyellow">
                <td class="pl">Москва</td>
                <td class="two">69</td>
                <td class="three">21.3</td>
            </tr>
            <tr>
                <td class="pl">Киев</td>
                <td class="two">5</td>
                <td class="three">8</td>
            </tr>
            <tr class="lightyellow">
                <td colspan="2" class="pl">Посещений за весь период</td>
                <td class="three">273</td>
            </tr>
        </table>
                              
    </body>
</html>

Если принять общую ширину таблицы как 100%, то ваша получается только 90% (30%*3).
По поводу высоты уже говорила.

странное дело. Если я ставлю значение 33% вместо 30% , то таблица уменьшается в длину. Видно визуально даже.

Да, потому что у Вас не выставлены паддинги. Поэтому она уменьшается. @Ineska Вам уже ДВАЖДЫ дала совет ЛИКВИДИРОВАТЬ высоты в th и td и задать их с помощью паддингов. Изменив всего лишь одно свойство в двух соседних правилах CSS (само собой, задав 33% ширины) у Вас тут же получится 100%.