Что улучшить?

Здравствуйте. Испытание прошел, совпадение 100%. Старался сделать максимально компактный и адекватный код. Подскажите пожалуйста что еще можно улучшить?

<!DOCTYPE html>
<html>
    <head>
       <title>2 испытание: медальный зачет</title>
       <meta charset="utf-8">
    </head>
    <body>
        <h1>Медальный зачет</h1>
        
        <table>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td><img src="/assets/ifmo/medal-gold.png"></td>
                <td><img src="/assets/ifmo/medal-silver.png"></td>
                <td><img src="/assets/ifmo/medal-bronze.png"></td>
                <td><img src="/assets/ifmo/medal-total.png"></td>
            </tr>
            <tr>
                <td>1</td>
                <td><img src="/assets/ifmo/germany.png"></td>
                <td>Германия</td>
                <td>7</td>
                <td>3</td>
                <td>2</td>
                <td>12</td>
            </tr>
            <tr>
                <td>2</td>
                <td><img src="/assets/ifmo/nederlands.png"></td>
                <td>Нидерланды</td>
                <td>5</td>
                <td>5</td>
                <td>7</td>
                <td>17</td>
            </tr>
            <tr>
                <td>3</td>
                <td><img src="/assets/ifmo/norway.png"></td>
                <td>Норвегия</td>
                <td>5</td>
                <td>3</td>
                <td>6</td>
                <td>14</td>
            </tr>
            <tr>
                <td>4</td>
                <td><img src="/assets/ifmo/switzerland.png"></td>
                <td>Швейцария</td>
                <td>5</td>
                <td>1</td>
                <td>1</td>
                <td>7</td>
            </tr>
            <tr>
                <td>5</td>
                <td><img src="/assets/ifmo/russia.png"></td>
                <td>Россия</td>
                <td>4</td>
                <td>7</td>
                <td>5</td>
                <td>16</td>
            </tr>
        </table>
    </body>
</html>

И собственно CSS

html, body{
margin:0;
padding:0;
}
body{
width:450px;
font-family:“Arial”, sans-serif;
font-size:16px;
}
h1{
padding:0 20px;
margin:0;
margin-top:20px;
font-size:18px;
font-weight:normal;
}
td {
padding: 10px;
}
tr:nth-child(even) {
background-color: #eeeeee;
}
table {
border-collapse: collapse;
}
td:first-child {
color:#999999;
font-style: italic;
padding-left: 20px;
}
td:nth-child(4),
td:nth-child(5),
td:nth-child(6),
td:nth-child(7) {
padding-left: 30px
}
td:last-child {
font-weight: bold;
padding-right: 20px;
text-align: right;
}

Шапку лучше сделать с помощью тега th, пустые ячейки объединить в одну. Общие отступы внутри ячеек по 10px сверху и снизу и по 20px справа и слева. Отступы у столбца с флагами справа и слева нулевые. Таким образом не нужно будет прописывать отступы для каждого столбца отдельно.

1 лайк

Спасибо за совет. Скажите в чем в данном случае будет преимущество th перед td ?

И наверное если я объединю первые 3 ячейки, то нужно будет создать для них отдельный класс, потому-что псевдокласс для столбца с флагами повлияет и на золотую медаль.

Именно для этого вам и нужно использовать th, тогда у th вы пропишите свои отступы, а использование псевдоклассов не будет ломать таблицу.