Испытание [23/23]

Курсы §5. Знакомство с таблицами
1 
<html>
    <head>
        <meta charset="utf-8">
        <title>Испытание: итоговая таблица</title>
    </head>
    <body>
        <h1>Итоговая таблица</h1>
        <table>
            <tr>
                <th class="th-top" style="width: 33%">Город</th>
                <th class="th-middle" style="width: 33%">Посещений</th>
                <th class="th-bottom" style="width: 33%">%</th>
            </tr>
            <tr class="row-1">
                <td>СПб</td>
                <td class="visit">199</td>
                <td class="percentage">65.12</td>
            </tr>
            <tr class="row-2">
                <td>Москва</td>
                <td class="visit">69</td>
                <td class="percentage">21.3</td>
            </tr>
            <tr class="row-3">
                <td>Киев</td>
                <td class="visit">5</td>
                <td class="percentage">8</td>
            </tr>
            <tr class="row-4">
                <td colspan="2">Посещений за весь период</td>
                <td class="percentage">273</td>
            </tr>
        </table>
    </body>
</html>

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

table {
    border-collapse: collapse;
    border-top: 1px solid black;
}

td {
    border-top: 1px solid black;
    padding: 10px;
    border-color: lightgray;
}

th {
    color: white;
    background-color: darkcyan;
    padding: 10px;
    border-color: black;
}

.th-top {
    text-align: left
}

.th-middle {
    color: white;
    background-color: lightblue;
    text-align: center;
}

.th-bottom {
    text-align: right;
}

.row-1 {
    background-color: white
}

.row-2 {
    background-color: lightyellow;
}

.row-3 {
    background-color: white;
}

.row-4 {
    background-color: lightyellow;
}

.percentage {
    text-align: right;
}

.visit {
    text-align: center;
}

Подскажите пожалуйста, как я мог облегчить эту задачу и хотелось бы узнать каким свойством выделять таблицу снизу? border-bottom или что-то другое?

2

Рамку можно задать сразу для всех сторон - свойством border.
Вопрос по фрагменту: зачем сначала задавать черную рамку, а ниже переопределять ее на светло-серую?

2 лайка
3

Просто я не знал как придать верхней части рамки чёрный цвет, но при этом чтобы нижняя часть у неё была серая, если Вас это не затруднит, можете объяснить как это сделать?

4

Черная рамка только у заголовочных ячеек th. Для них вы пишете border-top и border-bottom. Для td рамка снизу, светло-серая - border-bottom: 1px solid lightgray;

1 лайк
5

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