Объединение ячеек

Учимся объединять соседние ячейки, чтобы строить таблицы со сложной шапкой.

colspan растягивает ячейку на несколько столбцов, rowspan — на несколько строк.

Объединение по горизонтали — colspan

Атрибут colspan заставляет ячейку занять место нескольких столбцов. Значение — на сколько столбцов растянуть. Например, общий заголовок над двумя колонками:

<table>
  <tr>
    <th colspan="2">Контакты</th>
  </tr>
  <tr>
    <td>Телефон</td>
    <td>Почта</td>
  </tr>
</table>

Ячейка «Контакты» с colspan="2" растянулась на оба столбца. Обратите внимание: в этой строке всего одна ячейка вместо двух — потому что она заняла место двух.

Объединение по вертикали — rowspan

Атрибут rowspan растягивает ячейку на несколько строк вниз. Пригодится, когда значение общее для нескольких строк:

<table>
  <tr>
    <td rowspan="2">Понедельник</td>
    <td>Математика</td>
  </tr>
  <tr>
    <td>История</td>
  </tr>
</table>

Ячейка «Понедельник» с rowspan="2" занимает две строки. Во второй строке мы НЕ пишем ячейку для первого столбца — её место уже занято сверху.

Главное правило: считайте ячейки

Самая частая ошибка с объединением — «лишняя» или «недостающая» ячейка. Помните: если ячейка растянута на 2 столбца, в этой строке остальных ячеек должно быть на одну меньше. Если на 2 строки вниз — в следующей строке пропускаете соответствующую ячейку.

Атрибут	Направление
`colspan="N"`	объединяет N столбцов (по горизонтали)
`rowspan="N"`	объединяет N строк (по вертикали)

Как считать ячейки без ошибок

Объединение — место, где новички ошибаются чаще всего. Помогает простой приём: представьте таблицу как ровную сетку клеток и держите в голове, сколько клеток в строке должно быть всего (например, 3 столбца — значит 3 клетки).

Ячейка с colspan="2" «съедает» 2 клетки, поэтому в этой строке вы пишете не 3, а 2 ячейки (одна из них растянута).
Ячейка с rowspan="2" «съедает» по клетке в двух строках, поэтому в следующей строке одну ячейку вы не пишете.

Если посчитать клетки в каждой строке с учётом «съеденных» соседями, и везде получится одинаковое число — таблица собрана верно. Не получается с первого раза — это нормально: сложные таблицы со слиянием рисуют, аккуратно сверяясь с сеткой, и даже опытные разработчики делают это не спеша.

Итог

colspan="N" растягивает ячейку на N столбцов, rowspan="N" — на N строк.
При объединении в строке (или столбце) убирают «поглощённые» ячейки.
Главное — следить за общим числом ячеек, чтобы сетка не сломалась.