Добрый день. У меня проблема с промежуточным испытанием "Испытание 2: медальный зачёт ".
Не могу понять, как правильно разместить значки медалей.
Мой код.
<!DOCTYPE html>
<html>
<head>
<title>2 испытание: медальный зачет</title>
<meta charset="utf-8">
</head>
<body>
<h1>Медальный зачет</h1>
<table>
<tr class="img">
<td colspan="4">
<img class="gold" src="/assets/ifmo/medal-gold.png" />
</td>
<td>
<img class="silver" src="/assets/ifmo/medal-silver.png" />
</td>
<td>
<img class="bronze" src="/assets/ifmo/medal-bronze.png" />
</td>
<td>
<img class="total" src="/assets/ifmo/medal-total.png" />
</td>
</tr>
<tr class="row1">
<td><em>1</em></td>
<td>
<img src="/assets/ifmo/germany.png" />
</td>
<td>Германия</td>
<td>7</td>
<td>3</td>
<td>2</td>
<td><b>12</b></td>
</tr>
<tr class="row2">
<td><em>2</em></td>
<td><img src="/assets/ifmo/nederlands.png" /></td>
<td>Нидерланды</td>
<td>5</td>
<td>5</td>
<td>7</td>
<td><b>17</b></td>
</tr>
<tr class="row3">
<td><em>3</em></td>
<td><img src="/assets/ifmo/norway.png" /></td>
<td>Норвегия</td>
<td>5</td>
<td>3</td>
<td>6</td>
<td><b>14</b></tr>
<tr class="row4">
<td><em>4</em></td>
<td><img src="/assets/ifmo/switzerland.png" /></td>
<td>Швейцария</td>
<td>5</td>
<td>1</td>
<td>1</td>
<td><b>7</b></td>
</tr>
<tr class="row5">
<td><em>5</em></td>
<td><img src="/assets/ifmo/russia.png" /></td>
<td>Россия</td>
<td>4</td>
<td>7</td>
<td>5</td>
<td><b>16</b></td>
</tr>
</table>
<!--
Адреса картинок:
/assets/ifmo/medal-gold.png
/assets/ifmo/medal-silver.png
/assets/ifmo/medal-bronze.png
/assets/ifmo/medal-total.png
/assets/ifmo/germany.png
/assets/ifmo/nederlands.png
/assets/ifmo/norway.png
/assets/ifmo/switzerland.png
/assets/ifmo/russia.png
-->
</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:bold;
}
table{
border-collapse:collapse;
}
td{
padding:10px;
}
.row1{
background-color:#eeeeee;
}
.row3{
background-color:#eeeeee;
}
.row5{
background-color:#eeeeee;
}
td:nth-child(1){
color:#999999;
padding-left:20px;
padding-right:20px;
}
.img{
}
.gold{
text-align:center;
}
.silver{
padding-right
}
.bronze{
}
.total{
}
td:nth-child(2){
padding:0px;
}
td:nth-child(3){
padding:10px 20px;
}
td:nth-child(4){
padding:10px 20px;
text-align:center;
}
td:nth-child(5){
padding:10px 20px;
padding-left:35px;
}
td:nth-child(6){
padding:10px 20px;
padding-left:35px;
}
td:nth-child(7){
padding:10px 30px;
padding-right:20px;
text-align:right;
}
/*
Все внутренние отступы кратны 5
Серый цвет фона: #eeeeee
Серый цвет цифр: #999999
*/