Испытание: итоговая таблица [23/23] Сделал на 91%

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

Как поменять цвет фона ячейки “Посещений” без применения инлайновых стилей ?

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

CSS
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;
width: 33%;
padding: 10px;
color: white;
background-color: darkcyan;
}

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

.visit {
text-align: center;
}

.percent {
text-align: right;
}

.town {
text-align: left;
}

.color {
background-color: lightyellow;

Безымянный
Безымянный.png1366×768 117 KB

2

Добавить ячейке дополнительный класс через пробел.

3

До 100% :.visit {
text-align:center;
border-right:1px;
border-left:1px ;
background-color:lightblue;
}

6

С таким кодом меняется цвет фона у всех ячеек с классом - visit.

7

Вы используйте класс visit,только для ячейки “Посещений”,а остальные visitы замените на произвольные классы

8

!DOCTYPE html>

Испытание: итоговая таблица

Итоговая таблица

Город Посещений %
СПб 199 65.12
Москва 69 21.3
Киев 5 8
Посещений за весь период 273

апа
апа.png1366×768 99.3 KB

body {
width: 350px;
margin: 0;
padding: 0 10px;
font-size: 14px;
font-family: Arial, sans-serif;
}
table {
border-collapse:collapse;
}
td {
padding:10px;
border-bottom:1px solid lightgray;
}
th {
border-top:1px solid black;
border-bottom:1px solid black;
width:33%;
color:white;
background-color:darkcyan;
padding:10px;
}
.city {
text-align:left;
}
.visit {
text-align:center;
border-right:1px;
border-left:1px ;
background-color:lightblue;
}
.procent {
text-align:right;
}
.second {
text-align:center;
}
.next {
text-align:right;
}
.six {
text-align:center;
}
.twenty {
text-align:right;
}
.five {
text-align:center;
}
.eigth {
text-align:right;
}
.last {
text-align:right;
}
.period {
background-color:lightyellow;
}
.moscow {
background-color:lightyellow;
}

9

Зачем вы повторяетесь? Одинаковые правила с разными селекторами - это нехорошо.

1 лайк