Испытание 2. Как угадывать отступы?

Медальный зачет

Я не могу понять как короче записать этот код, и чтобы получилось не 98 а 100%:

Ineska · 05.Февраль.2016 18:31:48

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

Margarita_Bykova · 07.Февраль.2016 10:01:40

Спасибо большое! 93%! думаю, это из-за шапки таблицы, которую я делала без

.
Читаю курс - все понятный кажется! а вот на практике торможу иногда(((
Спасибо еще раз за помощь сама бы я не победила это задание)))

Ineska · 07.Февраль.2016 10:07:32

Должно быть 100%. Давайте посмотрим, что вы еще не сделали.

Margarita_Bykova · 07.Февраль.2016 10:11:07


    
       2 испытание: медальный зачет
       
    
    
        Медальный зачет

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;
}
/* 
    Все внутренние отступы кратны 5
    Серый цвет фона: #eeeeee
    Серый цвет цифр: #999999
*/
table {
border-collapse:collapse;
}

table{
    border-collapse: collapse;
}

td{
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 20px;
    padding-left:20px;
}
tr:nth-child(2n){
    background: #eeeeee;    
}
td:nth-child(1){
    color: #999999; 
    font-style: italic;
}
.flag{
    padding-right:0px;
    padding-left:0px;
}

td:nth-child(7){
    text-align: right;
    font-weight: bold;
}

Ineska · 07.Февраль.2016 10:16:37

Уберите тег <b> из HTML-кода.

Margarita_Bykova · 08.Февраль.2016 09:00:41

100% !!!всего лишь убрать требовалось!!! я в шоке!!! спасибо большое!!!

DrakD · 17.Март.2016 10:38:02

HTML:

    <!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>
                <th><img src="/assets/ifmo/medal-total.png"</th>
            </tr>
            <tr>
                <td>1</td>
                <td><img src="/assets/ifmo/germany.png"></td>
                <td>Германия</td>
                <td>7</td>
                <td>3</td>
                <td>2</td>
                <th>12</th>
            </tr>
            <tr>
                <td>2</td>
                <td><img src="/assets/ifmo/nederlands.png"></td>
                <td>Нидерланды</td>
                <td>5</td>
                <td>5</td>
                <td>7</td>
                <th>17</th>
            </tr>
            <tr>
                <td>3</td>
                <td><img src="/assets/ifmo/norway.png"></td>
                <td>Норвегия</td>
                <td>5</td>
                <td>3</td>
                <td>6</td>
                <th>14</th>
            </tr>
            <tr>
                <td>4</td>
                <td><img src="/assets/ifmo/switzerland.png"></td>
                <td>Швейцария</td>
                <td>5</td>
                <td>1</td>
                <td>1</td>
                <th>7</th>
            </tr>
            <tr>
                <td>5</td>
                <td><img src="/assets/ifmo/russia.png"></td>
                <td>Россия</td>
                <td>4</td>
                <td>7</td>
                <td>5</td>
                <th>16</th>
            </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;
}
/* 
    Все внутренние отступы кратны 5
    Серый цвет фона: #eeeeee
    Серый цвет цифр: #999999
*/
table {
    border-collapse: collapse;
    border: 0px;
}
tr:nth-child(2n+2){
    background: #eee;   
}
td {
    padding-top: 10px;
    padding-bottom: 10px;
}
td:first-child {
    color: #999;
    font-style: italic;
    padding-left: 20px;
    padding-right: 10px
}
td:nth-child(2) {
    padding-left: 10px;
    padding-right: 10px;
}
td:nth-child(3) {
    padding-left: 10px;
    padding-right: 20px;
}
td:nth-child(4) {
    padding-left: 20px;
    padding-right: 20px;
}
td:nth-child(5) {
    padding-left: 20px;
    padding-right: 20px;
}
td:nth-child(6) {
    padding-left: 20px;
    padding-right: 40px;
}
td:nth-child(7) {
    padding-left: 30px;
    padding-right: 20px;
}

