Объединение ячеек HTML по горизонтали и вертикали

colspan в HTML – атрибут <td> или <th>, который задает число столбцов для одной ячейки. rowspan задает число строк. Например, <td colspan="2">Текст</td> занимает два столбца, а <td rowspan="2">Текст</td> – две строки.

Так работает объединение ячеек html: вы задаете ширину или высоту ячейки атрибутом, а лишние элементы убираете из занятой сетки. Пример ниже объединяет две ячейки в верхней строке.

<style>
table { border-collapse: collapse; }
td, th { border: 1px solid #777; padding: 8px; }
</style>

<table>
  <tr><td colspan="2">Общее содержимое</td></tr>
  <tr><td>Ячейка 1</td><td>Ячейка 2</td></tr>
</table>

Сохраните код в файле с расширением .html и откройте его в браузере: рамки покажут границы сетки.

Как объединить ячейки в таблице по горизонтали с colspan

Атрибут colspan в HTML задает число столбцов, которые занимает ячейка одной строки.

Иллюстрация показывает горизонтальное объединение: одна ячейка занимает ширину двух столбцов.

Для заголовка таблицы используйте <th colspan="n"> внутри <thead>. Если текст называет всю таблицу, поместите его в <caption>.

<style>
table { border-collapse: collapse; }
td, th { border: 1px solid #777; padding: 8px; }
</style>

<table>
  <thead>
    <tr><th colspan="2">Продажи за месяц</th></tr>
    <tr><th scope="col">Товар</th><th scope="col">Количество</th></tr>
  </thead>
  <tbody>
    <tr><td>Книги</td><td>24</td></tr>
  </tbody>
</table>

Первая строка содержит одну ячейку шириной в два столбца, вторая – две обычные ячейки.

1. Определите число столбцов в таблице.
2. Добавьте colspan="n" в выбранный <td> или <th>.
3. Удалите из этой строки n − 1 соседних ячеек без объединения.

При colspan="2" удалите одну соседнюю ячейку. Сохраните ее текст заранее, потому что атрибут не переносит содержимое удаленного элемента.

Значение colspan задают от 1 до 1000. Значение 1 оставляет ячейку обычной и подходит для кода, который формируется автоматически.

Как работает rowspan в HTML для объединения ячеек по вертикали

Атрибут rowspan в HTML растягивает ячейку на несколько строк. Нижние строки получают меньше ячеек, потому что объединенный блок уже занимает их место.

Иллюстрация показывает вертикальное объединение двух строк в первом столбце.

<style>
table { border-collapse: collapse; }
td, th { border: 1px solid #777; padding: 8px; }
</style>

<table>
  <tbody>
    <tr>
      <th rowspan="2" scope="rowgroup">Январь</th>
      <td>Книги</td>
    </tr>
    <tr>
      <td>Журналы</td>
    </tr>
  </tbody>
</table>

В этом примере ячейка «Январь» занимает первый столбец двух строк, поэтому во второй остается только ячейка «Журналы».

1. Добавьте rowspan в ячейку первой строки группы.
2. Укажите число строк, которое должна занимать ячейка.
3. Удалите из каждой следующей строки группы ячейку на занятом месте.

При rowspan="3" удалите по одной ячейке в следующих двух строках. Общий блок должен занять высоту трех строк.

Значение rowspan можно задать от 0 до 65534. Значение rowspan="0" растягивает ячейку до конца группы строк в thead, tbody или tfoot.

Объединение ячеек таблицы HTML по горизонтали и вертикали

Если одна ячейка получает оба атрибута, учитывайте ее ширину во всех занятых строках.

Иллюстрация показывает сочетание горизонтального и вертикального объединения. В первом листинге ячейка «Три строки» занимает первый столбец трех строк.

<style>
table { border-collapse: collapse; }
td, th { border: 1px solid #777; padding: 8px; }
</style>

<table>
  <tr>
    <td rowspan="3">Три строки</td>
    <td colspan="3">Три столбца</td>
  </tr>
  <tr>
    <td>H</td>
    <td>T</td>
    <td rowspan="2">Две строки</td>
  </tr>
  <tr>
    <td>M</td>
    <td>L</td>
  </tr>
  <tr>
    <td colspan="4">Четыре столбца</td>
  </tr>
</table>

Во второй строке первый столбец занят верхним rowspan. Три оставшиеся позиции заполняют две обычные ячейки и ячейка с собственным rowspan.

В отдельном примере одна ячейка занимает одновременно два столбца и две строки.

<style>
table { border-collapse: collapse; }
td, th { border: 1px solid #777; padding: 8px; }
</style>

<table>
  <tr>
    <td rowspan="2" colspan="2">Две строки и два столбца</td>
    <td>T</td>
  </tr>
  <tr>
    <td>A</td>
  </tr>
  <tr>
    <td>E</td>
    <td>L</td>
    <td>B</td>
  </tr>
</table>

Чтобы объединить ячейки HTML-таблицы сразу в обоих направлениях, добавьте оба атрибута одному элементу. В следующей строке оставьте только ячейки для свободных позиций.

Использование вертикально объединенных ячеек

Вертикальный заголовок связывает несколько строк одной группы. Цвет столбцов помогает быстро различить названия и числовые значения.

Иллюстрация показывает группу строк с общим заголовком и цветовым выделением столбцов.

<style>
table { border-collapse: collapse; }
td, th { border: 1px solid #777; padding: 8px; }
col.products { background-color: #e8f0fe; }
col.values { background-color: #fff3cd; }
</style>

<table>
  <caption>Продажи книг по партиям</caption>
  <colgroup>
    <col class="products">
    <col class="values">
  </colgroup>
  <tbody>
    <tr><th rowspan="2" scope="rowgroup">Книги</th><td>24</td></tr>
    <tr><td>18</td></tr>
  </tbody>
</table>

Элемент <tbody> задает группу строк для заголовка с scope="rowgroup". Для следующей группы создайте отдельный <tbody> со своим заголовком.

Доступность объединенных ячеек в HTML-таблице

Семантическая разметка помогает экранным чтецам определить связи между заголовками и данными. Для сложной таблицы одного визуального объединения недостаточно.

Используйте <th> для заголовков строк и столбцов. Атрибут scope уточняет область заголовка: col относится к столбцу, row – к строке, colgroup – к группе столбцов, а rowgroup – к группе строк.

<style>
table { border-collapse: collapse; }
td, th { border: 1px solid #777; padding: 8px; }
</style>

<table>
  <caption>Продажи по месяцам</caption>
  <thead>
    <tr>
      <th id="month" scope="col">Месяц</th>
      <th id="sales" scope="col">Продажи</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="january" scope="row">Январь</th>
      <td headers="january sales">24</td>
    </tr>
  </tbody>
</table>

Тег <caption> дает таблице короткое название. В сложной структуре связывайте ячейку данных с несколькими заголовками через headers и id. Значение 24 связано с заголовками «Январь» и «Продажи».

Каждый идентификатор id должен быть уникальным на странице. В headers перечисляйте идентификаторы относящихся к ячейке заголовков через пробел. Подробности есть в документации MDN о теге td.

Ошибки при объединении ячеек в HTML-таблице

Объединение ячеек таблицы HTML меняет число занятых позиций в сетке. Сдвиг появляется, когда код учитывает объединение в одной строке, но забывает его влияние на соседние строки.

• Перекрытие ячеек. Новая ячейка с colspan захватывает позиции, занятые rowspan сверху.
• Лишняя ячейка. После добавления colspan в строке остается прежнее число элементов, и последняя ячейка выезжает за край таблицы.
• Короткая строка. Ячейки занимают меньше позиций, чем содержит сетка, поэтому часть строки остается незаполненной.

Проверяйте каждую строку по формуле: сумма значений colspan и позиций, занятых rowspan сверху, должна равняться числу столбцов таблицы. Ячейку без colspan считайте за один столбец.

<style>
table { border-collapse: collapse; }
td, th { border: 1px solid #777; padding: 8px; }
</style>

<table>
  <tbody>
    <tr>
      <td rowspan="2">Общая ячейка</td>
      <td>Второй столбец</td>
      <td>Третий столбец</td>
      <td>Четвертый столбец</td>
    </tr>
    <tr>
      <td colspan="2">Два столбца</td>
      <td>Последний столбец</td>
    </tr>
  </tbody>
</table>

Во второй строке один столбец занят ячейкой из первой строки. Еще два занимает colspan="2", последний занимает обычная ячейка. Сумма равна четырем: 1 + 2 + 1 = 4.

Равная сумма помогает найти пропуски и лишние элементы. Дополнительно проверьте расположение ячеек: совпадение суммы само по себе не исключает пересечений.

Адаптивность таблиц с colspan и rowspan

Объединенные ячейки плохо превращаются в карточки на узком экране: их связи зависят от общей сетки строк и столбцов. Для широкой таблицы сохраните структуру и добавьте горизонтальную прокрутку.

<style>
.table-wrapper { overflow-x: auto; }
table { border-collapse: collapse; min-width: 560px; }
td, th { border: 1px solid #777; padding: 8px; }
</style>

<div class="table-wrapper">
  <table>
    <tr><th colspan="3">Отчет</th></tr>
    <tr><td>Январь</td><td>24</td><td>Готово</td></tr>
  </table>
</div>

Обертка добавляет горизонтальную прокрутку, сохраняя исходную структуру строк и столбцов.

Как проверить объединение ячеек в HTML

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

1. Определите ожидаемое число столбцов по структуре данных.
2. Для каждой строки сложите значения colspan и места от верхних rowspan.
3. Проверьте, что заголовки используют <th>, а таблица имеет <caption> или понятный контекст рядом.
4. Уменьшите ширину окна браузера и проверьте горизонтальную прокрутку.

Если сетка снова не сходится, временно уберите объединение и сравните строку с обычной таблицей. Затем верните атрибуты по одному, начиная с верхней строки.

Чтобы отменить изменения, удалите атрибуты объединения и восстановите удаленные ячейки.

Совет от нашей редакции: перед сложной схемой нарисуйте сетку на бумаге и отметьте занятые позиции.