Таблицы в HTML: понятное руководство для начинающих с примерами и адаптивными паттернами

Если вы хотите уверенно работать с табличными данными на веб‑страницах, начните с правильной разметки. Таблицы в HTML — это структурированный способ показать связанные данные, а не инструмент для построения колонок или сеток. Ниже — простое, но практичное руководство с кодом, советами и адаптивными приёмами для реальных проектов.

Когда действительно нужны таблицы в HTML

Базовая структура таблицы

Минимальный набор для корректной и доступной таблицы: <table>, строка <tr>, ячейки <th> (заголовки) и <td> (данные). Рекомендуется добавлять <caption> (подпись), а также секции <thead>, <tbody>, <tfoot> — они улучшают понимание разметки браузерами, технологиями доступности и упрощают стилизацию.

<table>
  <caption>Расходы по месяцам, 2025</caption>
  <thead>
    <tr>
      <th scope="col">Месяц</th>
      <th scope="col">Продукты</th>
      <th scope="col">Транспорт</th>
      <th scope="col">Итого</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Январь</th>
      <td>12000</td>
      <td>3500</td>
      <td>15500</td>
    </tr>
    <tr>
      <th scope="row">Февраль</th>
      <td>11500</td>
      <td>3800</td>
      <td>15300</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="3">Всего</th>
      <td>30800</td>
    </tr>
  </tfoot>
</table>

Атрибут scope помогает технологиям доступности понимать, к чему относится заголовок: scope="col" — к столбцу, scope="row" — к строке.

Объединение ячеек и сложные заголовки

Используйте colspan и rowspan, чтобы объединять ячейки. Для сложных таблиц с многоуровневыми заголовками применяйте id у <th> и атрибут headers у <td> — так скринридер сможет связать каждую ячейку с соответствующими заголовками.

<table>
  <caption>Продажи по товарам (шт.)</caption>
  <thead>
    <tr>
      <th id="h-prod">Товар</th>
      <th id="h-jan">Янв</th>
      <th id="h-feb">Фев</th>
      <th id="h-q1" colspan="2">Итоги Q1</th>
    </tr>
    <tr>
      <th id="h-q1-min">Мин</th>
      <th id="h-q1-max">Макс</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="r-milk" scope="row">Молоко</th>
      <td headers="r-milk h-jan">120</td>
      <td headers="r-milk h-feb">110</td>
      <td headers="r-milk h-q1 h-q1-min">110</td>
      <td headers="r-milk h-q1 h-q1-max">130</td>
    </tr>
  </tbody>
</table>

Такой подход помогает и людям, и машинам (скринридеры, парсеры) корректно интерпретировать данные.

Быстрая стилизация: зебра, липкая шапка, аккуратные границы

/* Базовые стили */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px 12px; border: 1px solid #ddd; text-align: left; }
caption { caption-side: top; text-align: left; font-weight: 600; margin-bottom: 8px; }

/* Зебра */
tbody tr:nth-child(odd) { background: #fafafa; }

/* Липкая шапка (поддерживается большинством современных браузеров) */
thead th { position: sticky; top: 0; background: #fff; z-index: 1; }

/* Числовые данные по правому краю */
td[data-num], th[data-num] { text-align: right; font-variant-numeric: tabular-nums; }

При липкой шапке не забывайте про контраст фона для <thead> и возможную тень — так заголовок не «слипнется» с контентом при прокрутке.

Адаптивные таблицы: два рабочих паттерна

1) Горизонтальная прокрутка (простой и надёжный способ)

<div class="table-wrap">
  <table>...ваша таблица...</table>
</div>

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { min-width: 600px; } /* при необходимости фиксируем минимальную ширину */

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

2) «Карточки» на мобильных (stacked table)

При небольших экранах каждую строку можно отображать блоком, а подписи колонок выводить через псевдоэлемент и атрибут data-label у ячеек.

<table class="stacked">
  <thead>
    <tr>
      <th>Месяц</th>
      <th>Продукты</th>
      <th>Транспорт</th>
      <th>Итого</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" data-label="Месяц">Январь</th>
      <td data-label="Продукты">12000</td>
      <td data-label="Транспорт">3500</td>
      <td data-label="Итого" data-num>15500</td>
    </tr>
  </tbody>
</table>

/***** CSS *****/
@media (max-width: 640px) {
  .stacked thead { display: none; }
  .stacked, .stacked tbody, .stacked tr, .stacked th, .stacked td { display: block; width: 100%; }
  .stacked tr { margin: 0 0 12px; border: 1px solid #e5e5e5; border-radius: 8px; overflow: hidden; }
  .stacked th[scope="row"] { background: #f7f7f7; font-weight: 600; padding: 10px 12px; border-bottom: 1px solid #e5e5e5; }
  .stacked td { padding: 8px 12px; position: relative; }
  .stacked td::before { content: attr(data-label) ": "; color: #666; margin-right: 8px; }
  .stacked td[data-num] { text-align: right; }
}

Плюсы: читаемо на мобильных без прокрутки. Минусы: не для очень сложных таблиц, где важен общий контекст столбцов. В таких случаях лучше оставить горизонтальную прокрутку.

Доступность: минимум, который стоит сделать всегда

Частые ошибки и как их избежать

Мини‑чеклист перед сдачей задачи

Хотите системно прокачать навыки HTML и CSS (в том числе работу с таблицами, сетками и адаптивом)? Посмотрите программу и первые уроки: Прокачать HTML и вёрстку на курсе «Вёрстка сайта с нуля 2.0» — практические модули, задания и разборы помогут превратить теорию в уверенную практику.

Итоги

Таблицы в HTML остаются незаменимым инструментом для структурированных данных. Используйте семантическую разметку (<caption>, <thead>, <tbody>, <tfoot>, <th>), думайте о доступности (scope, headers), добавляйте аккуратную стилизацию и подбирайте адаптивный паттерн под задачу. Такой подход даёт читабельность, удобство и устойчивую верстку в реальных проектах.

Источник