Итоговая таблица. 23/23. 100% Буду рад почитать критику.

Dinito · 30.Июнь.2018 08:45:39

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Испытание: итоговая таблица</title>
        <link rel="stylesheet" href="style.css">
      </head>
      <body>
        <h1>Итоговая таблица</h1>
        <table>
        <tr>
          <th class="cell-1">Город</th>       
          <th class="cell-2">Посещений</th>       
          <th class="cell-3">%</th>
        </tr>
        <tr>
          <td>СПб</td>         
          <td class="cell-6">199</td>             
          <td class="cell-7">65.12</td>
        </tr>
        <tr class="cell-4">
          <td class="cell-">Москва</td>      
          <td class="cell-6">69</td>
          <td class="cell-7">21.3</td>
        </tr>
        <tr>
          <td>Киев</td>        
          <td class="cell-6">5</td>               
          <td class="cell-7">8</td>
        </tr>
        <tr class="cell-4">
          <td colspan="2">Посещений за весь период</td>
          <td class="cell-7">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;
    }
    td {
      border-bottom: 1px solid lightgray;
      width: 33%;
      padding: 10px;
  
}
.cell-4 {
  background-color: lightyellow;
}
th {
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  color: white;
  padding: 10px;
  
}
.cell-1 {
  background-color: darkcyan;
  text-align: left;
}
.cell-2 {
  background-color: lightblue;
  text-align: center;
}
.cell-3 {
  background-color: darkcyan;
  text-align: right;
}
.cell-6 {
  text-align: center; 
}
.cell-7 {
  text-align: right; 
}

Valery_S · 30.Июнь.2018 08:59:42

Имена классам можно дать более осмысленные, а так – всё нормально…

Dinito · 30.Июнь.2018 09:10:52

Я пока не особо понимаю, что значит “осмысленные”.Не мог бы ты помочь мне с этим?

Valery_S · 30.Июнь.2018 09:15:05

http://krekotun.ru/ui-developer-skills/#naming

Dinito · 30.Июнь.2018 09:23:12

Спасибо за помощь.

aadevaza · 01.Июль.2018 18:31:08

А еще можно было не задавать один и тот же цвет двум классам. Достаточно задать background-color у th и отдельно создать класс для цвета lightblue
код на 2 строчки меньше будет)))

aadevaza · 01.Июль.2018 18:34:12

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Испытание: итоговая таблица</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Итоговая таблица</h1>
<table>
  <tr>
    <th class="left">Город</th>       
    <th class="lb">Посещений</th>       
    <th class="right">%</th>
  </tr>
  <tr>
    <td>СПб</td>         
    <td class="center">199</td>             
    <td class="right">65.12</td>
  </tr>
  <tr class="ly">  
    <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="ly">
    <td 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 {
border-collapse: collapse;
}

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

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

.left {
text-align: left;
}

.right {
text-align: right;
}

.center {
text-align: center;
}

.lb {
background-color: lightblue;
}

.ly {
background-color: lightyellow;
}

Чет я глянул и увидел что однохерстовно, что у тебя, что у меня) Как то надо твой код с моим скомбинировать, мб что-то более компактное и получится или нет башка не думает в данный момент

AlfaBravo · 16.Июль.2018 14:37:45

Итоговое задание прошёл на 100%, когда писал всё было логично, а когда глянул показалось, что CSS разудут и вообще как-то всё странно. Беду благодарен за конструктивную критику.

С уважением

    <!DOCTYPE html>
    <html>
      <head>
    <meta charset="utf-8">
    <title>Испытание: итоговая таблица</title>
    <link rel="stylesheet" href="style.css">
      </head>
      <body>
    <h1>Итоговая таблица</h1>
    <table>
      <tr>
        <th class= "cell-1">Город</th>
        <th class= "cell-2">Посещений</th>
        <th class= "cell-3">%</th>
      </tr>
      <tr>
        <td>СПб</td>
        <td class="column-2">199</td>
        <td class="column-3">65.12</td>
      </tr> 
      <tr class= "line-1">
        <td>Москва</td>
        <td class="column-2">69</td>
        <td class="column-3">21.3</td>
      </tr> 
      <tr>
        <td>Киев</td>
        <td class="column-2">5</td>
        <td class="column-3">8</td>
      </tr> 
      <tr class= "line-1">
        <td colspan="2">Посещений за весь период</td>
        <td class="column-3">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;
    width: 350px;
    height: auto;
}

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

td {
  padding: 10px;
  padding-right: 10px;
  border-bottom: 1px solid lightgray; 
}
.column-2 {
  text-align: center;
}

.column-3 {
  text-align: right;
}

.cell-1 {
  color: white;
  background-color: darkcyan;
  text-align: left;
}

.cell-2 {
  color: white;
  background-color: lightblue;
  text-align: center;
}

.cell-3 {
  color: white;
  background-color: darkcyan;
  text-align: right;
}

.line-1 {
  background-color: lightyellow;
}

NikViP · 12.Август.2018 08:18:26

“Осмысленно…”
Может быть так?

<body>
<h1>Итоговая таблица</h1>
<table>
  <tr>
    <th class="city">Город</th>
    <th class="visit">Посещений</th>
    <th class="percent">%</th>
  </tr>
  <tr>
    <td class="city">СПб</td>
    <td class="visit">199</td>
    <td class="percent">65.12</td>
  </tr>
  <tr class="oddtr">
    <td class="city">Москва</td>
    <td class="visit">69</td>
    <td class="percent">21.3</td>
  </tr>
  <tr>
    <td class="city">Киев</td>
    <td class="visit">5</td>
    <td class="percent">8</td>
  </tr>
  <tr class="oddtr">
    <td colspan="2">Посещений за весь период</td>
    <td class="percent">273</td>
  </tr>
</table>

**********

table {
border-collapse: collapse;
}

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

th {
border-top: 1px solid black;
border-bottom: 1px solid black;
color: white;
}

th.city {
background-color: darkcyan;
text-align: left;
}

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

th.percent {
background-color: darkcyan;
text-align: right
}

.visit {
text-align: center;
}

.percent {
text-align: right;
}

.oddtr {
background-color: lightyellow;
}