Атрибут data-* тега <th>
Описание
Атрибуты data-* в теге <th> позволяют хранить дополнительную информацию в заголовочных ячейках таблицы. Эти пользовательские атрибуты не влияют на отображение, но могут быть использованы JavaScript или CSS для расширенной функциональности.
<table id="products-table">
<tr>
<th data-column="name" data-type="string" data-required>Наименование</th>
<th data-column="price" data-type="number" data-format="currency">Цена</th>
</tr>
<tr>
<td>Телефон</td>
<td>25000</td>
</tr>
</table>
Синтаксис и правила именования:
| Правило | Пример | Недопустимый пример |
|---|---|---|
Префикс data- |
data-column |
column (без префикса) |
| Любые буквы после префикса | data-myAttribute |
data-123 (начинается с цифры) |
| Регистрозависимость | data-column-name |
data-Column-Name (не рекомендуется) |
Основные применения:
- Хранение метаданных: Тип данных, формат, обязательность
- JavaScript-взаимодействие: Доступ через dataset API
- CSS-селекторы: Стилизация на основе данных
- Интеграция с фреймворками: Vue, React, Angular
Пример с JavaScript:
<table id="data-table">
<tr>
<th data-column="date" data-format="dd-mm-yyyy">Дата</th>
</tr>
</table>
<script>
const th = document.querySelector('th[data-column="date"]');
console.log(th.dataset.format); // Выведет: "dd-mm-yyyy"
</script>
Пример с CSS:
<style>
th[data-required]::after {
content: " *";
color: red;
}
th[data-type="number"] {
text-align: right;
}
</style>
<table>
<tr>
<th data-required>Обязательное поле</th>
<th data-type="number">Числовое значение</th>
</tr>
</table>
Рекомендации:
- Используйте осмысленные имена атрибутов
- Придерживайтесь единого стиля именования (kebab-case)
- Не храните большие объемы данных
- Документируйте используемые data-атрибуты
Ограничения:
- Значения всегда хранятся как строки
- Нет встроенной валидации данных
- Избыточное использование может усложнить код
- Не заменяют семантическую разметку
Примечание: Для сложных случаев рассмотрите:
- Хранение JSON в data-атрибутах
- Использование кастомных элементов
- Специализированные библиотеки для работы с таблицами