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

Не люблю испытания с таблицами.

<head>
    <meta charset="utf-8">
    <title>Испытание: итоговая таблица</title>
</head>
<body>
    <h1>Итоговая таблица</h1>
    <table>
        <tr>
            <th class="city">Город</th>
            <th class="visit">Посещений</th>
            <th class="prc">%</th>
            </tr>
                <tr>
                    <td>СПб</td>
                    <td class="spbtiv">199</td>
                    <td class="prcspb">65.12</td>
                    </tr>
                <tr class="stroka2">
                    <td>Москва</td>
                    <td class="mctiv">69</td>
                    <td class="prcmc">21.3</td>
                </tr>
                    <tr>
                        <td>Киев</td>
                        <td class="ktiv">5</td>
                        <td class="prck">8</td>
                    </tr>
                <tr class="stroka4">
                    <td colspan="2">Посещений за весь период</td> 
                    <td class="prcv">273</td>
                </tr>
                
  
    </table>

</body>
CSS код:

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;
width: 33%;
}
.city{
background-color: darkcyan;
color: white;
text-align: left;
}
.visit{
color:white;
background-color: lightblue;
}
.prc{
text-align: right;
color: white;
background-color:darkcyan;
}
.spbtiv{
text-align: center;
}
.mctiv{
text-align: center;
}
.ktiv{
text-align: center;
}
.prcspb{
text-align: right;
}
.prcmc{
text-align: right;
}
.prck{
text-align: right;
}
.prcv{
text-align: right;
}
th{
border-top: 1px solid black;
border-bottom: 1px solid black;
padding: 10px;
color: white;
}
.stroka2{
background-color: lightyellow;
}
.stroka4{
background-color: lightyellow;
}

Вот что получается:

У Вас лишняя фигурная скобка!

1 лайк

Спасибо огромное. :+1:

Сделал задание. Хотел у старших товарищей узнать, не слишком ли стрёмный код получился?? Спасибо за критику!

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

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

Здравствуйте и доброго времени всем! Спешу поделится своим малым опытом в создании итоговой таблицы. Но сначала хочу выразить свою благодарность авторам проекта и всем кто его поддерживает. Это действительно круто обучаться так просто и интересно, а Кекс, шерстяное чудо, только добавляет положительных эмоций : )

Таблицу сделал на 100% соответствия, но интересны и другие варианты. Уверен, что можно сделать и лучше, – проще. Ну так вот, пришлось прописать классы ко всем ячейкам. Классы верхней строки назвал словами английского языка, тем более который изучаю, остальные сокращенно и удобопонимаемо. Что бы прописать одно свойство множеству селекторов пришлось их сгруппировать. (Да, у меня тормозил браузер ужасно на странице задания, пока я не догадался эту стр. перезагрузить). И вот что у меня получилось:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Испытание: итоговая таблица</title>
    </head>
    <body>
        <h1>Итоговая таблица</h1>
<table>
        <tr><th style="width: 30%;" class="
city">Город</th>       <th style="width: 30%;" class="visits">Посещений</th><th style="width: 30%;" class="percentages">%</th></tr>
        <tr><td class="td_l-1">СПб</td>         <td class="td_c-1">199</td>             <td class="td_r-1">65.12</td></tr>
        <tr><td class="td_l-2">Москва</td>      <td class="td_c-2">69</td>              <td class="td_r-2">21.3</td></tr>
        <tr><td class="td_l-3">Киев</td>        <td class="td_c-3">5</td>               <td class="td_r-3">8</td></tr>
        <tr><td colspan="2" class="td_l-4">Посещений за весь период</td> <td class="td_r-4">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: 100%;
}

.td_l-1, .td_l-2, .td_l-3, .td_l-4, 
.td_r-1, .td_r-2, .td_r-3, .td_r-4,
.td_c-1, .td_c-2, .td_c-3 
{
    border-bottom: 1px solid lightgray;
 text-align: left;   
 padding: 10px;
 }
 
.td_r-1, .td_r-2, .td_r-3, .td_r-4
{
    text-align: right;
}

.td_c-1, .td_c-2, .td_c-3
{
 text-align: center;   
}

