Как отрисовать расписание и адаптировать?

Question

[Meekwest]

Есть расписание тренировок следующее:

Как лучше его организовать структурно в HTML, чтобы после верстки можно было спокойно из базы данных подгружать данные? Я так понимаю, если верстать таблицами, то возникнут проблемы с адаптацией под мобильные устройства? Соответственно не могу понять: верстать на таблицах либо div`ами на CSS Grid.

Comments

[wonderingpeanut]

Лучше таблицами. Чтобы с мобильными не было проблем, можно сделать на таблицу горизонтальную прокрутку.

Answer 1

[Ольга]

Для начала вы бы определились,а как оно будет выглядеть на мобильной версии, как будет выглядеть при переполнении(несколько записей в одной ячейке), а потом уже определяться с версткой.
ИМХО(да и не только мое), верстать нужно всегда с мобильной версии, с оглядкой на десктопную,а не наоборот. И дело не только в принципе Mobile First от Google, но и в том,что в мобильном варианте элементы идут в порядке потока информации,а на декстопе уже перемешиваются(перескакивают вправо-лево). если делать в обратном порядке, придется идти более сложным путем, т.к. придется менять элементы по вертикали, если изначальный порядок не был правильно угадан.

Если предугадать высоту ячеек нельзя, то лучший способ-это таблицы. Да и в целом - он самый простой. На мобильной версии либо добавляется скролл, либо творится непотребство в виде задания ячейкам и строкам display:block (вполне ходовой вариант,не стоит бояться). Основная проблема таблиц: в ячейках не совсем одинаково может работать position:absolute.