Colspan в html что это?

Colspan задаёт количество столбцов, занимаемых ячейкой. Например, <tr><td colspan="2">Итого</td><td>45</td></tr> покрывает три столбца двумя ячейками. Первой уже отданы две позиции, поэтому добавлять пустую ячейку вместо второй не нужно. Это объединение по горизонтали; для охвата строк используется rowspan. Считайте занятые позиции сетки, а не только число тегов td.

colspan объединяет несколько позиций столбцов в одной ячейке таблицы. Его ставят на td или th, указывая число занимаемых столбцов. Например, для таблицы с тремя столбцами подходит строка <tr><td colspan="2">Итого</td><td>45</td></tr>. Здесь первая ячейка покрывает две позиции, а следующая — третью.

Считайте ширину строки по сетке, а не по количеству написанных элементов. В примере два тега td, но три занятых столбца. Если после объединённой ячейки вставить ещё одну пустую ячейку ради якобы пропущенного места, получится дополнительная позиция. Это частая причина неожиданного появления лишнего столбца.

Атрибут не задаёт физическую ширину в пикселях. Конкретный размер определяется раскладкой таблицы, содержимым и CSS. Объединение говорит о структуре, поэтому его нельзя использовать как универсальный способ растянуть любой блок страницы. Если требуется только широкий декоративный контейнер, таблица может вообще не подходить по смыслу.

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

Для данных с заголовками сохраняйте понятные связи между заголовками и значениями. Чем больше сложных объединений, тем труднее читать таблицу, особенно без визуального обзора. Иногда проще разделить данные на несколько небольших таблиц с ясными названиями. Используйте допустимые целые значения colspan и проверяйте документ валидатором после изменения структуры.