Атрибут data-* тега <tfoot>
Описание
Атрибуты data-* в теге <tfoot> позволяют хранить дополнительную информацию в нижнем колонтитуле таблицы, доступную для JavaScript и CSS. Это часть набора пользовательских data-атрибутов HTML5.
<table>
<tfoot data-total="1250" data-currency="USD" data-format="financial">
<tr>
<td>Итого: $1,250.00</td>
</tr>
</tfoot>
</table>
Особенности работы:
- Имя атрибута должно начинаться с
data- - Значения хранятся как строки (преобразуются при необходимости)
- Доступны через JavaScript API (
dataset) - Могут использоваться в CSS через атрибутные селекторы
Пример доступа через JavaScript:
<table id="data-table">
<tfoot data-total="1250" data-currency="USD">
<tr><td>Итого</td></tr>
</tfoot>
</table>
<script>
const tfoot = document.querySelector('#data-table tfoot');
console.log(tfoot.dataset.total); // "1250"
console.log(tfoot.dataset.currency); // "USD"
// Изменение данных
tfoot.dataset.total = '1500';
tfoot.dataset.updated = 'true';
</script>
Пример использования в CSS:
<style>
tfoot[data-currency="USD"] {
background-color: #e8f5e9;
}
tfoot[data-currency="EUR"] {
background-color: #e3f2fd;
}
tfoot[data-updated="true"] {
border-left: 3px solid #ff9800;
}
</style>
<table>
<tfoot data-currency="USD" data-updated="false">
<tr><td>$1,250.00</td></tr>
</tfoot>
</table>
Рекомендации:
- Используйте осмысленные имена после
data- - Храните только данные, не влияющие на отображение
- Для сложных данных используйте JSON в одном атрибуте
- Избегайте дублирования видимого контента
Пример с JSON данными:
<table>
<tfoot data-summary='{"total":1250,"currency":"USD","vat":250}'>
<tr><td>Итого: $1,250.00 (вкл. НДС $250.00)</td></tr>
</tfoot>
</table>
<script>
const summary = JSON.parse(document.querySelector('tfoot').dataset.summary);
console.log(summary.vat); // 250
</script>
Ограничения:
- Значения всегда строковые (требуют преобразования)
- Нет встроенной валидации данных
- Не поддерживает сложные структуры данных без JSON
- Может увеличить размер HTML-документа
Примечание: Для сложных случаев:
- Используйте JavaScript-объекты для хранения данных
- Рассмотрите атрибуты ARIA для семантической разметки
- Для больших объемов данных используйте API