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

Описание

Атрибут title в теге <th> добавляет всплывающую подсказку (tooltip) к заголовку таблицы, которая появляется при наведении курсора. Это полезно для предоставления дополнительной информации без загромождения видимого содержимого.

Пример использования:
<table border="1"> <tr> <th title="Кликните для сортировки по возрастанию/убыванию">Дата</th> <th title="В рублях, без учета НДС">Сумма</th> </tr> <tr> <td>2025-01-15</td> <td>12 450₽</td> </tr> </table>

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

  • Подсказка появляется при наведении (hover) и исчезает при уходе курсора
  • Время появления зависит от браузера (обычно 0.5-1 сек)
  • Поддерживается всеми современными браузерами
  • Доступна для скринридеров (озвучивается)

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

  • Используйте для кратких пояснений (1-2 предложения)
  • Избегайте важной информации только в title
  • Для сложного контента используйте другие методы (popover, modal)
  • Сочетайте с ARIA-атрибутами для лучшей доступности

Пример с CSS-стилизацией:

<style> th[title] { border-bottom: 1px dotted #999; cursor: help; } </style> <table border="1"> <tr> <th title="Формат: ДД.ММ.ГГГГ">Дата</th> </tr> </table>

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

  • Нет контроля над внешним видом подсказки
  • Не работает на мобильных устройствах (нет hover)
  • Ограниченная длина текста (обрезается в некоторых браузерах)
  • Невозможность форматирования текста

Примечание: Для профессиональных решений:

  • Используйте CSS-библиотеки (Bootstrap, Material UI)
  • Рассмотрите JavaScript-решения (tippy.js, popper.js)
  • Для форм применяйте <label> с ассоциацией