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

PoSeIdOn · 27.Декабрь.2017 07:58:55

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

PoSeIdOn · 27.Декабрь.2017 08:04:38

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

Ineska · 27.Декабрь.2017 13:32:35

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

Oleg_Shyn · 09.Январь.2018 14:37:20

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

talamys89 · 09.Январь.2018 19:55:54

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

<!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%;
}

Ineska · 10.Январь.2018 05:59:19

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

talamys89 · 11.Январь.2018 11:54:04

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

Ineska · 11.Январь.2018 12:17:04

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

talamys89 · 12.Январь.2018 22:12:34

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

vrlogistic · 26.Январь.2018 15:25:08

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

vrlogistic · 26.Январь.2018 17:54:54

![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%;
}

Tanasy · 20.Декабрь.2018 12:04:49

Код оценен на 100%
Допольнительные классы не использовал, только псевдоклассы:

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

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

  font-size: 14px;
  font-family: "Arial", sans-serif;
}
table{
  border-collapse: collapse;
  }
tr{
  background-color: white;
  }
tr:nth-child(2n+1){
  background-color: lightyellow;
  }
td:nth-child(2){
  text-align: center;
  }
td:last-child{
  text-align: right;
  }
td{
  padding: 10px;
  border-bottom: 1px solid lightgray;
  }
th{
  padding: 10px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  color: white;
  background-color: darkcyan; 
  }
th:first-child{
  text-align: left;
  }
th:last-child{
  text-align: right;
  }
th:nth-child(2){
  background-color: lightblue;
  }

Hierumo · 21.Декабрь.2018 08:18:02

html: первый ряд отсутствует
css: th не нужны. лучше вставить один раз болд, чем писать 2 отдельных правила для выравнивания.

Tanasy · 21.Декабрь.2018 08:34:34

Имеешь в виду обернуть th в tr-ку? И можно подробнее, почему th не нужны и что такое болд?

Hierumo · 21.Декабрь.2018 08:35:34

да, не придется шаманить с шириной. также рекомендую в html для каждого тега использовать новую строку как завещали нам в Google https://habr.com/post/143452/ или туть: https://google.github.io/styleguide/htmlcssguide.html

th не нужны, т.к. ты все равно создаешь правило для первого ряда, где делаешь черные рамки и цвет ряда. а потом еще отдельно от td выравниваешь th, ровно также как td.
болд это: font-weight: bold; эквивалент тега <b>, дефолтный стиль тега <th>.

Tanasy · 21.Декабрь.2018 10:06:58

Благодарю за развернутый ответ и замечания. Учту))

Numonbek · 10.Март.2021 11:56:26

Возмите на Здоровия )))) самый идеалной код!!!))
body {
width: 350px;
margin: 0;
padding: 0 10px;
font-size: 14px;
font-family: Arial;
}
table{

border-collapse: collapse;
}

td{
width: 33%;
padding: 10px;
border-bottom: 1px solid ;
border-top: 1px solid ;
border-color: lightgray;
}
td:nth-child(2){
text-align: center;
}
td:last-child{
text-align: right;
}
th:last-child{
text-align: right;
}

td,th:first-child{
text-align: left;
}

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

.yellow{
background-color: lightyellow;
}
.green{
background-color: darkcyan;
}
th:nth-child(2){
background-color: lightblue;
}
вот HTML код тоже!!!11

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

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

Jorik · 14.Март.2021 10:15:18

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

font-size: 14px;
font-family: “Arial”, sans-serif;
}

table {
border-collapse: collapse;
}

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

td {
padding: 10px;
}

/Центрирование/
tr > th:first-child,
tr > td:first-child {
text-align: left;
}

tr > th:last-child,
tr > td:last-child {
text-align: right;
}

tr > th:nth-child(2),
tr:not(:last-child) > td:nth-child(2) {
text-align: center;
}
/* / Центрирование*/

/Фон/
tr:first-child {
background-color: darkcyan;
color: white;
}

tr:nth-child(2n + 3) {
background-color: lightyellow;
}

tr:first-child > th:nth-child(2) {
background-color: lightblue;
}

tr:nth-child(2n + 3) > td {
border-top: 1px solid lightgray;
border-bottom: 1px solid lightgray;
}
/* / Фон*/

Ni_na · 07.Июнь.2021 08:25:27

table{
border-collapse:collapse;
width:100%;
}
td,th{
padding:10px;
}
th{
width:33%;
}
th{
border-top:black solid 1px;
border-bottom:black solid 1px;
background-color:darkcyan;
color:white;
}
th:nth-of-type(2){
background-color:lightblue;
}
th:first-child{
text-align:left;
}
th:last-of-type{
text-align:right;
}
td:not(:last-of-type):nth-child(2){
text-align:center;
}
td:last-of-type{
text-align:right;
}
tr{
border-bottom:1px lightgray solid;
}
tr:nth-of-type(2n+1){
background-color:lightyellow;
}

sakitow · 25.Октябрь.2021 19:02:02

не могу разобраться с шириной столбца
мой код

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

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

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

CSS

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

font-size: 14px;
font-family: “Arial”, sans-serif;
}

th,
td {
padding: 10px;
}

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

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

table {
border-collapse: collapse;
}

.col-1 {
text-align: left;
}

.col-2 {
text-align: center;
}

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

.row-heading {
background-color: darkcyan;
color: white;
}

.cell-highlight {
background-color: lightblue;
}

.row-highlight {
background-color: lightyellow;
}