Оцените код, пожалуйста! 10/18!

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

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

#777777
#ffffff
#fffebc
#b2fdd0
#ffbaba

*/

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

.formula p {
margin: 0;
padding: 10px;
font-size: 20px;
}

.formula {
display: table;
}

.formula ul {
display: table-row;
}

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

.formula p {
display: table-caption;
caption-side: bottom;
text-align: center;
}

header {
display: table-header-group;
}

header li {
background-color: #ffffff;
}

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

.formula .column {
display: table-column;
}

.column-group {
display: table-column-group;
background-color: #b2fdd0;
}

.column-last {
display: table-column;
background-color: #ffbaba;
}

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

.content li:nth-child(3) {
vertical-align: middle;
}

2

Для чего это нужно?

3

Это нужно, что-бы прочерк стоял по середине клеточки. Без этого css-правила он будет снизу.

4

Вопрос был поставлен так:
для чего это нужно в каждой третьей ячейке?
Разве в остальных выравнивать не обязательно?

vertical-align: middle; перенесите в .formula li – пусть выравнивается во всех ячейках.

В целом – код не аккуратный, сделано наспех:
одинаковые селекторы и общие свойства в разных местах…

5

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

6

.formula – два селектора в разных местах.
.formula p – два селектора в разных местах.

border: 1px solid black;
border-color: #777777;
Цвет рамки определили черным, и сразу же перекрасили…

header li {
background-color: #ffffff; – можно перенести в .header.
}

.formula .column {
display: table-column;
}

.column-last {
display: table-column; – уже определено в .formula .column
background-color: #ffbaba;
}

7

Посмотрите код плз, что улучшить можно, а то что-то тяжко таблицы на css иду у меня…

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

#777777
#ffffff
#fffebc
#b2fdd0
#ffbaba

*/

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

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

.formula header {
    display: table-header-group;
    border-bottom: none;
    background-color: #ffffff;
    
}

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

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

.formula ul {
    display: table-row;
    
}

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

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

.formula .column {
    display: table-column;
    background-color: #b2fdd0;
}

.formula .column-last {
    background-color: #ffbaba;
}
1 лайк
8

.formula header {
display: table-header-group;
border-bottom: none;
background-color: #ffffff;
}

1 лайк
9

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