Ineska · 17.Март.2016 18:11:09

В том, что вы так спешите, нет ничего хорошего. Одна таблица чего стоит…
Но начнем с начала. Тег th используется для создания шапки таблицы, а ваша “шапка” - это последний столбец, насколько я поняла.
Теперь вот этот фрагмент:
td:nth-child(7) {
padding-left: 30px;
padding-right: 20px;
}
У вас нет такой ячейки ни в одной строке. Последняя ячейка в каждой строке сделана с помощью тега th.
Учитесь пользоваться поиском по форуму.
Дальнейшие свои ошибки можете посмотреть в этой теме: Промежуточные испытания / Испытание 2: медальный зачёт

Ivan_Ukhov · 01.Апрель.2016 01:29:49

Помогите пожалуйста, не понимаю, что не так.

2 испытание: медальный зачет

Нидерланды

     <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-left: 20px;
padding-right: 20px;
}
td:first-child{
color: #999999;
font-style: italic;
}
td:last-child{
text-align: right;
font-weight: bold;
}

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

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

Ineska · 01.Апрель.2016 07:30:28

Обнулите отступы справа и слева у столбца с флагами.

Ivan_Ukhov · 02.Апрель.2016 16:21:02

Спасибо большое))

AIexey · 03.Апрель.2016 10:15:54

Добрый день помогите пожалуйста разобраться. Испытание выполнил, но запутался в одном моменте css.
почему такой код отрабатывает отступы

td {padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;}
.flag{padding-top: 10px;
padding-bottom: 10px;
padding-left: 0px;
padding-right: 20px; }
.strana{ padding-top: 10px;padding-bottom: 10px;padding-left: 0px; padding-right: 20px;}
А вот так приводит к другому результату
td {padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;}
td:nth-child(2){padding-top: 10px;
padding-bottom: 10px;
padding-left: 0px;
padding-right: 20px; }
td:nth-child(3){{ padding-top: 10px;padding-bottom: 10px;padding-left: 0px; padding-right: 20px;}
Понимаю связано наверное с наследственностью и специфичностью , но видно есть недопонимание.
В коде вместо обращения через класс обращаемся через псевдокласс и можно ли как то обойтись без задания классов в этом примере используя nth-child. td:nth-child(2) это второй столбец так же как и .flag и td:nth-child(3)
это тот же столбец в таблице, что и .strana

Ineska · 03.Апрель.2016 10:18:57

Мне нужен ваш HTML-код. Все зависит от того, как вы там писали.

AIexey · 03.Апрель.2016 10:21:44

    <h1>Медальный зачет</h1>
    <table id="tablic">
        <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 class="number"> 1 </td>
            <td class="flag"> <img src="/assets/ifmo/germany.png"></td>
            <td class="strana">Германия</td>
            <td>7</td>
            <td>3</td>
            <td>2</td>
            <td>12</td>
        </tr>
        <tr>
            <td class="number"> 2 </td>
            <td class="flag"> <img src="/assets/ifmo/nederlands.png"></td>
            <td class="strana">Нидерланды</td>
            <td>5</td>
            <td>5</td>
            <td>7</td>
            <td>17</td>
        </tr>
        <tr>
            <td class="number"> 3 </td>
            <td class="flag"> <img src="/assets/ifmo/norway.png"></td>
            <td class="strana">Норвегия</td>
            <td>5</td>
            <td>3</td>
            <td>6</td>
            <td>14</td>
        </tr>
        <tr>
            <td class="number"> 4 </td>
            <td class="flag"> <img src="/assets/ifmo/switzerland.png"></td>
            <td class="strana">Швейцария</td>
            <td>5</td>
            <td>1</td>
            <td>1</td>
            <td>7</td>
        </tr>
        <tr>
            <td class="number"> 5 </td>
            <td class="flag"> <img src="/assets/ifmo/russia.png"></td>
            <td class="strana">Россия</td>
            <td>4</td>
            <td>7</td>
            <td>5</td>
            <td>16</td>
        </tr>
    </table>

AIexey · 03.Апрель.2016 10:25:09

css
td {padding-top: 10px;padding-bottom: 10px;padding-left: 20px;
padding-right: 20px;}
.flag{padding-top: 10px;padding-bottom: 10px;padding-left: 0px;
padding-right: 20px; }
.strana{ padding-top: 10px;padding-bottom: 10px;padding-left: 0px;
padding-right: 20px;}

Ineska · 03.Апрель.2016 10:45:43

Вообще первый раз вижу здесь пример кода с комментированием каждой строки. Я тоже так часто делаю. Когда знаешь, для чего в коде каждое написанное свойство, вероятность лишних строк почти равна нулю.
Но возвращаюсь к вашему вопросу.
Да, вы правы. .flag и td:nth-child(2) - это одно и то же. Если бы не одно обстоятельство. “Шапка” таблицы. После объединения ячеек там их меньше, чем в других строках. И второй по счету ячейкой в шапке получается ячейка с медалью. Отступы у медали меняются - и вся таблица ломается.
Сделайте шапку с помощью th, тогда сможете воспользоваться селектором td:nth-child(2).
(Еще уберите идентификатор у тега table, в CSS он не используется. В CSS-редакторе каждое свойство пишите с новой строки. Если у вас внутренний отступ задается с каждой стороны. то лучше написать всё в одном: padding: 10px 20px 10px 20px; или даже так padding: 10px 20px; )
Ссылка на кодгайд есть у вас?

AIexey · 03.Апрель.2016 10:54:41

Ineska спасибо огромное все понял. Да про лишние элементы в штмл знаю просто пишу и проверяю различные варианты играюсь так сказать с заданием, чтобы получше вникнуть. А что такое ссылка на кодгайд я тут новичек . Просто решил в темпе выучить штмл css js php пока есть лишнее время. Ну то есть я незнаю , что за кодгайд такой)))
А в css убрал лишние строки просто для компактности, а так у меня там все обычнокрасиво с новых строк и со смещениями всякими для наглядности.

