Объединение ячеек: colspan, rowspan

colspan и rowspan — атрибуты ячеек таблицы (<td>, <th>), которые позволяют растянуть ячейку на несколько столбцов или строк соответственно.

Зачем нужно

Реальные таблицы данных часто имеют сложную структуру: шапка объединяет несколько колонок, итоговая строка занимает всю ширину. colspan и rowspan позволяют создать такую структуру в HTML без хаков CSS. Важно: сложные объединения усложняют a11y — screen readers с трудом читают таблицы без явного scope и headers.

Где используется

  • Финансовые и аналитические таблицы
  • Расписания и матрицы данных
  • Таблицы с группировкой данных по категориям
  • Таблицы цен и тарифов (сравнение планов)

colspan — объединение столбцов

colspan="N" растягивает ячейку на N столбцов по горизонтали:

<table>
  <thead>
    <tr>
      <!-- Заголовок занимает 3 колонки -->
      <th colspan="3">Квартальные продажи 2026</th>
    </tr>
    <tr>
      <th>Продукт</th>
      <th>Q1</th>
      <th>Q2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ноутбуки</td>
      <td>1 200</td>
      <td>1 450</td>
    </tr>
    <tr>
      <!-- Итоговая строка — метка занимает первый столбец -->
      <td><strong>Итого:</strong></td>
      <td>1 200</td>
      <td>1 450</td>
    </tr>
  </tbody>
</table>

rowspan — объединение строк

rowspan="N" растягивает ячейку на N строк по вертикали:

<table>
  <thead>
    <tr>
      <th>Категория</th>
      <th>Продукт</th>
      <th>Цена</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <!-- Ячейка «Электроника» занимает 2 строки -->
      <td rowspan="2">Электроника</td>
      <td>Смартфон</td>
      <td>45 000 ₽</td>
    </tr>
    <tr>
      <!-- Ячейка категории уже «занята» rowspan выше -->
      <td>Планшет</td>
      <td>32 000 ₽</td>
    </tr>
    <tr>
      <td rowspan="2">Одежда</td>
      <td>Куртка</td>
      <td>8 000 ₽</td>
    </tr>
    <tr>
      <td>Джинсы</td>
      <td>4 500 ₽</td>
    </tr>
  </tbody>
</table>

Комбинация colspan и rowspan

<table border="1">
  <tr>
    <th rowspan="2">Регион</th>
    <th colspan="2">Продажи</th>
  </tr>
  <tr>
    <th>Q1</th>
    <th>Q2</th>
  </tr>
  <tr>
    <td>Москва</td>
    <td>500</td>
    <td>620</td>
  </tr>
</table>

Доступность сложных таблиц (a11y)

<table>
  <caption>Расписание занятий</caption>
  <thead>
    <tr>
      <th scope="col">Время</th>
      <th scope="col" colspan="2">Понедельник</th>
    </tr>
    <tr>
      <th scope="col">—</th>
      <th scope="col">Группа A</th>
      <th scope="col">Группа B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">09:00</th>
      <td>HTML</td>
      <td>CSS</td>
    </tr>
  </tbody>
</table>

Частые ошибки

Ошибка Почему плохо Как правильно
Забыть удалить «вытесненные» ячейки Нарушается структура таблицы При rowspan/colspan убирать перекрытые ячейки
colspan больше числа столбцов Лишние пустые ячейки Считай точное число столбцов
Нет scope при сложных объединениях Screen reader теряет контекст Добавляй scope="col" / scope="row"
Таблица для layout Семантически неверно Используй CSS Grid/Flexbox для вёрстки

Связанные темы

Ресурсы