правило дочернего селектора в таблице / html

Question

▸ Чтобы добиться правильного расположения букв направления и двунаправленных стрелок, используйте свойство CSS display со значениями таблицы. А для строк и ячеек таблицы используйте CSS правила дочернего селектора, а не правила селектора классов.

Я написал Html с классом div / row, но должен использовать дочерний селектор. Как изменить и не переписывать все.Честно даже не знаю как. В этой таблице нет рамки и в строках буквы даты и изображения со стрелками. Я только начал изучать html / css / js. вот мой html спасибо

<div class="Heading">
    <div class="Cell">
        <p class="diagonal"><img src="dablearow.png";></p>
    </div>
    <div class="Cell">
        <h2>E</h2>
    </div>
    <div class="Cell">
        <p></p>
    </div>
</div>
<div class="Row">
    <div class="Cell">
        <h2>S</h2>
    </div>
    <div class="Cell">
        <p><img src="dablearow.png" ></p>
    </div>
    <div class="Cell">
        <h2>N</h2>
    </div>
</div>
<div class="Row">
    <div class="Cell">
        <p></p>
    </div>
    <div class="Cell">
        <h2>W</h2>
    </div>
    <div class="Cell">
        <p class="diagonal"><img src="dablearow.png"></p>
    </div>
</div>

Answer 1

Думаю, ты хочешь это

.table{
   display: table;
}
.table > div{
	display: table-row;
}
.table > div > div{
	display: table-cell;
	width: 100px;
}

<div class="table">
<div>
    <div>
        <p class="diagonal"><img src="dablearow.png";></p>
    </div>
    <div>
        <h2>E</h2>
    </div>
    <div>
        <p></p>
    </div>
</div>
<div>
    <div>
        <h2>S</h2>
    </div>
    <div>
        <p><img src="dablearow.png" ></p>
    </div>
    <div>
        <h2>N</h2>
    </div>
</div>
<div>
    <div>
        <p></p>
    </div>
    <div>
        <h2>W</h2>
    </div>
    <div>
        <p class="diagonal"><img src="dablearow.png"></p>
    </div>
</div>
</div>

Answer 2

Просто используйте таблицу с тегом "table". Это было бы намного лучше. Вам не нужно делать этот div. Просто предложение. Также используйте "td" для ячеек в угловых скобках с "th" для заголовки в таблице. Все в кавычках должны быть в угловых скобках: <>