Как лучше реализовать список характеристик?

Question

[NinjaSystems]

Как семантически правильно и без особых проблем с адаптивностью реализовать в карточке продукта список характеристик? Пока что в голове крутятся два способа:
1) Через тег table
2) Через списки ul

Как можно сделать еще?

Comments

[Олег]

Все зависит от того, какой вывод крутился в голове дизайнера карточки товара.

[Lord_Dantes]

ul + flex
Если по дизайну нету таблиц

[sergski]

s l a v e, справедливости ради table + flex тоже ок.

[Lord_Dantes]

sergski,

table очень тяжко адаптировать

[sergski]

s l a v e, что именно тяжело?)

[R0nti]

s l a v e, оба варианта применимы. Просто при использовании table нужно не забывать про tbody, которому тоже нужно задавать display: flex, чтобы его дочерние элементы стали flex элементами.

[R0nti]

А вообще в плане доступности я бы использовал table.
К примеру:

• Люди, использующие программы чтения с экрана, могут читать заголовки строк и столбцов при навигации по таблице. Программы чтения с экрана говорят по одной ячейке за раз и ссылаются на соответствующие ячейки заголовка, чтобы читатель не терял контекст.
  
• Некоторые люди используют альтернативные способы визуализации данных , например, используя пользовательские таблицы стилей для более заметного отображения ячеек заголовка. Подобные методы позволяют им изменять размер и цвета текста и отображать информацию в виде списков, а не сеток. Код таблицы должен быть правильно структурирован, чтобы разрешить альтернативные визуализации.
  

Answer 1

[n1ksON]

Чтобы не было проблем с адаптивностью, таблицы использовать не рекомендуется.
Если не большой список характеристик, тогда используйте списки. Всё зависит от размера информации, которую необходимо расположить на сайте. Если информации много, можно расположить в блоках.

Answer 2

[NinjaSystems]

Я решил использовать flex + ul.