Итоговая таблица 23/23: поиск возможных критических ошибок или разумная и логическая оптимизация кода.

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

Доброго времени суток))
Подскажите, пожалуйста, можно как-то оптимизировать мой вариант оформления или возможно есть какие-то критические ошибки или противоречия… На начальных испытаниях был “разбор испытания” - полезная штука, а вот дальше нет… Заранее спасибо!

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Испытание: итоговая таблица</title>
    </head>
    <body>
        <h1>Итоговая таблица</h1>
        <table>
            <tr>
                <th class="fl">Город</th>
                <th class="midd">Посещений</th>
                <th class="fl R-t">%</th>
            </tr>
            <tr>
                <td>СПб</td>
                <td class="C-r">199</td>
                <td class="R-t">65.12</td>
            </tr>
            <tr class="clr1">
                <td>Москва</td>
                <td class="C-r">69</td>
                <td class="R-t">21.3</td>
            </tr>
            <tr>
                <td>Киев</td>
                <td class="C-r">5</td>
                <td class="R-t">8</td>
            </tr>
            <tr class="clr2">
                <td colspan="2">Посещений за весь период</td>
                <td class="R-t">273</td>
            </tr>
        </table>
    </body>
</html>

.fl {
    background-color: darkcyan;
    text-align: left;
}

.C-r {
    text-align: center;
}

.midd {
    background-color: lightblue;
}

.clr1 {
    background-color: lightyellow;
}

.clr2 {
background-color: lightyellow;
}

.R-t {
    text-align: right;
}

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

table {
    border-collapse: collapse;   
}

th {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    padding: 10px;
    color: white;
    width: 33%;  
}

td {
    border-bottom: 1px solid lightgray;
    padding: 10px;
}
6

В форуме разборов предостаточно, – воспользуйтесь поиском.
Кроме того в курсе (где вы выполняете задания) внизу над футером слева есть неприметная ссылка “открыть комментарии” – тоже помогает…

9
10

Увидел, спасибо Вам за наставления, а то это моя первая тема на форуме. А как насчет оптимизации и т.п.?

11

Свой код в большом количестве не вставлял.
Но, думаю,что кнопка </> должна помогать, либо форматировать код заранее с 4 пробелами в каких-нибудь редакторах типа notepad++.

1 лайк
12

Что касается Вашего кода, – замечания только по названиям классов.
Оптимизировать можно будет позже, когда будете использовать псевдокласс :child.
А, на данном этапе обучения с этим кодом можно мудрить до бесконечности, останутся сомнения…

13

Ясно, спасибо! А названия классов “хромают” из-за времени суток (ни чего толкового в голову уже не лезет), сам от них не в восторге((

14

Если не забуду – дам ссылку на список часто используемых названий классов.

15

Было бы здорово, может сам ещё что нагуглю))

16

@KRYO_dench Обещанная ссылка:
http://krekotun.ru/ui-developer-skills/#naming

17

Обещанное Спасибо))