Ячейка таблицы по умолчанию занимает одну клетку сетки - но иногда нужно, чтобы одна ячейка растянулась на несколько столбцов или строк сразу, например для общего заголовка или итоговой строки. За это отвечают два атрибута у <td> или <th>: colspan объединяет по горизонтали, rowspan - по вертикали.
Попробуй поменять colspan="2" на colspan="3" или убрать его совсем - посмотри, как это сдвигает столбцы в итоговой строке.
colspan - объединение по столбцам
Атрибут colspan у <td> или <th> задаёт число, на сколько столбцов растягивается ячейка. Важно: если ячейка растянулась на два столбца, в этой же строке должно быть на одну отдельную ячейку меньше - иначе общее число столбцов в строке превысит то, что в остальных строках таблицы.
<tr><td colspan="2">Итого</td><td>100</td></tr> - одна растянутая ячейка (2 столбца) плюс одна обычная = 3 столбца, как и в остальной таблице.
<tr><td colspan="2">Итого</td><td>500</td><td>100</td></tr> - после colspan="2" в строке всё равно осталось три отдельных td: получается 2+1+1=4 столбца вместо 3, таблица съедет.
rowspan - объединение по строкам
Атрибут rowspan работает так же, но по вертикали: растягивает ячейку на несколько строк вниз. Здесь та же логика наоборот - если ячейка растянулась на две строки, то в следующей строке (строках) должно быть на одну отдельную ячейку меньше, потому что этот столбец в них уже занят растянутой ячейкой сверху.
<tr><td rowspan="2">Январь</td><td>Продажи</td></tr><tr><td>Возвраты</td></tr> - во второй строке на одну ячейку меньше, потому что первый столбец уже занят сверху.
<tr><td rowspan="2">Январь</td><td>Продажи</td></tr><tr><td>Февраль</td><td>Возвраты</td></tr> - во второй строке забыли убрать ячейку: получится лишний, не запланированный столбец.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Добавить colspan, но не убрать лишние td в той же строке | Общее число столбцов в строке превышает остальные строки, таблица визуально съезжает | Уменьшать число отдельных td в строке ровно на столько, на сколько ячейка растянута |
| Поставить rowspan сверху, но не убрать соответствующую ячейку в следующей строке | В следующей строке появляется лишний, не запланированный столбец | Убирать в следующей строке (строках) ровно столько td, сколько строк "накрыла" ячейка сверху |
| Ожидать, что colspan="0" растянет ячейку до конца таблицы, как когда-то работало rowspan="0" | В HTML5 colspan="0" особого смысла не имеет - браузер обработает это как обычное (и, скорее всего, неожиданное) значение | Указывать конкретное число столбцов явно вместо 0 |
| Указывать заведомо большое значение "на всякий случай" | Спецификация ограничивает значения (colspan - до 1000, rowspan - до 65534), превышение обрезается до максимума | Указывать реальное нужное число, а не произвольно большое |
Шпаргалка
| Термин | Значение |
|---|---|
| colspan | Сколько столбцов объединяет ячейка по горизонтали (по умолчанию 1) |
| rowspan | Сколько строк объединяет ячейка по вертикали (по умолчанию 1) |
| rowspan="0" | Особое значение - ячейка растягивается до конца текущей группы строк (thead/tbody/tfoot) |
| Максимум по спецификации | colspan - до 1000, rowspan - до 65534, большее обрезается |
Коротко: отвечаем на вопросы
Что будет, если из-за colspan/rowspan число столбцов в строках перестанет совпадать?
Браузер не выдаст ошибку и всё равно отрисует таблицу, но это считается "table model error" - несоответствием табличной модели. Результат непредсказуем визуально (столбцы съезжают) и хуже воспринимается программами чтения с экрана, которым нужна ровная сетка строк и столбцов.
Есть ли ограничение на значение colspan или rowspan?
Да. По спецификации colspan должен быть больше 0 и не больше 1000, а rowspan - от 0 до 65534; значения больше максимума браузер обрежет до предельного. При этом rowspan="0" имеет особое значение (растянуть до конца группы строк), а colspan="0" в HTML5 особого смысла не несёт.
Можно ли использовать colspan и rowspan на одной и той же ячейке?
Да, это два независимых атрибута, и их можно сочетать в одной ячейке, чтобы она растянулась сразу и по столбцам, и по строкам - главное, чтобы после этого сетка таблицы по-прежнему без наложений и пропусков покрывалась ячейками.
