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

Описание

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

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

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

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

Разница между hidden и другими методами скрытия:

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

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

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

Пример с JavaScript:

<table border="1"> <tr> <th id="toggle-header">Переключаемый заголовок</th> <th>Статичный заголовок</th> </tr> </table> <button onclick="toggleHeader()">Переключить видимость</button> <script> function toggleHeader() { const header = document.getElementById('toggle-header'); header.hidden = !header.hidden; } </script>

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

  • Не подходит для чувствительной информации (можно увидеть в исходном коде)
  • Может нарушать структуру таблицы при неправильном использовании
  • Некоторые старые браузеры требуют CSS-переопределения
  • Сложности с анимацией появления/скрытия

Пример с CSS-переопределением:

<style> /* Для старых браузеров */ th[hidden] { display: none !important; } /* Специальные стили для скрытых элементов */ th[hidden] + th { border-left: none; } </style> <table border="1"> <tr> <th hidden>Скрытый</th> <th>Видимый</th> </tr> </table>

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

  • Используйте CSS-классы для большего контроля
  • Рассмотрите анимации с transition и opacity
  • Для таблиц - динамическое создание/удаление элементов