Промежуточные испытания / Испытание 2: медальный зачёт

Nik1111 · 14.Февраль.2016 09:38:31

Что не так?

<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><b>12</b></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><b>17</b></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><b>14</b></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><b>7</b></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><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, 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;
padding-right: 20px;
padding-left: 20px;
}
table{
border-collapse: collapse;
}

tr:nth-child(2){
background-color:#eeeeee;
}
tr:nth-child(4){
background-color:#eeeeee;
}
tr:nth-child(6){
background-color:#eeeeee;
}
td:first-child{
color:#999999;
font-style:italic;
text-align: center;
}

/*
Все внутренние отступы кратны 5
Серый цвет фона: #eeeeee
Серый цвет цифр: #999999
*/

Ineska · 14.Февраль.2016 10:38:43

Обнулите отступы слева и справа для столбца с флагами.
Уберите тег <b> из HTML-кода. Воспользуетесь свойством font-weight: bold;
Этот фрагмент кода можно сократить:
tr:nth-child(2){
background-color:#eeeeee;
}
tr:nth-child(4){
background-color:#eeeeee;
}
tr:nth-child(6){
background-color:#eeeeee;
}
Будет всего одна запись:
tr:nth-child(even){
background-color:#eeeeee;
}
Пустые ячейки в HTML-коде лучше объединить. Хотя и без объединения у вас будет 100%.

Nik1111 · 14.Февраль.2016 11:26:44

Спасибо за такую информацию. Но как пройти задание? и даже 90 процентов нету

Ineska · 14.Февраль.2016 12:21:02

Покажите, что у вас получилось с моими рекомендациями. Будем смотреть, насколько хорошо вы меня поняли.

Nik1111 · 14.Февраль.2016 18:00:14

Не зfметил первый пункт. Вроде похоже стало. Завтра проверю. Спасибо большое
А как это понять можно было?

Ineska · 14.Февраль.2016 18:02:42

Не знаю. В чужую голову не залезешь) Поэтому и хотела посмотреть.

Nik1111 · 14.Февраль.2016 18:04:35

Нормально) А вы на 100 процентов были уверены в этом?

Ineska · 14.Февраль.2016 18:07:04

Да, я проверяю код и рекомендации, всегда подгоняю под 100%, не пишу, если не уверена, что будет правильно.

Nik1111 · 14.Февраль.2016 18:08:44

Понятно. Еще раз благодарю

Nik1111 · 15.Февраль.2016 16:49:49

Не получается. Не понимаю, что не так. Вроде все сделал.

<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>

    <!--
    Адреса картинок:
    /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, 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;
padding-right: 15px;
padding-left: 25px;

}
td:last-child{
font-weight: bold;
text-align: right;
}

table{
border-collapse: collapse;
}

tr:nth-child(even){
background-color:#eeeeee;
}

td:first-child{
color:#999999;
font-style:italic;
text-align: center;
}

td:nth-child(2){
padding-left: 0.5px;
padding-right: 0;
}

/*
Все внутренние отступы кратны 5
Серый цвет фона: #eeeeee
Серый цвет цифр: #999999
*/

Nik1111 · 15.Февраль.2016 16:53:01

Удее все, разобрался каким-то чудом. Я вот так сделал:
td{
padding: 10px;
padding-right: 20px;
padding-left: 20px;
И заработало))

Olya_S_levich · 03.Март.2016 11:22:29

91 процент, отступы неправильные, начиная с 5 столбика…как разобраться?

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

Ineska · 03.Март.2016 14:19:57

В этом фрагменте замените селектор на селектор класса, который добавите в HTML-код. Например, .flags.
td:nth-child(2) {
padding-right:0px;
padding-left:0px;
}
Шапку таблицы вы делали без использования th. После объединения (<td colspan="3">),
в первой строке таблицы у вас получается в общем 5 ячеек: первая
объединенная - пустая, а вторая по счету получается “золотая медаль”.
Когда вы пишите td:nth-child(2), то получается, что убираете отступы
справа и слева для этой медали. Поэтому всё остальное
"съезжает".
Или другой вариант. Сделайте шапку таблицы применяя тег <th>.