23/23 Последнее испытание, применение стилей в html

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

Задание пройдено, но не получилось не использовать стили в html. А именно - для задания цвета фона в заголовке. Ну то есть я мог бы сделать отдельный класс для каждой ячейки заголовка, но тогда получится не упрощение, а усложнение. Еще пробовал создать по два класса для каждой ячейки заголовка, но это не получилось.
Подскажите, как это поправить.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Испытание: итоговая таблица</title>
    </head>
    <body>
        <h1>Итоговая таблица</h1>
        <table>
            <tr>
                <th class="column1" class="darkbl" style="background-color: darkcyan">Город</th>
                <th class="column2" style="background-color: lightblue">Посещений</th>
                <th class="column3" style="background-color: darkcyan">%</th>
            </tr>
            
            <tr>
                <td class="column1">СПб </td>
                <td class="column2">199</td>
                <td class="column3">65.12</td>
            </tr>
            
            <tr class="row2">
                <td class="column1">Москва</td>
                <td class="column2">69</td>
                <td class="column3">21.3</td>
            </tr>
            
            <tr>
                <td class="column1">Киев</td>
                <td class="column2">5</td>
                <td class="column3">8</td>
            </tr>
            
            <tr class="row4">
                <td colspan="2" class="column1">Посещений за весь период</td>
                <td class="column3">273</td>
                
            </tr>

    </body>
</html>

CSS

.column1 {
    text-align: left;
    width:33%;
}
.column2 {
    text-align: center;
    width:33%;
}
.column3 {
    text-align: right;
    width:33%
}
/*.darkbl {
    background-color: darkcyan;
}
}
.lightbl {
    background-color: lightblue;
}
*/



.row2 {
    background-color: lightyellow;
}

.row4 {
    background-color: lightyellow;
}

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

td {
    border-bottom: 1px solid lightgrey;
    padding: 10px
    
}
2

И еще вопрос, почему html-ный текст у меня отформатировался автоматически, а css - нет?)
Хотя копировал-вставлял одинаково

3

Вот так будет, если вы хотели использовать два класса:
<tr>
<th class="column1 darkbl">Город</th>
<th class="column2 lightbl">Посещений</th>
<th class="column3 darkbl">%</th>
</tr>
Также вы можете воспользоваться псевдоклассами. Например,
th:first-child { … }
th:nth-child(2) { … }

По поводу второго вопроса могу сказать, что вы всё же неправильно вставили код. Его начало не видно. Может в этом дело.

1 лайк
4

Спасибо!