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

Описание

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

Пример использования:
<table border="1"> <thead> <tr> <th colspan="2">Объединенный заголовок</th> </tr> <tr> <th>Заголовок 1</th> <th>Заголовок 2</th> </tr> </thead> <tbody> <tr> <td>Данные 1</td> <td>Данные 2</td> </tr> </tbody> </table>

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

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

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

  • Используйте для группировки связанных столбцов
  • Сочетайте с rowspan для сложных заголовков
  • Добавляйте поясняющие атрибуты (scope, id) для доступности
  • Тестируйте отображение на разных устройствах

Пример с доступностью:

<table> <thead> <tr> <th colspan="3" id="main-header" scope="colgroup">Финансовый отчет</th> </tr> <tr> <th scope="col">Месяц</th> <th scope="col">Доход</th> <th scope="col">Расход</th> </tr> </thead> <tbody> <tr> <td>Январь</td> <td>1000</td> <td>500</td> </tr> </tbody> </table>

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

  • Сложность стилизации объединенных ячеек
  • Проблемы с адаптивностью на мобильных устройствах
  • Может усложнить обработку данных таблицы

Примечание: Для сложных табличных структур:

  • Рассмотрите использование CSS Grid для макета
  • Для динамических данных используйте JavaScript-библиотеки
  • Тестируйте с пользователями скринридеров