Атрибут colspan тега <td>

Описание

Атрибут colspan для элемента <td> определяет количество столбцов таблицы, которые должна занимать ячейка. Это позволяет создавать сложные макеты таблиц с объединёнными ячейками.

Пример использования:
<table border="1"> <tr> <td colspan="2">Объединённая ячейка на 2 столбца</td> </tr> <tr> <td>Ячейка 1</td> <td>Ячейка 2</td> </tr> </table>

Значения атрибута:

Значение Описание Когда использовать
1 Ячейка занимает 1 столбец (значение по умолчанию) Обычные ячейки таблицы
2 и более Ячейка объединяет указанное количество столбцов Заголовки групп столбцов, особые макеты

Особенности работы:

  • Объединённые ячейки "поглощают" соседние ячейки в строке
  • Сумма значений colspan в строке должна равняться количеству столбцов
  • Влияет на структуру всей таблицы - требует корректировки других строк
  • Поддерживается всеми браузерами

Пример сложной таблицы:

<table border="1"> <tr> <td colspan="3">Основной заголовок</td> </tr> <tr> <td rowspan="2">Боковой заголовок</td> <td>Подзаголовок 1</td> <td>Подзаголовок 2</td> </tr> <tr> <td colspan="2">Объединённые данные</td> </tr> </table>

Рекомендации:

  • Используйте для заголовков групп столбцов
  • Сочетайте с rowspan для сложных макетов
  • Проверяйте корректность структуры таблицы
  • Для сложных макетов рассмотрите CSS Grid или Flexbox

Ограничения:

  • Может усложнить адаптивность таблицы
  • Требует точного подсчёта столбцов
  • Не поддерживает анимацию изменения размера

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