23/23 не могу пройти последнее задание

Курсы §5. Знакомство с таблицами
1

код попробую прикрепить ниже

2

3

Приложите текстом код, по картинкам сложно понять.

4 
        <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Испытание: итоговая таблица</title>
    </head>
    <body>
        <h1>Итоговая таблица</h1>
        <table>
        <tr class='border'>
            <th class='darkcyan left-text'>Город    </th>
            <th class='lightblue text-center'>Посещений</th>
            <th class='darkcyan text-right'>%</th>
        </tr>
        <tr>
            <td class='left-text'>СПб     </td>
            <td class='text-center'>199     </td>
            <td class='text-right'>65.12   </td>
        </tr>
        <tr class='lightyellow'>
            <td class='left-text'>Москва  </td>
            <td class='text-center'>69      </td>
            <td class='text-right'>21.3    </td>
        </tr>
        <tr>
            <td class='left-text'>Киев    </td>
            <td class='text-center'>5       </td>
            <td class='text-right'>8       </td>
        </tr>
        <tr class='lightyellow'>
            <td colspan="2" class='left-text'>Посещений за весь период</td>
            <td class='text-right'>273</td>
        </tr>
        </table>
    </body>
</html>
5

не понимаю, как скинуть это в виде кода
не подскажете?

6

если что, первые две картинки перепутаны

7

Когда вставляете код, выделите его и нажмите кнопочку preformatted text или комбинацию клавиш ctrl+k. Так код будет отформатирован )

8

Так, HTML есть, теперь прицепите CSS.

9 
body {
    width: 350px;
    margin: 0;
    padding: 0 10px;
    font-size: 14px;
    font-family: Arial;
}

table {
    border-collapse: collapse;
    width: 350px;
}

th, td {
    height: 20px;
    padding: 10px
}

th {
    width: 33%;
    color: white;
}

.border {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}

.darkcyan {
    background-color: darkcyan;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.lightblue {
    background-color: lightblue;
}

tr {
    width: 33%;
    border-bottom: 1px solid lightgray;
}

.lightyellow {
    background: lightyellow;
}

.left-text {
    text-align: left;
}
10

Загвоздка в этом правиле. Отступы сами определяют высоту, явно её задавать не следует.

11

большущее спасибо)

12

Помогите, пожалуйста, найти ошибку http://codepen.io/anon/pen/ZbLGrx
В последней строке немного разнится высота.

111.jpg584×800 43.8 KB

13

Инлайновые стили не приветствуются. Попробуйте все оформление сделать в CSS-редакторе.

14

Проверьте, как вы закрыли строки (</tr>). :wink:

15

Спасибо. Сейчас попробую, правда результат увижу завтра, так как при обновлении страницы истратил все “Проверки”.
Инлайновые стили применил, так как с их помощью в обучении оформляли код. Поэтому использовать все, что проходил в теме.

16

А инлайновые стили не рекомендуются из-за приоритета, замучаешься перебивать (а точнее только !important).

17

Да, есть один косяк с tr - поправил. Результат, как уже выше написал увижу только завтра. Так что для меня интрига пока остается. :smile:
ЗЫ, за совет по инлайн спасибо. Зарублю на носу.

18

Там два косяка с tr. 3 и 4 строки.

19

Точно. Спасибо.
В догонку вопрос. Мне на странице задания дали совет добавить th {border-top: 1px solid black;}, я же в своем варианте решил это table {border-collapse: collapse; border-top: 1px solid black;}
Вопрос. Это равнозамещающие решения или первый вариант более верен?
Спасибо.

20

плюс закрывающий тег </table>. И тогда 100% даже с инлайновыми. Но их все же стоит заменить.