10/18 Испытание 100%, но есть вопросы

Курсы §29. Таблицы на CSS
1

Прошел испытание на 100%, но есть вопросы. Я долго мучился, и в итоге получилось сделать всё, как надо только после того как добавил для .formula header { display: table-header-group; } Этот пункт добавил после того, как подглядел у других людей код, но совсем не понимаю для чего он нужен в данном случае, и что делает? Так же не понимаю, что означают в Html коде следующие пункты:

<div class="column-group">
            <div class="column"></div>
            <div class="column"></div>
            <div class="column"></div>
        </div>
        <div class="column column-last"></div>

Полный код CSS можете проверить здесь:

/* Используемые цвета:

#777777
#ffffff
#fffebc
#b2fdd0
#ffbaba

*/

.formula {
margin: 10px;
width: 500px;
border-collapse: collapse;
display: table;
}

.formula p {
margin: 0;
padding: 10px;
font-size: 20px;
display: table-caption;
caption-side: bottom;
text-align: center;
}

.formula ul {
display: table-row;
}

.formula ul li {
display: table-cell;
border: solid 1px #777777;
text-align: center;
vertical-align: middle;
padding: 5px;
}

.formula .content {
display: table-row-group;
}

.formula header {
display: table-header-group;
}

.formula header li {
border-bottom: none;
}

.content li:last-child {
background-color:#ffbaba;
}

.content {
background-color:#b2fdd0;
}

.formula .content-important li {
background-color:#fffebc;
}

2

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

Об этой группе колонок было рассказано: https://htmlacademy.ru/courses/86/run/9

3

Прошу прощения, не тот кусочек вставил. Я имел в виду, что обозначает этот код. Без него вся таблица сыпалась, и пока не подсмотрел у других не смог сделать:

.formula .content {

display: table-row-group;
}

4

Приведите пример кода, когда таблица “сыплется”, ситуация зависит от того, какие еще свойства заданы. Смоделируйте эту ситуацию.

5

код выше в теме, вопрос заключается в том для чего этот участок кода?

7

тот же вопрос, так же сыпется, вся таблица едет. Все ячейки размещаются в пределах 1 колокни(!!!) хедера без данного свойства. Я в соседней теме задал этот же вопрос с примерами

8

сделал, но не скажу что я понял все значения свойств, не хватает информации

.formula {
    margin: 10px;
    width: 500px;
    border-collapse: collapse;
    display:table;
    text-align:center;
    border:1px solid black;
}
.formula p {
    margin: 0;
    padding: 10px;
    font-size: 20px;
    display:table-caption;
    caption-side:bottom;
    text-align:center;
    }
ul{
  display:table-row;
}
li{
  border:1px solid #777777;
  display:table-cell;
  padding:5px;
  vertical-align:middle;
}
header{
  display: table-header-group;
  background:#ffffff;
}
header li{
  border-bottom:none;
}
.content{
  display:table-row-group;
 }
.content-important{
  display:table-footer-group;
  background:#fffebc;
}
.column{
  display:table-column;
  }
.column-group{
  display:table-column-group;
  background:#b2fdd0;
}
.column-last{
 background:#ffbaba; 
}
9

а для чего здесь эти свойства? .content-important{
display:table-footer-group;
}

header li{
border-bottom:none;
}

Мне кажется, без них можно обойтись тут.

10

можно, они задавались вначале, так и остались в коде. в старте кода они имели смысл

.formula {
    margin: 10px;
    width: 500px;
    border-collapse: collapse;
    display:table;
    text-align:center;
    border:1px solid black;
}
ul{
  display:table-row;
}
li{
  border:1px solid #777777;
  display:table-cell;
  padding:5px;
  vertical-align:middle;
}
.formula p {
    margin: 0;
    padding: 10px;
    font-size: 20px;
    display:table-caption;
    caption-side:bottom;
    text-align:center;
    }
header{
  display: table-header-group;
  background:#ffffff;
}
.content{
  display:table-row-group;
 /* background:#b2fdd0;*/
 }
.content-important{
  background:#fffebc;
}
.column{
  display:table-column;
  }
.column-group{
  display:table-column-group;
  background:#b2fdd0;
}
.column-last{
 background:#ffbaba; 
}
11

Народ, отвечаю сразу всем вопрошающим. Вы не забыли, что здесь НЕТ табличных тегов в разметке? Как тогда, по-вашему, браузер угадает, что весь этот набор кода - это таблица? Вот для того и нужно для начала ОПИСАТЬ, что есть таблица, что есть её строки, что есть её столбцы, что есть её ячейки, что есть её хедер и т.д… И все эти свойства display: … как раз и описывают СТРУКТУРНЫЕ элементы таблицы. Только после этого можно с ней работать. Касательно информации - как раз по таблицам на CSS её БОЛЕЕ, чем достаточно, в этих уроках. А также некоторые нюансы есть на форуме в этой ветке. Поэтому несколько раз пройдите уроки по таблице осознанно, тогда итоговое испытание будет без каких-либо проблем.

12

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

2 лайка
13

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