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

Описание

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

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

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

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

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

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

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

<table> <tr> <th rowspan="2" id="main-category" scope="rowgroup">Категория</th> <th colspan="2" scope="colgroup">Кварталы</th> </tr> <tr> <th scope="col">Q1</th> <th scope="col">Q2</th> </tr> <tr> <th scope="row">Продукт A</th> <td>100</td> <td>150</td> </tr> </table>

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

  • Сложность адаптации для мобильных экранов
  • Проблемы с выравниванием содержимого
  • Может нарушать структуру данных при экспорте

Пример с комбинированным объединением:

<table border="1"> <tr> <th rowspan="2">Регион</th> <th colspan="2">2023 год</th> </tr> <tr> <th>1 полугодие</th> <th>2 полугодие</th> </tr> <tr> <td>Северный</td> <td>120</td> <td>180</td> </tr> </table>

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

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