Здравствуйте! не могу понять что не так! помогите, пожалуйста!

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Испытание: итоговая таблица</title>
    </head>
    <body>
        
        <table>  
        <h1>Итоговая таблица</h1>
     
<tr>
           <th class="row-top1" 
         style="width= 31%"
         style="height= 25px">
                 Город 
          </th> 
           
          <th class="row-top2" style="width: 33%;">Посещений </th>
          <th class="row-top3" style="width: 33%;"> %</th> 
          
          </tr>
           
<tr> 
           <td class="row-1" >CПб </td>  
           <td class="row-2">    199  </td >
           <td class="row-3"> 65.12</td> </tr>
           
<tr class="line">   
           <td class="row-1" >Москва </td> 
           <td class="row-2"> 69    </td> 
           <td class="row-3">  21.3</td> </tr>

<tr> 
           <td class="row-1"> Киев </td>    
           <td class="row-2">   5    </td> 
           <td class="row-3"> 8 </td> </tr>
           
<tr class="line"> 
           <td class="row-1" colspan="2";>  Посещений за весь период   </td> 
           <td class="row-3" colspan="2";> 273</td> </tr>

</table>
    </body>
</html>

body {
width: 350px;
margin: 0;
padding: 0 10px;
font-size: 14px;
font-family: Arial, sans-serif;
}

table {
padding: 5px;
border-collapse: collapse;
}

td {
padding: 10px;
border: 3px lightgrey;
border-bottom: 2px solid lightgray;
text-align: center;
}

th {
border-top: 1px solid black;
border-bottom: 1px solid black;

}

.row-top1 {
background-color: darkcyan;
color: white;
text-align: left;
}

.row-top2 {
background-color: lightblue ;
color: white;
}

.row-top3{
background-color: darkcyan;
color: white;
text-align: right;
}

.row-1 {
text-align: left;
}

.row-3{
text-align: right;
}

.line{
background-color: lightyellow;
}

Очень плохо видно HTML-код. Вставьте правильно с помощью кнопки </>