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

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

Добрый день! Задание прошел на 93% пропускает дальше. Но хотелось бы на 100% . Что нужно изменить?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Испытание: итоговая таблица</title>
    </head>
    <body>
        <h1>Итоговая таблица</h1>
        <table>
        <tr>

        <th class="coll-2">Город</th>
        <th class="coll-3">Посещений</th>
        <th class="coll-4">%</th>
        </tr>
        <tr>
        <td class="coll-6">СПб</td>
        <td>199</td>
        <td class="coll-5">65.12</td>
        </tr>
        <tr>
            <tr  class="coll-1">
        <td class="coll-6">Москва</td>
        <td>69 </td>
        <td class="coll-5">21.3</td>
        </tr>
        <td class="coll-6">Киев </td>
        <td>5 </td>
        <td class="coll-5">8</td>
        </tr>
        <tr class="coll-1">
        <td class="coll-6" colspan="2">Посещений за весь период</td>
        <td class="coll-5">273</td>
        </tr>
</table>
    </body>
</html>

body {
    width: 350px;
    margin: 0;
    padding: 0 10px;
    font-size: 14px;
    font-family: Arial;
}
table {
    color: black;
     border-collapse: collapse;
     }

td {
    border-bottom: 1px solid lightgray;
    width: 33%;
    text-align: center;
     padding: 10px;
}
  th {
      border-top: 1px solid black;
      border-bottom: 1px solid black;
      color: white;
       
       padding: 10px;
      }
  .coll-1 {
      background-color: lightyellow;
  }
.coll-2 {
          background-color: darkcyan;
          text-align: left;
        }
  .coll-3 {
      background-color: lightblue;
  }
  .coll-4 {
       background-color: darkcyan;
          text-align: right;
  } 
  .coll-5 {
      text-align: right;
  }
  .coll-6 {
      text-align: left;
  }

Спасибо.

#2 
 Мой код не так хорош как ваш, но оценен в 100 %. Возможно, это вам поможет. 
<!DOCTYPE html>
        <html>
              <head>
               <meta charset="utf-8">
            <title>Испытание: итоговая таблица</title>
        </head>
        <body>
            <h1>Итоговая таблица</h1>
            <table>
                <tr>
                    <th class="row-1" style="width: 33%;">Город</th>
                    <th class="row-2" style="width: 33%;">Посещений</th>
                    <th class="row-3"style="width: 33%;">%</th>
                </tr>
                 <tr>
                    <td class="row-7">СПб</td>
                    <td class="row-5">199</td>
                    <td class="row-9">65.12</td>
                </tr>
                 <tr>
                    <td class="row-4">Москва</td>
                    <td class="row-8">69</td>
                    <td class="row-6">21.3</td>
                </tr>
                 <tr>
                    <td class="row-7">Киев</td>
                    <td class="row-5">5</td>
                    <td class="row-9">8</td>
                </tr>
                 <tr>
                    <td colspan="2" class="row-4">Посещений за весь период</td>
                    <td class="row-6">273</td>
                </tr>
            </table>
    
        </body>
    </html>
    
    body {
        width: 350px;
        margin: 0;
        padding: 0 10px;
        font-size: 14px;
        font-family: Arial;
    }
    table {
        padding: 5px;
        border-collapse: collapse;
        
    }
    th {
        border-top: 1px solid black;
        border-bottom: 1px solid black;
        padding: 10px;
        
    }
    td {
        padding: 10px;
        border-bottom: 1px solid lightgray;
        
    }
    .row-1 {
        background-color:darkcyan;
        color: white;
        text-align: left;
        
    }
    .row-2 {
        background-color:lightblue;
        color: white;
    }
    .row-3 {
        background-color:darkcyan;
        color: white;
        text-align: right;
    }
    .row-4 {
        text-align:left;
        background-color: lightyellow;
    }
    .row-5 {
        text-align:center;
    }
    .row-6 {
        text-align:right;
        background-color: lightyellow;
    }
    .row-7 {
        text-align: left;
    }
    .row-8 {
        text-align:center;
        background-color: lightyellow;
    }
    .row-9 {
        text-align:right;
    }
