Атрибут class тега <tr>
Описание
Атрибут class для тега <tr> позволяет назначать один или несколько классов CSS для строки таблицы. Это современный и рекомендуемый способ стилизации табличных данных.
<table>
<tr class="highlight alternate">
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
</table>
Особенности атрибута:
- Может содержать несколько классов, разделенных пробелами
- Не чувствителен к регистру (но рекомендуется consistency)
- Позволяет комбинировать стили через CSS-селекторы
- Поддерживает все современные CSS-возможности
Рекомендации по именованию классов:
| Паттерн | Пример | Когда использовать |
|---|---|---|
| БЭМ | table__row--highlight |
Крупные проекты с четкой структурой |
| Функциональный | even-row |
Простая стилизация |
| Состояние | is-selected |
Интерактивные таблицы |
Пример стилизации:
<style>
.data-table__row {
transition: background 0.3s ease;
}
.data-table__row:hover {
background: #f5f5f5;
}
.data-table__row--highlight {
font-weight: bold;
}
.data-table__row--inactive {
opacity: 0.6;
}
</style>
<table class="data-table">
<tr class="data-table__row data-table__row--highlight">
<td>Важная строка</td>
<td>$100.00</td>
</tr>
<tr class="data-table__row data-table__row--inactive">
<td>Неактивная запись</td>
<td>$50.00</td>
</tr>
</table>
Преимущества перед устаревшими атрибутами:
- Разделение структуры и оформления
- Возможность повторного использования стилей
- Поддержка медиа-запросов для адаптивности
- Доступ ко всем возможностям CSS
Лучшие практики:
- Используйте семантические имена классов
- Избегайте избыточной специфичности селекторов
- Для динамических таблиц применяйте классы-модификаторы
- Комбинируйте с атрибутами data-* для сложного поведения
Пример с JavaScript-взаимодействием:
<style>
.selectable-row {
cursor: pointer;
}
.selectable-row.selected {
background-color: #e3f2fd;
}
</style>
<table>
<tr class="selectable-row" onclick="this.classList.toggle('selected')">
<td>Нажмите для выбора</td>
<td>$75.00</td>
</tr>
</table>
Примечание: Для сложных табличных интерфейсов рассмотрите использование CSS-фреймворков или JavaScript-библиотек, таких как Bootstrap или DataTables.