Испытание #2 беда с отступами

Курсы Промежуточные испытания
1

Походу намудрил с отступами. 3 день воюю с ними. Уже начинает выбешивать.

<!DOCTYPE html>
<html>
    <head>
       <title>2 испытание: медальный зачет</title>
       <meta charset="utf-8">
    </head>
    <body>
        <h1>Медальный зачет</h1>
        <table cellpadding='10'>
            <tr>
                <td colspan='3'></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>
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;
}
table {
    border-collapse: collapse;
}
td {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 20px;
    padding-left: 10px;
}
td:first-child {
    font-style:italic;
    color:#999999;
    padding-left:20px;
}
td:last-child {
    font-weight: bold;
    text-align: center;
}
tr {
    padding:10px;
}
tr:nth-child(even) {
    background-color: #eeeeee;
    padding:0;
}
2
  • в HTML 2 раза повторяется Норвегия;
  • и, да, надо поиграть с отступами )) как минимум, попробуйте всем ячейкам задать вертикальные отступы 10px, а горизонтальные — 20px, у второй ячейки убрать горизонтальные отступы.
2 лайка
3

Вот немного изменил, вышел на 90%. Не очень понятно, почему отступы заработали только для 1-3 столбцов, а для столбцов с медалями на заработали. Попробовал для них установить nth-child(n+4) {margin: 30px;}, не работает… Или стоит какой-то стиль применить для столбцов с медалями?

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;
}
table {
    border-collapse: collapse;
}
td {
    padding: 10 20px;
}
td:first-child {
    font-style:italic;
    color:#999999;
    padding-left:20px;
}
td:last-child {
    font-weight: bold;
    text-align: center;
}
td:nth-child(n+4) {
    margin: 30px;
}
tr {
    padding:10px;
}
tr:nth-child(even) {
    background-color: #eeeeee;
    padding:0;
}
4

Пересмотрите все свои отступы. Желательно прочитывая каждое правило, в уме представлять, как оно влияет на элементы в таблице или на всю таблицу. Есть у вас свойства, которые перекрывают одно другое. Например, у вас есть стили для ячеек, а потом для целых строк. И в одних, и в других есть padding. Для начала уберите лишние. Посмотрим, что получится.

5

Попробую для таблицы сбросить наверное отступы все, а потому указать их элементам таблицы…

6

но лучше ячейкам, чем строкам.