23/23 Итоговая таблица, семантика

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

Добрый день, подскажите пожалуйста, как можно усовершенствовать данные html и css для лучшей читабильности ( семантики ). Испытание выполнено на 100%, по своим ощущениям, думаю что многое написано правильно.

19
Испытание_ итоговая таблица — Знакомство с таблицами — HTML Academy - Google Chrome 2019-10-17 17.00.19.jpg656×855 90.9 KB 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Испытание: итоговая таблица</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Итоговая таблица</h1>
     <table cellpadding="10">
      <tr class="color">
        <th class="left" style="width: 33.3%;">Город</th>
        <th style="background-color: lightblue; text-align: centr; width: 33.3%;">Посещений</th>
        <th style="text-align: right; width: 33.3%;">%</th>
      </tr>
      <tr >
        <td class="left">СПб</td>
        <td>199</td>
        <td class="right">65.12</td>
      </tr>
      <tr class="yellow">
        <td class="left">Москва</td>              
        <td> 69</td>
        <td class="right">21.3</td>
      </tr >
        <td class="left">Киев</td>              
        <td> 5</td>
        <td class="right">8</td>
      <tr class="yellow">
        <td class="left" colspan="2">Посещений за весь период</td>
        <td class="right">273</td>
      </tr>
    </table>
  </body>
</html>


body {
  width: 350px;
  margin: 0;
  padding: 0 10px;

  font-size: 14px;
  font-family: "Arial", sans-serif;
}
table {
  width: 350px;
  border-collapse: collapse;
  
}
.color {
  color: white;
  background-color: darkcyan;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  }
tr {
  border-bottom: 1px solid lightgrey;
  }
td {
  text-align: center;
  }  
.right {
  text-align: right;
  }
.left {
  text-align: left;
  }  
.yellow {
  background-color: lightyellow;
  }

Буду рад, скорейшей обратной связи!

2

От новичка новичку :slight_smile: Сам только недавно прошел это испытание. Делал следующим образом:

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

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

<table>
  <tr>
    <th class="cyan left">Город</th>
    <th class="blue">Посещений</th>
    <th class="cyan right">%</th>
  </tr>
  <tr>
    <td>СПб</td>
    <td class="center">199</td>
    <td class="right">65.12</td>
  </tr>
  <tr class="yellow">
    <td>Москва</td>
    <td class="center">69</td>
    <td class="right">21.3</td>
  </tr>
  <tr>
    <td>Киев</td>
    <td class="center">5</td>
    <td class="right">8</td>
  </tr>  
<tr class="yellow">
  <td colspan="2">Посещений за весь период</td>
  <td class="right">273</td>
</tr>  
</table>
body { width: 350px; margin: 0; padding: 0 10px;

font-size: 14px;
font-family: “Arial”, sans-serif;
}
table {
border-collapse: collapse;
}
th, td {
width: 33%;
padding: 10px;
}
th {
border-top: solid black 1px;
border-bottom: solid black 1px;
}
td {
border-bottom: solid lightgray 1px;
}
.cyan {
color: white;
background-color: darkcyan;
}
.blue {
color: white;
background-color: lightblue;
}
.yellow {
background-color: lightyellow;
}
.left {
text-align: left;
}
.center {
text-align: center;
}
.right {
text-align: right;
}

У меня получилось больше кода в CSS, но меньше кода в HTML. И тоже ощущение, что пару строк можно было выкинуть. Конкретно у вас table cellpadding лучше не использовать в HTML, а делать через padding в CSS (так было написано в обучении). В CSS строка width: 350px; в селекторе table вроде как лишняя (по крайней мере, у меня ее нет и все ок).

3

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

Конкретно у вас table cellpadding лучше не использовать в HTML, а делать через padding в CSS (так было написано в обучении)

Да видел) категорически не запрещалось, поэтому так решил, на тот момент ничего другого не приходило на ум)
Видимо придется по новой проходить испытание, ибо когда я убираю эти значения, то вид таблицы сильно меняется)

4

Попробовал усложнить задачу, чтобы пройти испытание без использования классов в HTML. Набрел на [псевдокласс :nth-child] Открыл для себя приятное удовольствие гуглить информацию поверх данного нам материала.

Спойлер 
tr:nth-child(odd) { background-color: lightyellow; }
th:nth-child(2n)  { background-color: lightblue; }
th:first-child    { text-align: left; } 
th:last-child     { text-align: right; }
td:nth-child(2n)  { text-align: center; }
td:last-child     { text-align: right; }