Оцените код 23/23!

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Испытание: итоговая таблица</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Итоговая таблица</h1>
    <table>
      <tr>
        <th>Город</th>
        <th>Посещений</th>   
        <th>%</th>
      </tr>
      <tr>
        <td>СПб</td>     
        <td>199</td>    
        <td>65.12</td>
      </tr>
      <tr>
        <td>Москва</td>  
        <td>69</td>       
        <td>21.3</td>
      </tr>
      <tr>
        <td>Киев</td>    
        <td>5</td>        
        <td>8</td>
      </tr>
      <tr>
        <td colspan="2">Посещений за весь период</td>  
        <td class="two_row">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;
width: 350px;
}

td, th {
padding: 10px;
width: 33%;
}

td {
border-bottom: 1px solid lightgray;
}

td:nth-child(3n+2) {
text-align: center;
}

td:nth-child(3n), th:nth-child(3), td.two_row {
text-align: right;
}

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

th:nth-child(1) {
text-align: left;
background-color: darkcyan;
}

th:nth-child(2) {
background-color: lightblue;
}

th:nth-child(3) {
background-color: darkcyan;
}

tr:nth-child(2n-1) {
background-color: lightyellow;
}

Оцените код!

Эта часть не нравится мне.
Вы могли сначала выровнять все ячейки по центру. А во втором правиле сделать :last-child.
Излишняя группировка не оправдывает себя.

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

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

table {
border-collapse: collapse;
width: 350px;
}

td, th {
padding: 10px;
width: 33%;
}

td {
border-bottom: 1px solid lightgray;
}

td:nth-child(n) {
text-align: center;
}

td:nth-child(3n), th:last-child, td:last-child {
text-align: right;
}

td:nth-child(3n-2), th:first-child {
text-align: left;
}

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

th:first-child {
background-color: darkcyan;
}

th:last-child {
background-color: darkcyan;
}

th:nth-child(n+2):nth-child(-n+2) {
background-color: lightblue;
}

tr:nth-child(2n-1) {
background-color: lightyellow;
}

Вы имели в виду вот так? Я ещё изменил nth у цветов заголовков, чтобы в случае увеличения кол-во ячеек можно было просто изменить значение прибавляемого, и все серединные ячейки были бы голубыми.

В чем смысл этого селектора? Почему нельзя написать text-align в правиле, стоящем выше?
В следующем правиле осталось три селектора. Чем отличается запись 3n и :last-child конкретно для этой таблицы?

“В чем смысл этого селектора? Почему нельзя написать text-align в правиле, стоящем выше?”
Да, и правда не заметил.
“В следующем правиле осталось три селектора. Чем отличается запись 3n и :last-child конкретно для этой таблицы?”
Я думал что last-child работает только на последний из всех td.
Спасибо за замечания.

Для последних td в рамках родителя, то есть каждого tr.

Я это уже понял.
Ещё раз спасибо за замечания!