1 симпатия
#3

Спасибо! Вы некоторые стили прописали в коде. Как знать когда лучше писать в коде а когда в css?

#4

Инлайновые стили лучше не использовать вообще. Имеют очень высокий приоритет, то есть переопределить их можно будет только с помощью !important.

#7

Вставьте html-код правильно, а то народ не поймет.
Напоминаю, уже в который раз, кнопка для вставки кода выглядит так </> на панели сверху в редакторе сообщений.

#9

`<!–

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

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

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

body {
width: 350px;
margin: 0;
padding: 0 10px;
font-size: 14px;
font-family: Arial, sans-serif;
}
table{
border-collapse: collapse;
width:100%;
}
th {color: white;
border-top: 1px solid black;
border-bottom: 1px solid black;
padding: 10px;

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

.tr_y{
background-color:lightyellow;
}
.th1 {
background-color:darkcyan;
text-align: left;
width:33%;
}
.th2 {
background-color:lightblue;
text-align: center;
width:33%;
}
.th3 {
background-color:darkcyan;
text-align: right;
width:33%;
}

`

#10

Вот моя таблица, посмотрите, я правда использовала знания, которые получила в дальнейшем, как мне кажется они более удобные, чем расписывать классами код html. И таблица прошла 99%

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

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

    <table>
            <tr>
                <th>Город</th>
                <th>Посещений</th>
                <th>%</th>
            </tr>
            <tr>
                <td>СПб</td>
                <td class="sp2">199</td>
                <td class="sp3">65.12</td>
            </tr>
             <tr class="sp1">
                <td>Москва</td>
                <td class="sp2">69</td>
                <td class="sp3">21.3</td>
            </tr>
             <tr>
                <td>Киев</td>
                <td class="sp2">5</td>
                <td class="sp3">8</td>
            </tr>
             <tr class="sp1">
                <td colspan="2">Посещений за весь период</td>
                <td class="sp3">273</td>
            </tr>

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

th:nth-child(2){
background-color: lightblue;
text-align:center;
}
th:nth-child(3){
text-align:right;
}
.sp1{
background-color:lightyellow;
}
.sp2{
text-align:center;
}
.sp3{
text-align:right;
}

#11

Для второго th задайте центровку по середине

#12

ах да… точно…не увидела этот момент. спасибо

#13

Прошёл на 100%
HTML:

<head>
    <meta charset="utf-8">
    <title>Испытание: итоговая таблица</title>
</head>
<body>
    <table>
    <h1>Итоговая таблица</h1>

  <tr class="white">
        <th style="background-color:darkcyan; 
                    text-align:left;">Город</th>   
        <th style="text-align:center; 
                    background-color:lightblue;">Посещений</th>     
        <th style="text-align:right;
                    background-color:darkcyan;">%</th>
        </tr>
   <tr>
        <td>СПб</td>
        <td style="text-align:center;">199</td>
        <td style="text-align:right;">65.12</td>
        </tr>
   <tr style="background-color:lightyellow;
              border-bottom: 1px solid lightgray;
              border-top: 1px solid lightgray;">
        <td>Москва</td>   
        <td style="text-align:center;">69</td>  
        <td style="text-align:right;">21.3</td>
        </tr>
   <tr>
        <td>Киев</td>  
        <td style="text-align:center;">5</td>        
        <td style="text-align:right;">8</td>
        </tr>
  
   <tr style="background-color:lightyellow;
              border-bottom: 1px solid lightgray;
              border-top: 1px solid lightgray;">
        <td colspan="2">Посещений за весь период</td>  
        <td style="text-align:right;">273</td>
        </tr>

