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

Описание

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

Пример использования:
<table border="1"> <thead> <tr> <th>Продукт</th> <th>Цена</th> </tr> </thead> <tbody hidden> <tr> <td>Смартфон</td> <td>500$</td> </tr> </tbody> <tbody> <tr> <td>Ноутбук</td> <td>1200$</td> </tr> </tbody> </table>

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

  • Скрывает содержимое <tbody> и всех его дочерних элементов
  • Эквивалентен CSS-свойству display: none
  • Не удаляет элемент из DOM-дерева
  • Поддерживается всеми современными браузерами

Сравнение с CSS display:none:

Характеристика hidden display: none
Синтаксис HTML-атрибут CSS-свойство
Приоритет Может быть переопределен CSS Имеет более высокий приоритет
Доступность Скрывает от скринридеров Скрывает от скринридеров

Пример с JavaScript управлением:

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

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

  • Используйте для временного скрытия неактуальных данных
  • Для постоянного скрытия предпочтительнее CSS
  • Учитывайте влияние на доступность (скринридеры)
  • Для сложных сценариев используйте классы с CSS

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

  • Не подходит для постепенного скрытия (нет анимации)
  • Может быть случайно переопределен CSS
  • Скрывает весь <tbody> целиком

Примечание: Для скрытия с возможностью анимации используйте CSS-свойства opacity и visibility вместо атрибута hidden.