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

Описание

Атрибут hidden в теге <tfoot> скрывает нижний колонтитул таблицы от отображения на странице, сохраняя его в структуре DOM. Элемент остается доступным для JavaScript, но не виден пользователю.

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

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

  • Полностью удаляет элемент из визуального потока
  • Не занимает место на странице
  • Элемент остается в DOM (можно показать через JavaScript)
  • Эквивалентен CSS-свойству display: none

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

Метод Видимость Доступность в DOM
hidden Не виден Да
CSS display: none Не виден Да
CSS visibility: hidden Не виден, но место сохраняется Да
Удаление из DOM Не виден Нет

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

  • Используйте для временного скрытия элементов
  • Для постоянного скрытия предпочтительнее CSS
  • Сочетайте с ARIA-атрибутами для доступности
  • Избегайте скрытия важной информации

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

  • Не подходит для скринридеров (используйте aria-hidden)
  • Может быть обнаружено через DevTools
  • Не влияет на производительность (элемент остается в DOM)
  • Поддержка в старых IE требует полифила

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

<table> <tfoot hidden aria-hidden="true"> <tr><td>Технические данные</td></tr> </tfoot> </table>

Примечание: Для сложных сценариев:

  • Используйте CSS-классы для управления видимостью
  • Рассмотрите атрибуты ARIA для семантического скрытия
  • Для конфиденциальных данных используйте серверное управление