23/23 таблица

Сделал на 100 процентов. Подскажите, сильно "грязный"/нагроможденный код получился?
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Испытание: итоговая таблица</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Итоговая таблица</h1>
    <table>
    <tr>
      <th class="darkcyan" align=left>Город</th>
      <th class="lightblue middlecolon">Посещений</th>
      <th class="darkcyan rightcolon">%</th>
      </tr>
      
      <tr>
      <td>СПб</td>
      <td class="middlecolon">199</td>
      <td class="rightcolon">65.12</td>
        </tr>
        
        <tr class="lightyellow">
      <td>Москва</td>
      <td class="middlecolon">69</td>
      <td class="rightcolon">21.3</td>
          </tr>
          
          <tr>
      <td>Киев</td>
      <td class="middlecolon">5</td>
      <td class="rightcolon">8</td>
            </tr>
            
            <tr class="lightyellow">
      <td colspan="2">Посещений за весь период</td>
      <td class="rightcolon">273</td>
              </tr>
          </table>
  </body>
</html>


.rightcolon {
  text-align: right;
}

.leftcolon {
  text-align: left;
}

.middlecolon {
  text-align: center;
}

.lightyellow {
  background-color: lightyellow;
}

.darkcyan {
  background-color: darkcyan;
  color: white;
}

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

table {
  border-collapse: collapse;
}

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

td {
  border-bottom: 1px solid lightgrey;
  padding: 10px;
  width: 33%;
}

body {
  width: 350px;
  margin: 0;
  padding: 0 10px;

  font-size: 14px;
  font-family: "Arial", sans-serif;
}

Для чего?