Атрибут title тега <thead>
Описание
Атрибут title в теге <thead> добавляет всплывающую подсказку (tooltip) для всей группы заголовков таблицы. Подсказка появляется при наведении курсора на любую часть заголовочной секции.
<table border="1">
<thead title="Кликните по заголовку для сортировки. Удерживайте Shift для множественной сортировки.">
<tr>
<th>Дата</th>
<th>Сумма</th>
</tr>
</thead>
<tbody>
<tr>
<td>2025-01-15</td>
<td>1 200₽</td>
</tr>
</tbody>
</table>
Особенности работы:
- Подсказка появляется при наведении на любую часть <thead>
- Время появления зависит от браузера (обычно 0.5-1 сек)
- Поддерживается всеми современными браузерами
- Доступна для скринридеров (озвучивается)
Рекомендации:
- Используйте для кратких пояснений (1-2 предложения)
- Избегайте дублирования информации из видимого контента
- Для сложного контента используйте другие методы (popover, modal)
- Сочетайте с ARIA-атрибутами для лучшей доступности
Пример с CSS-стилизацией:
<style>
thead[title] {
border-bottom: 2px dotted #999;
cursor: help;
}
thead[title]:hover {
background-color: #f8f9fa;
}
</style>
<table>
<thead title="Формат даты: ДД.ММ.ГГГГ">
<tr>
<th>Дата операции</th>
</tr>
</thead>
</table>
Ограничения:
- Нет контроля над внешним видом подсказки
- Не работает на мобильных устройствах (нет hover)
- Ограниченная длина текста (обрезается в некоторых браузерах)
- Невозможность форматирования текста
Альтернативные решения:
<style>
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 200px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -100px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
<table>
<thead class="tooltip">
<tr>
<th>Финансовые показатели<span class="tooltiptext">Данные за 2025 год<br>В тысячах рублей</span></th>
</tr>
</thead>
</table>
Примечание: Для профессиональных решений:
- Используйте CSS-библиотеки (Bootstrap, Material UI)
- Рассмотрите JavaScript-библиотеки (tippy.js, popper.js)
- Для сложных подсказок используйте компоненты