Как сверстать такую таблицу? table или div?

Question

[Hummerson]

Всем приветы. Подскажите пожалуйста, как сверстать такую табличку? Через бутстрап table или дивами?
Нужно еще сделать так, чтобы из базы данных туда строчка вставала
Оух, чет я вообще запутался :c

Comments

[Владислав Лысков]

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

Answer 1

[Вадим Белкин]

Из-за особенностей дизайна проблематично сделать через стандартное табличное поведение (добавить тени и отступы между строками т.к. элементы с display: table-row не дают такой возможности).
Но в данном случае, если важна семантика и доступность (Web Accessibility), я бы все же использовал table и сопутствующие теги, изменив у них свойства display на block и flex где нужна блочная или горизонтальная раскладка (это позволит добавить тени для tr и отступы между ними).
Естественно все можно сделать так же на div и даже добавить role и aria-* атрибуты если опять же важна доступность.

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

Answer 2

[sergey]

Можете еще поиграться с data-table

Answer 3

[Алекс]

flexbox))

Answer 4

[Justique]

Как написали выше, не делайте велосипед, на flexbox это делается за час