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


#28

Благодарочка


#30
    <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;
}

#31

Зачем дублируете сообщения? И не только в этой теме.


#33

table {
border-collapse: collapse;
}

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

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

.table-header th:nth-child(1) {
background-color: darkcyan;
text-align: left;
}

.table-header th:nth-child(2) {
background-color: lightblue;
}

.table-header th:nth-child(3) {
background-color: darkcyan;
text-align: right;
}

tr td:nth-child(2) {
text-align: center;
}

tr td:nth-child(3) {
text-align: right;
}

.colored-col-2 td:nth-child(2) {
text-align: right;
}

.colored-col-1,
.colored-col-2 {
background-color: lightyellow;
}


#34

Привет! подскажите пожалуйста, где накосячил?

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

</body>
</html>

.colum-2 {
text-align: right;
}
.colum-1{
text-align: center;
}
.colum-3{
text-align: left;
} 
.bol{
background-color: darkcyan;
}  
.bol1{
background-color:lightblue;
}    
.bol2{
background-color:lightyellow}    
body {
width: 350px;
margin: 0;
padding: 0 10px;
font-size: 14px;
font-family: Arial, sans-serif;
}
td{
border-bottom: 1px solid lightgray;
padding: 10px;
width:33%;
}
th{
color: white;
border-top: 1px solid black;
border-bottom: 1px solid black;
padding: 10px;
width:33%;
  
}    
table{
border-collapse: collapse;

width:100%;
}

#35

Попробуйте убрать ширину у таблицы, возможно дело в этом.


#36

совсем не помогло


#37

Не закрыли ячейку.


#38

Вы Богиня!
Спасибо огромное!


#43

подскажите, как загрузить такой скрин с прокруткой?


#44
![ru-2018-01-26-17-22-51|403x307](upload://ok9cUPwz32keDV5uh2cM8yEIJYM.jpg)
    <h1>Итоговая таблица</h1>
    <table>
<tr>
    <th class="column1" style="background-color: darkcyan">Город</th>       
    <th class="column2" style="background-color:lightblue">Посещений</th>       
    <th class="column3" style="background-color: darkcyan">%</th>
</tr>
<tr>
    <td class="column1">СПб</td>         
    <td class="column2">199</td>             
    <td class="column3">65.12</td>
</tr>
<tr class="lightyellow">
    <td class="column1">Москва</td>      
    <td class="column2">69</td>              
    <td class="column3">21.3</td>
</tr>
<tr>
    <td class="column1">Киев</td>        
    <td class="column2">5</td>               
    <td class="column3">8</td>
</tr>
<tr class="lightyellow">
    <td colspan="2" class="column1">Посещений за весь период</td>    
    <td class="column3">273</td>
</tr>
</table>

Впишите сюда текст; также, отключить форматирование текста можно, начав строку с 4х пробелов
body {
width: 350px;
margin: 0;
padding: 0 10px;
font-size: 14px;
font-family: Arial;

}

table {
border-collapse: collapse;

}

.column1 {
text-align: left;
}
.column2 {
text-align: center;
}
.column3 {
text-align: right;
}
.lightyellow {
background-color: lightyellow;
border-top: 2px solid lightgray;
}
th {
padding: 10px;
width: 33%;
color: white;
border-top: 2px solid black;
border-bottom: 1px solid black;

}

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