Атрибут data-* тега <thead>
Описание
Атрибуты data-* в теге <thead> позволяют хранить дополнительную информацию о группе заголовков таблицы. Эти пользовательские атрибуты не влияют на отображение, но могут быть использованы JavaScript или CSS.
<table>
<thead data-table-type="financial" data-version="2.1">
<tr>
<th>Период</th>
<th>Сумма</th>
</tr>
</thead>
<tbody>
<tr>
<td>Январь</td>
<td>100 000₽</td>
</tr>
</tbody>
</table>
Основные применения:
- Метаданные: Тип таблицы, версия структуры
- Конфигурация: Настройки сортировки, фильтрации
- Доступность: Дополнительные описания для скринридеров
- Интеграция: Связь с JavaScript-фреймворками
Пример с JavaScript:
<table id="report-table">
<thead data-sortable="true" data-default-sort="asc">
<tr>
<th>Дата</th>
<th>Сумма</th>
</tr>
</thead>
</table>
<script>
const tableHead = document.querySelector('#report-table thead');
if (tableHead.dataset.sortable === 'true') {
console.log('Таблица поддерживает сортировку по умолчанию:',
tableHead.dataset.defaultSort);
}
</script>
Пример с CSS:
<style>
thead[data-table-type="financial"] {
background-color: #f0f9eb;
border-bottom: 2px solid #67c23a;
}
thead[data-version^="2"] th {
font-weight: bold;
text-transform: uppercase;
}
</style>
<table>
<thead data-table-type="financial" data-version="2.1">
<tr>
<th>Финансовые данные</th>
</tr>
</thead>
</table>
Рекомендации:
- Используйте осмысленные имена атрибутов
- Придерживайтесь единого стиля именования (kebab-case)
- Для сложных данных используйте JSON в атрибуте
- Документируйте используемые data-атрибуты
Ограничения:
- Значения всегда хранятся как строки
- Нет встроенной валидации данных
- Избыточное использование может усложнить код
- Не заменяют семантическую разметку
Пример с JSON данными:
<table>
<thead data-columns='{"count": 2, "types": ["string", "number"]}'>
<tr>
<th>Наименование</th>
<th>Цена</th>
</tr>
</thead>
</table>
<script>
const thead = document.querySelector('thead');
const columns = JSON.parse(thead.dataset.columns);
console.log('Тип второго столбца:', columns.types[1]);
</script>