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

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

Здравствуйте! Испытание пройдено. Но вопрос в ширине ячеек, я задал ширину в пикселях. Это нормально? Или есть какой то более красивый вариант?

Безымянный.png581×769 35.1 KB

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

    <table>
        <tr>
            <th class="new1">Город</th>
            <th class="new2">Посещений</th>
            <th class="new4">%</th>
        </tr>
        <tr>
            <td class="new6">СПб</td>
            <td class="new3">199</td>
            <td class="new5">65.12</td>
        </tr>
        <tr class="new">
            <td class="new6">Москва</td>
            <td class="new3">69</td>
            <td class="new5">21.3</td>
        </tr>
        <tr>
            <td class="new6">Киев</td>
            <td class="new3">5</td>
            <td class="new5">8</td>
        </tr>
        <tr class=new>
            <td class="new6" colspan="2">Посещений за весь период</td>
            <td class="new5">273</td>
        </tr>
    <table>
body { width: 350px; margin: 0; padding: 0 10px; font-size: 14px; font-family: Arial, sans-serif; }

table {
border-collapse: collapse;
width: 100%
}

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

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

.new {
background-color: lightyellow;
}

.new1 {
background-color: darkcyan;
color: white;
text-align: left;
width: 99px;
}

.new2 {
background-color: lightblue;
color: white;
text-align: center;
width: 98px;
}

.new3 {
text-align: center;
}

.new4 {
background-color: darkcyan;
color: white;
text-align: right;
width: 99px;
}

.new5 {
text-align: right;
}

.new6 {
text-align: left;
}

2

Можно задать в процентах для td - 33%.

3

да, спасибо) буквально только что увидел как сделали другие. вот сижу ищу как удалить тему))

4

Тему может удалить только модератор.

5

эммм, вот такой вопрос. немного не понятно, может быть вы подскажете, 100% ширина это на сколько я понимаю, таблица должна быть во всю ширину поля минибраузера? или в этом задании ширина поля ограничена?

6

Ширина задана у body и этим ограничена.

7

но 33% это 115.5, а у меня ширина двух ячеек 99 и одной 98. остается еще 54 px, что не тянет на 1%. я воссоздал у себя на пк два варианта: и с процентами и с пикселями. блин, они реально одинаковые. но я не пойму как так получается с измерением в пикселях и процентах, если их сравнивать. ну на самом деле 33% это 115.5 px.

8

Это немного сложный механизм. Действительно хотите разбираться в этом?

9

ммм, вы меня пугаете. конечно, у меня мало знаний, можно сказать их вообще нет. но да, мне бы хотелось понять почему это так работает. и как раз в связи с тем что у меня практически нет знаний, я могу замучить вас вопросами.

10

Это не так просто. Придется очень постараться…)
По поводу таблицы. Вот вы задали ширину ячеек, 99, 98, 99, но в реальности имеет значение не сама величина, а соотношение между ними. Я подобрала еще вариант: 106, 99, 108 - и не поверите, но тоже в итоге 100%. Общая ширина таблицы делится между ячейками пропорционально.
Я могу найти вам тему на форуме, тут целая дискуссия была именно по этому поводу.

11

по поводу подобной темы, было бы здорово) если честно, то я как то даже расстроен… я то думал что языки программирования очень точны. а тут получается что при разных значениях мы можем получить по факту одно и то же. и еще, простите, вы модератор?)

12

Нет, я не модератор. Доброволец, так скажем. Модераторов вы можете поискать в этом списке: http://forum.academy/users?order=days_visited&period=all
И похожая тема про таблицы: Испытание: ещё одна CSS-таблица [18/18]

2 лайка
13

вы молодец! огромное вам спасибо)

14

Спасибо)