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

Описание

Атрибут hidden полностью скрывает элемент <table> и всё его содержимое. Таблица остаётся в DOM, но не отображается визуально и не занимает место в вёрстке.

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

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

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

Сравнение методов скрытия:

Метод Виден в DOM Занимает место Доступен для скринридеров
hidden Да Нет Нет
visibility: hidden Да Да Нет
opacity: 0 Да Да Да

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

  • Используйте для временного скрытия таблиц без удаления из DOM
  • Для важного контента применяйте другие методы скрытия
  • Сочетайте с aria-hidden="true" для полной доступности
  • Для показа используйте JavaScript: table.removeAttribute('hidden')

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

  • Не подходит для контента, который должен быть доступен для SEO
  • Скрытые таблицы не участвуют в расчёте макета страницы
  • Анимации и переходы не работают при скрытом состоянии

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