CSS:
body {
width: 350px;
margin: 0;
padding: 0 10px;
font-size: 14px;
font-family: Arial, sans-serif;
}
td {
width:33%;
padding:10px;
}
table {
border-collapse:collapse;
padding: 5px;
width:100%;
}
.white {
color: white;
border-bottom: 1px solid black;
border-top: 1px solid black;
}
th {
width:33%;
padding:10px;
}

#14

только зачем вы HTML так стилями “замусорили”? для этого CSS есть. Да и короче бы получилось…

1 симпатия
#18

Как то так получилось, но проблема не могу нормально всё запомнить. приходится заново перечитывать конспекты которые я веду. На сколько легко вы запоминаете? тоже 100%

< table>

    <tr>
        <th class="left">Город</th>
        <th class="style1">Посещений</th>
        <th class="right">%</th>
    </tr>
    
    <tr>
        <td class="left">СПб</td>
        <td class="center">199</td>
        <td class="right">65.12</td>
    </tr>
    
    <tr class="style2">
        <td class="left">Москва</td>
        <td class="center">69</td>
        <td class="right">21.3</td>
    </tr>
    
    <tr>
        <td class="left">Киев</td>
        <td class="center">5</td>
        <td class="right">8</td>
    </tr>
    
    <tr class="style3">
        <td colspan="2" class="left">Посещений за весь период</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 {
border-bottom: 1px solid black;
border-top: 1px solid black;
padding: 10px;
color: white;
background-color:darkcyan;
text-align: left;
width: 33%;
}

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

}

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

.style2 {
background-color:lightyellow;
}

.style3 {
background-color:lightyellow;
}
.right {
text-align: right;

}

.center {
text-align: center;
}

.left {
text-align: left;

}

1 симпатия
#19

Я прошел тоже на 100%, но без излишнего использования классов в td

[details=HTML] 
























</tr>
Город Посещений %
СПб 199 65.12
Москва 69 21.3
Киев 5 8
Посещений за весь период 273
[/details] [details=CSS]`body { width: 350px; margin: 0; padding: 0 10px; font-size: 14px; font-family: Arial, sans-serif; } table{ border-collapse: collapse; }

.gorod{
text-align:left;
background:darkcyan;
}
.pos{
text-align:center;
background:#add8e6;
}
.proz{
text-align:right;
background:darkcyan;
}
.right:last-child{
text-align:right;
}
th{

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

td{
padding: 5px;
width: 33%;
border-bottom:1px solid lightgray;
}
td, th{ padding: 10px;
}
td:nth-child(2){
text-align:center;
}
td:nth-child(3){
text-align:right;
}
.yell{
background:lightyellow;}
`[/details]

#20
HTML 
    <table>
        <tr>
            <th class="left">Город</th>
            <th class="center">Посещений</th>
            <th class="right">%</th>
        </tr>
        <tr>
            <td class="left">СПб</td>
            <td class="center">199</td>
            <td class="right">65.12</td>
        </tr>
        <tr>
            <td class="left">Москва</td>
            <td class="center">69</td>
            <td class="right">21.3</td>
        </tr>
        <tr> 
            <td class="left">Киев</td>
            <td class="center">5</td>
            <td class="right">8</td>
        </tr>
        <tr>
            <td colspan="2" class="left">Посещений за весь период </td>
            <td class="right">273</td>
        </tr>
    </table>

[details=CSS]
table{
border-collapse: collapse;
color:black;
}

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

td {
padding: 10px;
border-bottom: 1px solid lightgray;
width: 33%;
}
tr:nth-child(odd) {
background-color: lightyellow;
}
th:nth-child(2) {
background-color: lightblue;
}
.right {
text-align: right;
}
.center {
text-align: center;
}
.left {
text-align: left;
}[/details]

#21 
<head>
    <meta charset="utf-8">
    <title>Испытание: итоговая таблица</title>
</head>
<body>
    <h1>Итоговая таблица</h1>