.td_l-2, .td_c-2, .td_r-2,
.td_l-4, .td_r-4 
{
background-color: lightyellow;

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

.city{
    padding: 10px;
    border: 1px solid black;
    color: white;
    background-color: darkcyan;
    text-align: left; 
}


.visits {
    padding: 10px;
    border: 1px solid black;
    color: white;
    background-color: lightblue;
    text-align: center;
}
.percentages {
   padding: 10px;
    border: 1px solid black;
    color: white;
    background-color: darkcyan;
    text-align: right;  
}

Общие свойства для th почему не группируете?

Отдельный класс для каждой ячейки - это плохо. И обратите внимание, что два свойства в правилах совпадают. Зачем дублировать себя?

А здесь можно быть задать фон для строки tr в целом, а не красить каждую ячейку в отдельности.

1 лайк

Вы каждую ячейку сделали уникальной.
Представьте, что у Вас в таблице не 5 строк, 10-20.
Сколько классов придётся добавить при таком подходе?

1 лайк

Приветствую! Спасибо огромное, переделал: удалил лишние классы, создав новые для строк и сгруппировал то что можно.

<table>
        <tr class="line1"><th style="width: 30%;" class="
city">Город</th>       <th style="width: 30%;" class="visits">Посещений</th><th style="width: 30%;" class="percentages">%</th></tr>
        <tr class="line2"><td class="td_left">СПб</td>         <td class="td_center">199</td>             <td class="td_right">65.12</td></tr>
        <tr class="line3"><td class="td_left">Москва</td>      <td class="td_center">69</td>              <td class="td_right">21.3</td></tr>
        <tr><td class="td_left">Киев</td>        <td class="td_center">5</td>               <td class="td_right">8</td></tr>
        <tr class="line4"><td colspan="2" class="td_left">Посещений за весь период</td> <td class="td_right">273</td></tr>
</table>

/* border в строках*/
.line1{
color: #fff;
border-top: 1px solid #000;
padding: 10px;
}
.line2
{
border-top: 1px solid black;	
}
/* цвет фона в строках */	
.line3, .line4
{
background-color: lightyellow;	
}
/* разметка текста в ячейках для левого столбца */
.td_left
{
 border-bottom: 1px solid lightgray;
 text-align: left;
padding: 10px; 
  }
/* разметка текста в ячейках для центрального столбца */ 
 .td_center
{
 border-bottom: 1px solid lightgray;
 text-align: center;   
}
/* разметка текста в ячейках для правого столбца */
.td_right
{
 border-bottom: 1px solid lightgray;
 text-align: right;   
 padding: 10px;
 }
 /* разметка фона и текста в ячейках верхней строки */
.city{
	background-color: darkcyan;
    text-align: left; 
	padding: 10px;
}
.visits {
	background-color: lightblue;
    text-align: center;
	padding: 10px;
}
.percentages {
    background-color: darkcyan;
    text-align: right; 
    padding: 10px;	
}

Приветствую! Спасибо! Переделал:

<table>
        <tr class="line1"><th style="width: 30%;" class="
city">Город</th>       <th style="width: 30%;" class="visits">Посещений</th><th style="width: 30%;" class="percentages">%</th></tr>
        <tr class="line2"><td class="td_left">СПб</td>         <td class="td_center">199</td>             <td class="td_right">65.12</td></tr>
        <tr class="line3"><td class="td_left">Москва</td>      <td class="td_center">69</td>              <td class="td_right">21.3</td></tr>
        <tr><td class="td_left">Киев</td>        <td class="td_center">5</td>               <td class="td_right">8</td></tr>
        <tr class="line4"><td colspan="2" class="td_left">Посещений за весь период</td> <td class="td_right">273</td></tr>
</table>

/* border в строках*/
.line1{
color: #fff;
border-top: 1px solid #000;
padding: 10px;
}
.line2
{
border-top: 1px solid black;	
}
/* цвет фона в строках */	
.line3, .line4
{
background-color: lightyellow;

}
/* разметка текста в ячейках для левого столбца */
.td_left
{
 border-bottom: 1px solid lightgray;
 text-align: left;
padding: 10px; 
  }
/* разметка текста в ячейках для центрального столбца */ 
 .td_center
{
 border-bottom: 1px solid lightgray;
 text-align: center;   
}
/* разметка текста в ячейках для правого столбца */
.td_right
{
 border-bottom: 1px solid lightgray;
 text-align: right;   
 padding: 10px;
 }
 /* разметка фона и текста в ячейках верхней строки */
.city{
	background-color: darkcyan;
    text-align: left; 
	padding: 10px;
}
.visits {
	background-color: lightblue;
    text-align: center;
	padding: 10px;
}
.percentages {
    background-color: darkcyan;
    text-align: right; 
    padding: 10px;	
}
style="width: 30%;"

Это свойство лучше перенести в CSS (и лучше изменить на 33%).

padding: 10px;

Дублируются во многих правилах – достаточно присвоить ячейкам td и th.
border тоже можно определить в td и th.

border-collapse также не будет лишним…