Исполнение

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

Всем привет.
Прокомментируйте, пожалуйста! Это итоговое задание с таблицами.
Результат 100% соответствие

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Испытание: итоговая таблица</title>
    </head>
    <body>
        <h1>Итоговая таблица</h1>
<table>
    <tr>
        <th class="cell1">Город</th>
        <th class="cell2">Посещений</th>
        <th class="cell3">%</th>
    </tr>
    <tr>
        <td>СПб</td>
        <td class="column2">199</td>
        <td class="column3">65.12</td>
    </tr>
    <tr class="line3">
        <td>Москва</td>
        <td class="column2">69</td>
        <td class="column3">21.3</td>
    </tr>
    <tr>
        <td>Киев</td>
        <td class="column2">5</td>
        <td class="column3">8</td>
    </tr>
    <tr class="line5">
        <td colspan="2">Посещений за весь период</td>
        <td class="cell14">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;
}

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

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

.cell2 {
    background-color: lightblue;
}

.line3 {
    background-color: lightyellow;
}
    
.line5 {
    background-color: lightyellow;
}

.cell1 {
     text-align: left;
}

.cell3 {
    text-align: right;
}

.column2 {
    text-align: center; 
} 

.column3 {
    text-align: right; 
}

.cell14 {
    text-align: right;
}

table.png330×562 22 KB

2

Всё синтаксически правильно написали. Все знаки на месте, пробелы тоже.
Единственное, ваш код можно сократить.
Например, у вас есть такой фрагмент:
.column3 {
text-align: right;
}

.cell14 {
text-align: right;
}
В каждом из этих правил только одно свойство и оно одинаковое.
Вы можете написать так:
.column3, .cell4 {
text-align: right;
}
То же самое, но в два раза короче.
Еще один фрагмент:
.line3 {
background-color: lightyellow;
}

.line5 {
background-color: lightyellow;
}
И фрагмент HTML-кода, чтобы было понятно:
<tr class="line3">
<td>Москва</td>
<td class="column2">69</td>
<td class="column3">21.3</td>
</tr>
<tr>
<td>Киев</td>
<td class="column2">5</td>
<td class="column3">8</td>
</tr>
<tr class="line5">
<td colspan="2">Посещений за весь период</td>
<td class="cell14">273</td>
</tr>
В данном случае класс используется для одного и того же элемента - это строка таблицы tr и для одного и того же - для изменения фона.
То есть и для второй выбранной вами строки вы могли написать класс .line3
Тогда класс с названием .line5 получается не нужен.

1 лайк
3

Спасибо, все понятно!:slightly_smiling:

1 лайк