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

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

Почему не окрашиваются заголовки “Посещений” и “%” ?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Испытание: итоговая таблица</title>
    </head>
    <body>
        <h1>Итоговая таблица</h1>
<table>
    <tr>
        <th class="row-1">Город</th>
        <th сlass="row-2">Посещений</th>      
        <th сlass="row-3">%</th>
        </tr>
        <tr>
        <td>СПб</td>         
        <td class="row-5">199</td>             
        <td class="row-6">65.12</td>
        </tr>
        <tr>
        <td class="row-4">Москва</td>     
        <td class="row-7">69</td>              
        <td class="row-8">21.3</td>
        </tr>
        <tr>
        <td>Киев</td>        
        <td class="row-5">5</td>              
        <td class="row-6">8</td>
        </tr>
        <tr>
        <td colspan="2" class="row-9">Посещений за весь период</td>    
        <td class="row-10">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;
padding:10px;

width:33%;

}

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

.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 {
background-color:lightyellow;
}

.row-5 {
text-align:center;
}
.row-6 {
text-align:right;
}
.row-7{
background-color:lightyellow;
text-align:center;
}
.row-8{
background-color:lightyellow;
text-align:right
}
.row-9 {
background-color:lightyellow;
}
.row-10{
background-color:lightyellow;
text-align:right;
}

2

Html-код, пожалуйста. Кнопка для вставки </> в редакторе сообщений.

3

Если не ошибаюсь, то перепроверьте еще раз задание классов для этих ячеек в HTML

4

Буква “c” у вас в слове class русская, поэтому не работает.
Задавать класс для каждой ячейки не надо. Вы много раз повторяетесь.

5 
table{
    border-collapse: collapse;
}
tr{
    border: 1px solid lightgray;
    border-style: solid none solid none;
}
thead, th {
    background-color:darkcyan;
    padding: 10px 10px;
    color: white;
    width: 33%;
    border: 1px solid black;
    border-style: solid none solid none;
}
th:nth-child(2) {
    background-color:lightblue;
}
td {
    padding: 10px 10px;
}
th:nth-child(3), td:nth-child(3),tr:nth-child(4) td:nth-child(2) {
    text-align: right;
}
tr:nth-child(even) {
    background-color: lightyellow;
}
td:nth-child(2){
   text-align: center; 
}
th:nth-child(1){
    text-align: left;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Испытание: итоговая таблица</title>
    </head>
    <body>
        <h1>Итоговая таблица</h1>
        <table>
            <thead>
                <th>Город</th>
                <th>Посещений</th>
                <th>%</th>
            </thead>
            <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>
            </tr>
        </table>
    </body>
</html>

Выскажите свое мнение по написанию css кода.

6

Помимо thead всё равно нужно использовать tr.

7

Можете раскрыть мысль? Зачем использовать и как? Внутри thead? Вместо?

8

Внутри thead заголовочные ячейки нужно обернуть в tr.

9

Так правильно?

  <table>
        <thead>
            <tr>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
        </tfoot>
    </table>
10

В целом, да. Две строки заголовочных ячеек - это специально?

11

не, случайно, накосячила )) Спасибо!

12

еще можно спрошу?

  • padding применяется к ячейкам? или к таблице?

  • border стилизуется как для таблицы в целом, так и для отдельной ячейки?

  • border-collapse применяется к таблице?

13

Смотря для чего напишете. Только стоит иметь в виду, что padding для table не работает, если border-collapse: collapse;

border-collapse пишется для контейнера таблицы, border - может быть как для таблицы в целом, так и для отдельной ячейки.

Это вопросы, которые можно проверить на практике.

1 лайк