Атрибут hidden тега <tr>

Описание

Атрибут hidden для тега <tr> скрывает строку таблицы от отображения в браузере. Это булевый атрибут, который не требует значения - его наличие указывает на скрытое состояние элемента.

Пример использования:
<table> <tr> <td>Видимая строка</td> </tr> <tr hidden> <td>Скрытая строка</td> </tr> </table>

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

  • Эквивалентен CSS-правилу display: none
  • Скрывает строку и занимаемое ей пространство
  • Не влияет на доступность (скринридеры также игнорируют содержимое)
  • Может быть переопределён CSS с более высоким приоритетом

Сравнение с CSS-альтернативами:

Метод Пример Разница
Атрибут hidden <tr hidden> Семантическое скрытие, display: none
CSS display tr { display: none } Аналогично, но требует селектора
CSS visibility tr { visibility: hidden } Скрывает содержимое, но сохраняет пространство

Рекомендации по использованию:

  • Используйте для временного скрытия строк без удаления
  • Для программного управления применяйте JavaScript
  • Не используйте как замену безопасности (данные остаются в HTML)
  • Сочетайте с атрибутами data-* для хранения информации

Пример с JavaScript:

<table id="data-table"> <tr> <td>Строка 1</td> </tr> <tr id="toggle-row"> <td>Скрываемая строка</td> </tr> </table> <button onclick="document.getElementById('toggle-row').toggleAttribute('hidden')"> Переключить видимость </button>

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

  • Не поддерживается в IE11 (нужен полифил)
  • Скрытые строки всё равно загружаются
  • Может влиять на структуру таблицы
  • Не подходит для чувствительных данных

Accessibility-совет:

Для динамически скрываемого контента используйте aria-hidden вместе с hidden для лучшей доступности.

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