Как лучше сверстать блок?

Question

[Дмитрий Гормаш]

Добрый день. Подскажите, как лучше сверстать данный блок(скрин): таблицами или блоками? Конкретно для чего и какая информация в нем будет храниться, а также как его будут выводить программисты, мне неизвестно. Есть макет, без комментариев, его и нужно правильно сверстать.

Пока больше склоняюсь к таблицам, ведь это же таблица, а таблицы для таких вещей и существуют в верстке.

Заранее спасибо за совет!

Answer 1

[Сергей]

Верстать это я думаю имеет смысл естественно блоками, если знакомы с flexbox, то используя их, как уже сказали выше.

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

Answer 2

[Егор Живагин]

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

Флексы не таблицы. Совсем. Вот тут можете почитать, всё предельно просто описано.

Если смущает центрирование контента, то во флексах оно делается даже проще, чем в таблицах)

Answer 3

[Ankhena]

Если адаптивности нет и не предполагается, то можно и таблицами.
Если есть или возможна, то дивами. display table или flex или инлайн блоками.

Answer 4

[Яхья]

используй flexbox frontender.info/a-guide-to-flexbox

Comments

[Дмитрий Гормаш]

Флексбокс тоже вариант, но это же вроде как таблица с виду, вот и думаю, мб таблицей сделать.

[Nevada18]

причем тут флексы? парень интересуется верстать ему дивами или таблицей

[Дмитрий Гормаш]

Nevada18: возможно, чуть неправильно выразился я: мне все равно как верстать, вопрос в том, как было бы лучше сверстать данный макет.

[Яхья]

Nevada18: ну ок, захочет он дивами а дальше что ? float? display:inline-block?

[Антон Иванов]

Дмитрий Гормаш: Вопрос "как лучше" неправильный. Как лучше для кого? Очень субъективно. По существу - у вас на скрине семантически похоже на таблицу - отчетливо просматриваются строки. Так и верстайте таблицей. Таблица vs div vs flex - никак не влияет ни на отображание, ни на содержание, ни на SEO.

[Дмитрий Гормаш]

Антон: Спасибо за ответ.