PassFront
  1. PassFront
  2. База знаний
  3. Flexbox

Когда для таблицы использовать CSS Grid, Flexbox или HTML table?

Flexbox

Выбор зависит от того, что это за данные: табличные данные — <table>, раскладка — Grid или Flexbox.

HTML <table>

Если это действительно таблица (строки и столбцы данных: отчёт, прайс), нужна семантическая <table> с <th> и <caption>. Скринридеры понимают структуру, сообщают заголовки столбцов, а поисковики видят данные.

CSS Grid

Если нужна сетка для оформления (карточки, макет страницы, форма в две колонки) — Grid. Он выравнивает элементы по строкам и колонкам, но не несёт смысла таблицы.

Flexbox

Если элементы выстраиваются в одну линию (строка фильтров, ряд кнопок) — Flexbox.

Адаптивные таблицы

Для узких экранов таблицу обычно не перестраивают в grid, а оборачивают в контейнер с overflow-x: auto или превращают строки в карточки, сохраняя семантику через role и подписи.

Коротко для собеседования

Данные — <table>, двумерная раскладка — Grid, одномерная — Flexbox; таблицу не заменяют гридом только ради вида.

Подробнее: MDN — HTML-таблицы

Другие вопросы раздела