Атрибут data-* тега <col>
Описание
Атрибуты data-* позволяют хранить дополнительную информацию о столбцах таблицы, которая может использоваться JavaScript или CSS.
<table>
<colgroup>
<col data-type="number" data-format="currency">
<col data-type="string" data-required="true">
</colgroup>
<!-- Содержимое таблицы -->
</table>
Типичные сценарии применения:
| Атрибут | Пример | Использование |
|---|---|---|
data-type |
data-type="date" |
Указание типа данных в столбце |
data-format |
data-format="YYYY-MM-DD" |
Формат отображения данных |
data-role |
data-role="primary-key" |
Роль столбца в таблице |
Доступ через JavaScript:
<table id="data-table">
<colgroup>
<col id="price-col" data-type="number" data-format="currency">
</colgroup>
<!-- Содержимое таблицы -->
</table>
<script>
const col = document.getElementById('price-col');
console.log(col.dataset.type); // "number"
console.log(col.dataset.format); // "currency"
// Изменение значения
col.dataset.format = 'percentage';
</script>
Использование в CSS:
<style>
col[data-type="number"] {
background-color: #f8f9fa;
text-align: right;
}
col[data-required="true"] td {
border-left: 3px solid #dc3545;
}
</style>
Рекомендации:
- Используйте осмысленные имена после префикса
data- - Для сложных данных используйте JSON в атрибуте:
<col data-meta='{"type":"date","format":"iso"}'>
- Избегайте дублирования информации, уже присутствующей в контенте
Ограничения:
- Не все CSS-селекторы работают с
<col> - Значения всегда возвращаются как строки
- Для сложной логики требуется JavaScript
Примечание: Хотя атрибуты data-* предоставляют гибкий способ хранения метаданных о столбцах, для сложных интерактивных таблиц рассмотрите использование специализированных библиотек (DataTables, Handsontable).