<table>
   
    <tr>
         <th class="rec-1"> Город</th>  
         <th class="rec-2">Посещений</th>      
         <th class="rec-4">%</th>
   </tr>
   
    <tr>
         <td>СПб</td>        
         <td class="rec-6">199</td>            
         <td class="rec-5">65.12</td>
    </tr>
    
    <tr>
        <tr class="rec-3">
        <td> Москва</td>     
        <td class="rec-6">69</td>          
        <td class="rec-5"> 21.3</td>
   </tr>
      
    <tr>
        <td> Киев</td>       
        <td class="rec-6"> 5</td>             
        <td class="rec-5">8</td>
   </tr>
   
    <tr>
        <tr class="rec-3">
        <td colspan="2">Посещений за весь период</td>   
        <td class="rec-5"> 273</td>
  </tr>

.rec-1
{

text-align:left;
color:white;
background:darkcyan;
 width:33%;

}
.rec-2
{
text-align:center;
color:white;
background:lightblue;
width:33%;
}

.rec-4
{
text-align:right;
color:white;
background:darkcyan;
width:33%;

}
.rec-5
{
text-align:right;
width:33%;
}
.rec-6
{
text-align:center;
width:33%;
}
.rec-3
{
background:lightyellow;

     }

body {
width: 350px;
margin: 0;
padding: 0 10px;
font-size: 14px;
font-family: Arial;
}
table {
padding: 5px;
border-collapse: collapse;

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

92% В чем косяк

screencapture-htmlacademy-ru-courses-39-run-23-1491288484372.png1366×1278 113 KB

#22

</></>

1 симпатия
#23

спасибо Инеса , еще и тут пришлось исправить.

#24 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Испытание: итоговая таблица</title>
    </head>
    <body>
        <h1>Итоговая таблица</h1>
        <table>
            <tr class="my-class">
                <td>Город</td>
                <td class="cell-1">Посещений</td>
                <td class="cell-2">%</td>
            </tr>
            <tr class>
                <td>СПб</td>
                <td class="cell-1">199</td>
                <td class="cell-2">65.12</td>
            </tr>
            <tr class="row-1">
                <td>Москва</td>
                <td class="cell-1">69</td>
                <td class="cell-2">21.3</td>
            </tr>
            <tr>
                <td>Киев</td>
                <td class="cell-1">5</td>
                <td class="cell-2">8</td>
            </tr>
            <tr class="row-1" class="cell-1">
                <td background-color colspan="2">Посещений за весь период</td>
                <td class="cell-2">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: 1px solid lightgray;
    padding: 10px;
    padding-left: 10px;
    text-align: left;
    width: 33%;
    height: 15px;
}
tr.my-class {
    background-color: darkcyan;
    color: white;
}
td.cell-1 {
    text-align: center;
}
td.cell-2 {
    text-align: right;
}
.row-1 {
    background-color:lightyellow;
}
Посмотрите, пожалуйста, что не так? ячейку "посещений" не получается сделать светлозелёной и в образце щрифт более жирный. Спасибо)
#25

Вы скорее всего не использовали th для шапки таблицы.

#26

Да, всё верно. А как цвет сделать в средней ячейке другой?
И в остальных ячейках тоже жирный шрифт, это значит, что везде должен быть th ?

получилось всё с цветом. 100 %.
Спасибо)

окончательный вариант

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

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

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

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;
padding: 10px;
padding-left: 10px;
text-align: left;
width: 33%;
height: 15px;
}
th {
border-top: 1px solid black;
border-bottom: 1px solid black;
padding: 10px;
padding-left: 10px;
text-align: left;
width: 33%;
height: 15px;
background-color: darkcyan;
color: white;
}
td.cell-1 {
text-align: center;
}
td.cell-2 {
text-align: right;
}
.row-1 {
background-color:lightyellow;
}
th.cell-3 {
text-align: center;
background-color: lightblue
}

th.cell-1 {
text-align: center;
}

th.cell-2 {
text-align: right;
}