Атрибут class тега <tfoot>
Описание
Атрибут class в теге <tfoot> позволяет назначать один или несколько CSS-классов для стилизации нижнего колонтитула таблицы. Это основной способ применения стилей и добавления функциональности к элементу.
<table>
<tfoot class="table-footer summary-section">
<tr>
<td>Итого: 100 руб.</td>
</tr>
</tfoot>
</table>
Особенности работы:
- Можно указать несколько классов через пробел
- Классы чувствительны к регистру
- Наследуют свойства от родительских элементов таблицы
- Могут использоваться для JavaScript-селекторов
Рекомендации по именованию:
- Используйте семантические имена (например, "summary", "totals")
- Придерживайтесь методологии BEM или другой системы именования
- Разделяйте классы для стилей и для JavaScript
- Избегайте избыточного количества классов
Пример с BEM-нотацией:
<style>
.table__footer {
background-color: #f5f5f5;
font-weight: bold;
}
.table__footer--highlight {
color: #d32f2f;
}
</style>
<table class="table">
<tfoot class="table__footer table__footer--highlight">
<tr>
<td>Общая сумма: 1500 руб.</td>
</tr>
</tfoot>
</table>
Ограничения:
- Избыточные классы усложняют поддержку
- Конфликты имен в больших проектах
- Специфичность CSS может создавать проблемы
- Зависимость от правильного написания имен
Пример хорошей практики:
<style>
/* Компонент таблицы */
.data-table {
width: 100%;
border-collapse: collapse;
}
/* Модификатор для подвала */
.data-table__footer--totals {
background-color: #f3e5f5;
border-top: 2px solid #7b1fa2;
}
</style>
<table class="data-table">
<tfoot class="data-table__footer data-table__footer--totals">
<tr>
<td>Итоги квартала</td>
<td>45000 руб.</td>
</tr>
</tfoot>
</table>
Примечание: Для сложных проектов:
- Используйте CSS-модули для изоляции стилей
- Применяйте препроцессоры (Sass, Less)
- Рассмотрите CSS-in-JS решения
- Создавайте систему дизайн-токенов