Ineska · 03.Апрель.2016 10:58:10

Рекомендации по оформлению кода.
Обязательно к прочтению)
https://htmlacademy.github.io/codeguide/

temar · 14.Сентябрь.2017 10:25:18

Я понимаю, что курс сейчас “архивный” , но если возможно, прокомментируйте, пожалуйста, упражнение довольно интересное (100Текст "как есть" (без применения форматирования)%):

HTML:

<!DOCTYPE html>
<html>
    <head>
       <title>2 испытание: медальный зачет</title>
       <meta charset="utf-8">
    </head>
    <body>
        <h1>Медальный зачет</h1>
<table>
<tr>
    <th colspan="3"></th>
    <th><img src="/assets/ifmo/medal-gold.png"></th>
    <th><img src="/assets/ifmo/medal-silver.png"></th>
    <th><img src="/assets/ifmo/medal-bronze.png"></th>
    <th><img src="/assets/ifmo/medal-total.png"></th>
    
</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>

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;
}
/*
Все внутренние отступы кратны 5
Серый цвет фона: #eeeeee
Серый цвет цифр: #999999
*/
table {
border-collapse: collapse;
}
td {
padding: 10px;
padding-left: 20px;
padding-right: 20px;
}

th {
padding: 10px;
padding-left: 20px;
padding-right: 20px;
}

tr:nth-child(2n) td {
background: #eeeeee;

}

tr td:first-of-type {
color: #999999;
font-style: italic;
}

tr td:last-of-type {
font-weight: bold;
text-align: right;

}
tr td:first-of-type {
color: #999999;
font-style: italic;
}
tr td:nth-child(2) {
padding-right:0px;
padding-left:0px;
}

Ineska · 15.Сентябрь.2017 05:32:14

Всё правильно у вас. Разве что padding одной строкой могли написать.