итоговая таблица [23/23] - нормально или можно было сделать проще?

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

подскажите пожалуйста похоже ли это на, что называется, г*внокод и не перемудрил ли? показало 100%, но мне интересно, может можно было как-то проще сделать? заранее спасибо.

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

    </body>
</html>

body {
    width: 350px;
    margin: 0;
    padding: 0 10px;
    font-size: 14px;
    font-family: Arial;
}
th {padding: 10px; width: 33%; border-bottom: 1px solid black; border-top: 1px solid black; background-color: darkcyan; color: white;}
td {padding: 10px; width: 33%; border-bottom: 1px solid lightgray;}
table {border-collapse:collapse; }

.l {text-align: left;}
.c {text-align: center;}
.r {text-align: right;}
.ly {background-color: lightyellow;}
1 лайк
2

В общем-то норм.

Что можно улучшить:

  • отформатировать код
  • назвать более понятно классы
  • для ячеек в левым выравниванием его явно можно не задавать, так как по умолчанию выравнивается по влево для языков слева направо
  • в style лучше не писать стили в разметке
  • общие стили можно объединить, например, th, td {}
3

Спасибо за ответ!

А как сделать подскажите пожалуйста? Я тоже думал что зря, потому что в каком-то из уроков ранее этого делать не советовали. Надо было ещё один класс добавить?

4

Да, ещё один класс, почему нет?

Ещё забыл сказать, что полосатую подсветку строк таблицы можно сделать с помощью селекторов nth-child и не вводить дополнительный класс. О них рассказывается в курсе про селекторы.

5

Подскажите чего не хватает? Уже голову сломала, пока 91%.

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

.column-1 {
text-align:left;
width:33%;

}
.column-2 {
text-align:right;
width:33%;

}
.column-3 {
text-align:center;
width:33%;

}
.column-4 {
text-align:right;
width:33%;
}
.column-5 {

background-color:lightblue;
 width:33%;

}
.column-6 {
background-color:lightyellow;
width:33%;
}

table {
border-collapse:collapse;
border: 1px solid white;

}
td {

padding:10px;
border-bottom:1px solid lightgray;
}
th {
background-color:darkcyan;
color:white;
padding:10px;
border-top:1px solid black;
border-bottom:1px solid black;
}

6

В этом задании вы html-код писали тоже сами. Он мне нужен.