23/23

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

image.png1600×900 125 KB

Что не так?

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

body {
width: 350px;
margin: 0;
padding: 0 10px;
font-size: 14px;
font-family: Arial, sans-serif;
}
table{
border-collapse: collapse;
}
td{
width: 33%;
border-bottom: 1px solid lightgray;
padding: 10px;
}
.arara{
background-color: lightyellow;
}
.arara1{
background-color: lightyellow;
}
th{
color: white;
background-color: darkcyan;
padding:10px
}
.blue{
background-color: lightblue;
}
.center{
text-align: center;
}
.right{
text-align: right;
}
.6{
text-align: left;
css

4

“%” в образце выравнивание справа
UPD: а “Город” - слева.
UPD: вы весь код нам предоставили (В HTML например нет закрывающего )?

5

Название открывающего и закрывающего тегов должны совпадать.

6

Вот тут ваш код с моими изменениями, все изменения прокомментированы.

<table>
    <tr class="4">
<th class="left6" >Город</th> <!-- добавил class="left6" и </td> на </th> у всех th !!! -->
<th class="blue" >Посещений</th>
<th class="right">%</th> <!-- добавил class="right" -->
</tr>      
<tr>
    <td >СПб</td>
    <td class="center">199</td>
    <td class="right">65.12</td>
    </tr>
    <tr class="arara">
        <td>Москва</td>
        <td class="center">69</td>
        <td class="right">21.3</td>
        </tr> <!-- </tr>. точка лишняя -->
        <tr>
            <td>Киев</td>
            <td class="center" >5</td>
            <td class="right">8</td>
            </tr>
            <tr class="arara1">
                <td colspan='2'>Посещений за весь период</td>
                <td class="right">273</td>
            </tr>  <!-- добавил </tr> -->
    </table>  <!-- добавил </table> -->

body {
width: 350px;
margin: 0;
padding: 0 10px;
font-size: 14px;
font-family: Arial, sans-serif;
}
table{
border-collapse: collapse;
}
td{
width: 33%;
border-bottom: 1px solid lightgray;
padding: 10px;
}
.arara{
background-color: lightyellow;
}
.arara1{
background-color: lightyellow;
}
th{
color: white;
background-color: darkcyan;
padding:10px; /** добавил ; /
border-top: 1px solid black; / добавил border /
border-bottom: 1px solid black; / добавил border /
}
.blue{
background-color: lightblue;
}
.center{
text-align: center;
}
.right{
text-align: right;
}
.left6{ / поменял 6 на .left6, обзывать цифрой нельзя /
text-align: left;} / добавил } **/

1 лайк
7

Это тоже надо исправлять, разве нет?

1 лайк
8

Да! Добавил комментарий )

9

Не вижу)

10

Уверяю вас, я добавил )

<th class="left6" >Город</td> <!-- добавил class="left6" -->
11

Я немного о другом. Какой тег вы видите в этой строке?

1 лайк
12

У вас глаз алмаз!

13

спасибо,делал всё по вашему комментарию,спасибо большое,но всё равно такая вот проблема. не знаю что не так,вроде всё выровнял.проблема при наложении

image.png1600×900 133 KB

14

Самой последней закрывающей TR нет. Может из-за этого?

15

Рамки у th не хватает.

16

вставил рамки и вот что получилось.

image.png1600×900 119 KB

фон у th почему-то уменьшился сверху и снизу,пытался с помощью отступа как-то исправить,но никак не реагирует.

17

На скрине я не вижу весь ваш код.

1 лайк
18

Для <th> padding:10px; в CSS есть?

1 лайк
19

точку с запятой в css th {padding: 10px;} забыли

1 лайк