Какая структура у таблицы?

Структура таблицы в HTML

В HTML таблица имеет иерархическую структуру, построенную на нескольких ключевых тегах. Основной каркас выглядит так:

<table>
  <thead>
    <tr>
      <th>Заголовок столбца</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Данные ячейки</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Итоговая информация</td>
    </tr>
  </tfoot>
</table>

Основные элементы структуры

1. <table> — корневой контейнер, определяющий начало и конец таблицы.

2. <thead> (table head) — секция для заголовков столбцов. Обычно содержит одну или несколько строк <tr> с элементами <th>.

3. <tbody> (table body) — основная секция для данных таблицы. Может быть несколько таких секций для логического разделения данных.

4. <tfoot> (table foot) — секция для итогов, сумм или примечаний. Несмотря на положение в коде, визуально отображается внизу таблицы.

5. <tr> (table row) — строка таблицы, контейнер для ячеек.

6. <th> (table header) — ячейка-заголовок. По умолчанию выделяется жирным и центрируется. Атрибут scope определяет область влияния (col, row, colgroup, rowgroup).

7. <td> (table data) — ячейка с данными. Основной строительный блок для контента.

Дополнительные элементы для сложных таблиц

Для более сложных структур используются:

<table>
  <colgroup>
    <col span="2" style="background-color: #f8f9fa;">
    <col style="background-color: #e9ecef;">
  </colgroup>
  <caption>Название таблицы</caption>
  <!-- ... thead, tbody, tfoot ... -->
</table>

• <caption> — заголовок/описание таблицы, отображается сверху.
• <colgroup> и <col> — позволяют задавать стили для целых столбцов без дублирования в каждой ячейке.

Современные атрибуты и доступность

Критически важно использовать семантическую разметку для доступности:

<table aria-label="Статистика продаж по месяцам">
  <thead>
    <tr>
      <th scope="col">Месяц</th>
      <th scope="col">Продажи</th>
    </tr>
  </thead>
  <!-- ... -->
</table>

Ключевые атрибуты:

• scope для <th> — указывает, к чему относится заголовок (столбцу или строке)
• colspan и rowspan — объединение ячеек по горизонтали и вертикали
• headers — связывает ячейки данных с соответствующими заголовками
• aria-* атрибуты — улучшение доступности для скринридеров

Эволюция подхода к таблицам

Исторически таблицы использовались для верстки целых страниц, что было антипаттерном. Современные принципы:

• Использовать таблицы только для табличных данных (финансовые отчеты, расписания, сравнения)
• Избегать таблиц для макета — для этого существуют Flexbox и Grid
• Всегда обеспечивать доступность — правильная семантика, контрастность, клавиатурная навигация
• Адаптивность — на мобильных устройствах часто требуется трансформация таблицы (горизонтальный скролл, переформатирование в карточки)

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