Атрибут data-* тега <caption>
Описание
Атрибуты data-* позволяют хранить дополнительную информацию в элементе <caption>, которая может быть использована JavaScript или CSS. Эти атрибуты особенно полезны для:
- Хранения метаданных о таблице
- Передачи данных в обработчики событий
- Управления отображением через CSS
<table>
<caption
data-report-id="R2023-045"
data-report-category="quarterly"
data-exportable="true"
>
Финансовый отчет Q3 2023
</caption>
<!-- Содержимое таблицы -->
</table>
| Аспект | Описание | Пример |
|---|---|---|
| Синтаксис | data-любое-название | data-report-type="annual" |
| Доступ из JS | Через свойство dataset | caption.dataset.reportId |
| Использование в CSS | Через атрибутные селекторы | [data-exportable="true"] |
Практические примеры:
1. Динамическое управление таблицей:
<table>
<caption data-sortable="true" data-sort-direction="asc">
Список пользователей (сортировка по имени)
</caption>
<!-- Содержимое таблицы -->
</table>
<script>
const caption = document.querySelector('caption[data-sortable]');
caption.addEventListener('click', function() {
const direction = this.dataset.sortDirection === 'asc' ? 'desc' : 'asc';
this.dataset.sortDirection = direction;
sortTable(direction); // Ваша функция сортировки
});
</script>
2. Стилизация на основе данных:
<style>
caption[data-priority="high"] {
color: #d32f2f;
font-weight: bold;
}
caption[data-exportable="true"]::after {
content: " (экспорт доступен)";
font-size: 0.8em;
color: #666;
}
</style>
<table>
<caption data-priority="high" data-exportable="true">
Важные финансовые показатели
</caption>
<!-- Содержимое таблицы -->
</table>
Рекомендации:
- Используйте осмысленные имена атрибутов
- Для сложных данных используйте JSON в одном атрибуте
- Избегайте хранения больших объемов данных
- Сочетайте с ARIA-атрибутами для доступности
Ограничения:
- Значения всегда строковые (нужно преобразовывать)
- Не поддерживается в очень старых браузерах
- Не предназначен для критически важных данных
Примечание: Data-атрибуты в <caption> лучше всего подходят для хранения вспомогательной информации о таблице. Для управления состоянием сложных компонентов рассмотрите использование специализированных хранилищ данных.