Атрибут class тега <thead>
Описание
Атрибут class в теге <thead> позволяет назначать CSS-классы для всей группы заголовков таблицы. Это стандартный способ стилизации и управления заголовочной частью таблицы.
<table>
<thead class="table-header sticky-header">
<tr>
<th>Наименование</th>
<th>Количество</th>
</tr>
</thead>
<tbody>
<tr>
<td>Товар 1</td>
<td>10</td>
</tr>
</tbody>
</table>
Основные применения:
- Стилизация: Оформление заголовочной группы таблицы
- JavaScript: Выбор группы заголовков для манипуляций
- Доступность: Добавление ARIA-атрибутов через CSS
- Фреймворки: Интеграция с Bootstrap и другими библиотеками
Пример с CSS:
<style>
.table-header {
background-color: #f8f9fa;
font-weight: bold;
}
.sticky-header {
position: sticky;
top: 0;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
</style>
<table>
<thead class="table-header sticky-header">
<tr>
<th>Заголовок</th>
</tr>
</thead>
<tbody style="height: 200px; overflow-y: auto;">
<!-- Длинный список данных -->
</tbody>
</table>
Рекомендации:
- Используйте осмысленные имена классов
- Применяйте БЭМ или другие методологии именования
- Разделяйте стили оформления и функциональные классы
- Избегайте избыточного количества классов
Ограничения:
- Избыточное количество классов усложняет поддержку
- Могут возникать конфликты специфичности CSS
- Не заменяет семантическую разметку
- Сложности при динамическом изменении классов
Примечание: Для профессиональной разработки:
- Используйте CSS-препроцессоры (SASS/LESS)
- Применяйте CSS-модули для изоляции стилей
- Рассмотрите utility-first подход (Tailwind CSS)