Генератор таблиц HTML

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

<table>
  <caption>Q1 sales figures</caption>
  <thead>
    <tr>
      <th scope="col">Region</th>
      <th scope="col">Q1</th>
      <th scope="col">Q2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">EU</th>
      <td>$120k</td>
      <td>$145k</td>
    </tr>
  </tbody>
</table>

Элементы и их функции

Адаптивные приёмы

• Горизонтальная прокрутка: оберните таблицу в <div style="overflow-x:auto">, чтобы на узких экранах она прокручивалась, а не ломала вёрстку.
• Перестроение под мобильные: продублируйте заголовки в атрибутах data-label и с помощью CSS превратите строки в вертикальные карточки, удобно для небольших наборов данных.
• Перекомпоновка через grid: сложные таблицы можно перестроить средствами CSS Grid, но при этом теряется встроенная навигация с клавиатуры; оправдано только для панелей управления.

Контрольный список доступности

• У каждого <th> есть атрибут scope.
• Для сложных объединений ячеек используйте headers="...", чтобы связать ячейки данных с идентификаторами заголовков.
• Подпись кратко описывает назначение таблицы.
• Не используйте таблицы для визуальной вёрстки, применяйте CSS Grid или Flexbox.