Будешь ли использовать grid для оформления таблица

Question

Будешь ли использовать grid для оформления таблица

Тип вопроса: CSS Вероятность: 10% Категория: Frontend Разработчик

Ответ

Нет, для таблиц лучше использовать <table>, так как это семантически правильный элемент для табличных данных. Grid больше подходит для сложных макетов страницы.

Пример таблицы:

<table>
  <thead>
    <tr>
      <th>Заголовок 1</th>
      <th>Заголовок 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Данные 1</td>
      <td>Данные 2</td>
    </tr>
  </tbody>
</table>

Grid стоит использовать, если нужны нестандартные расположения ячеек или сложные адаптивные изменения.

Ответ 18+ 🔞

А, ну ты про таблицы, да? Слушай, тут народ иногда такой — взял CSS Grid, и давай им таблицы верстать, как будто это модно. А потом сидит, блядь, и думает, почему скринридеры его нахуй посылают.

Так вот, запомни раз и навсегда, как отче наш: для табличных данных — <table>. Это святое, ёпта! Это как в рот меня чих-пых, если ты будешь вилки супом есть. Элемент <table> — он семантический, он для этого и создан. Скринридеры, поисковики — все понимают, что это таблица, и относятся с уважением.

А Grid — это, блядь, мощнейший инструмент для макетов всей страницы или сложных раскладок, где тебе нужно, чтобы блоки как попало перестраивались на разных экранах. Хочешь, чтобы на десктопе было три колонки, а на мобиле одна — вот твой выход. Но это не для данных, это для интерфейса!

Смотри, вот тебе каноничный пример таблицы, чтоб ты запомнил:

<table>
  <thead>
    <tr>
      <th>Имя пользователя</th>
      <th>Почта</th>
      <th>Рейтинг</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Василий</td>
      <td>vasya@example.com</td>
      <td>1500</td>
    </tr>
    <tr>
      <td>Мария</td>
      <td>masha@example.com</td>
      <td>1850</td>
    </tr>
  </tbody>
</table>

Всё, больше ничего не надо. Стилизуй потом как хочешь — хоть бордюры убери, хоть зебру сделай. А семантика останется, и все будут довольны.

А Grid — это когда у тебя, например, шапка, сайдбар, основной контент и подвал, и всё это должно на мобилке в одну колонку красиво сложиться. Вот тогда — да, display: grid; и вперёд. Но пытаться им таблицу с <th> и <td> заменить — это, прости, манда с ушами получается.

Короче, инструменты — на свои места. И жить станешь дольше, и волосы на жопе не поседеют раньше времени.